IGServer 地图文档

mapgis-3d-igs-doc-layer

属性

baseUrl

• 类型: String
• 必填
• 非侦听属性
• 描述: 服务基地址。

  http://{ip}:{port}/igs/rest/mrms/docs

srs

• 类型: String
• 必传
• 侦听属性
• 描述: 坐标参考系，可通过改变 srs 的值(4326 与 3857 切换)，来实现动态投影，目前支持如下值：

  经纬度方式请填写:EPSG:4326
  web 墨卡托方式请填写:EPSG:3857

layers

• 类型: String
• 可选 不传则显示全部
• 侦听属性
• 描述: 指定需要被取图的图层序列号数组，编号从 0 开始，多个图层以“,”分隔

  1、show：仅仅显示指定了图层序号的图层。
  2、hide ：显示除 hide 参数指定图层外所有的图层。
  3、include：除显示默认图层（地图文档内图层状态为可见的图层）外，另追加这些被指定的图层显示，追加的这些图层必须为地图中包含的图层。
  4、exclude: 从默认图层列表里删除这些被指定的图层后，进行显示。
  例如：layers:"show:1,2" //仅显示第 1、2 个图层

token

• 类型: Object
• 可选
• 非侦听属性
• 描述: token 信息

  要传 token 时，请以如下方式传递
  token:{
  key: "token",
  value: "9c157e9585486c02edf817d2ecbc7752"
  }

layerStyle

• 类型: Object
• 可选
• 侦听属性
• 描述: 控制地图的显隐、透明度以及顺序，有如下值：

  visible Boolean 控制图层显示或隐藏，不会重新加载图层，true：显示图层、fales：隐藏图层
  opacity Number 控制图层透明度，会重新加载图层，0 - 1 之间的数字，0：隐藏，1：显示
  zIndex Number 控制图层顺序，会重新加载图层，类似 css 里面的 z-index，从 1 开始的数字
  

vueKey

• 类型: String
• 可选
• 非侦听属性
• 默认值: default
• 描述:

  mapgis-web-scene 组件的 ID，当使用多个 mapgis-web-scene 组件时，需要指定该值，来唯一标识 mapgis-web-scene 组件，
  同时 mapgis-web-scene 插槽中的组件也需要传入相同的 vueKey，让组件知道应该作用于哪一个 mapgis-web-scene。

vueIndex

• 类型: Number
• 可选
• 非侦听属性
• 描述:

  当 mapgis-web-scene 插槽中使用了多个相同组件时，例如多个 mapgis-3d-igs-doc-layer 组件，用来区分组件的标识符。

示例

加载 4326 地图

<template>
  <mapgis-web-scene>
    <mapgis-3d-igs-doc-layer :baseUrl="baseUrl" />
  </mapgis-web-scene>
</template>

<script>
export default {
  data() {
    return {
      //要加载的url
      baseUrl: "http://develop.smaryun.com:6163/igs/rest/mrms/docs/北京市",
    };
  },
};
</script>

动态投影

<template>
  <mapgis-web-scene>
    <mapgis-3d-igs-doc-layer :baseUrl="baseUrl" :srs="srs" />
  </mapgis-web-scene>
</template>

<script>
export default {
  data() {
    return {
      //要加载的url
      baseUrl: "http://develop.smaryun.com:6163/igs/rest/mrms/docs/北京市",
      //动态投影
      srs: "EPSG: 3857",
    };
  },
};
</script>

设置样式 - 透明度、可见性、zIndex

<template>
  <mapgis-web-scene>
    <mapgis-3d-igs-doc-layer :baseUrl="baseUrl" :layerStyle="layerStyle" />
  </mapgis-web-scene>
</template>

<script>
export default {
  data() {
    return {
      //要加载的url
      baseUrl: "http://develop.smaryun.com:6163/igs/rest/mrms/docs/北京市",
      //图层样式
      layerStyle: {
        opacity: 0.5,
        visible: true,
        zIndex: 115,
      },
    };
  },
};
</script>

设置子图层

<template>
  <mapgis-web-scene>
    <mapgis-3d-igs-doc-layer :baseUrl="baseUrl" :layers="layers" />
  </mapgis-web-scene>
</template>

<script>
export default {
  data() {
    return {
      //要加载的url
      baseUrl: "http://develop.smaryun.com:6163/igs/rest/mrms/docs/北京市",
      //要显示的子图层
      layers: "show:1,2",
    };
  },
};
</script>

多个 mapgis-web-scene

<template>
  <mapgis-web-scene :vueKey="vueKey">
    <mapgis-3d-ogc-wmts-layer
      :baseUrl="baseUrlWmts"
      :wmtsLayer="layerWmts"
      :tileMatrixSet="tileMatrixSetIDWmts"
      :srs="srsWmts"
      :layerStyle="layerStyleWmts"
      :vueKey="vueKey"
    />
    <mapgis-3d-igs-doc-layer
      :baseUrl="baseUrlDoc"
      :layers="layers"
      :layerStyle="layerStyleDoc"
      :vueKey="vueKey"
    />
    <button @click="changeIndex">改变图层顺序</button>
  </mapgis-web-scene>
  <mapgis-web-scene :vueKey="vueKey2" />
</template>

<script>
export default {
  data() {
    return {
      baseUrlWmts:
        "http://t0.tianditu.com/DataServer?T=vec_c&L={TileMatrix}&Y={TileRow}&X={TileCol}&tk=f5347cab4b28410a6e8ba5143e3d5a35",
      layerWmts: "",
      tileMatrixSetIDWmts: "",
      srsWmts: "EPSG:4326",
      layerStyleWmts: {
        zIndex: 100,
      },
      //要加载的url
      baseUrlDoc: "http://develop.smaryun.com:6163/igs/rest/mrms/docs/北京市",
      //要显示的子图层
      layers: "show:1,2",
      //mapgis-web-scene的Id，组件唯一标识，多个图层时用来查找webGlobe
      vueKey: "vueKeyOne",
      vueKey2: "vueKeyTwo",
      layerStyleDoc: {
        zIndex: 1000,
      },
    };
  },
  methods: {
    changeIndex() {
      if (this.layerStyleDoc.zIndex === 1000) {
        this.layerStyleDoc.zIndex = 50;
      } else {
        this.layerStyleDoc.zIndex = 1000;
      }
    },
  },
};
</script>