# ArcGIS 地图

mapgis-3d-arcgis-map-layer

# 属性

# baseUrl

  • 类型: String
  • 默认值: null
  • 非侦听属性
  • 描述: arcgis 地图请求的基地址路径。

# srs

  • 类型: String

  • 必传

  • 侦听属性

  • 描述: WMS 标准中的 srs(1.1.0 版本)或 crs(1.3.0 版本),即坐标参考系,可通过改变 srs 的值(4326 与 3857 切换),来实现动态投影,目前支持如下值:

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

# layers

  • 类型: String
  • 默认值: null
  • 侦听属性
  • 描述: 指定需要被取图的图层序列号数组,以“,”分隔。默认为依据文档原始图层状态进行设置。 show:仅仅显示指定了图层序号的图层;
  • 示例: "show:1,2,3"
  • 注意: 若不传该参数,则默认显示所有图层。

    layers:"" //显示全部图层
    layers:"show:1,2,3"

# layerStyle

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

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

# options

# id

  • 类型: String
  • 可选
  • 侦听属性
  • 描述: 图层唯一标识符,如果不传,以 vueIndex 代替

# 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 组件,用来区分组件的标识符。

# 示例

<template>
  <mapgis-web-scene class="main">
    <mapgis-3d-arcgis-map-layer v-bind="$data" />
    <button @click="changeOpacity">改变透明度</button>
    <button @click="changeIndex">改变图层顺序</button>
  </mapgis-web-scene>
</template>

<script>
export default {
  name: "arcgisMapLayer",
  data() {
    return {
      baseUrl:
        "http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer",
      layers: "show:0",
      layerStyle: {
        visible: true,
        opacity: 1,
        zIndex: 2,
      },
      options: {
        tileWidth: 216,
        tileHeight: 216,
      },
      srs: "EPSG:4326",
    };
  },
  methods: {
    changeOpacity() {
      this.layerStyle.opacity = 0.5;
    },
    changeIndex() {
      if (this.layerStyle.zIndex === 3) {
        this.layerStyle.zIndex = 5;
      } else {
        this.layerStyle.zIndex = 1;
      }
    },
  },
};
</script>
<style lang="css">
.main {
  height: 600px;
  width: 100%;
}
</style>

# 控制多张地图显示的 zIndex

<template>
  <mapgis-web-scene class="main">
    <mapgis-3d-arcgis-map-layer :baseUrl="url" :layerStyle="layerStyle" />
    <mapgis-3d-arcgis-tile-layer
      v-if="show"
      :baseUrl="url2"
      :layerStyle="layerStyle2"
    ></mapgis-3d-arcgis-tile-layer>
    <button @click="changeOpacity">改变透明度</button>
    <button @click="changeIndex">改变图层顺序</button>
    <button @click="changeLayers">改变图层顺序</button>
    <button @click="addMap">新增地图</button>
  </mapgis-web-scene>
</template>

<script>
export default {
  name: "arcgisMapLayer",
  data() {
    return {
      url: "http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer",
      url2: "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer",
      layers: "",
      layerStyle: {
        visible: true,
        opacity: 1,
        zIndex: 2000,
      },
      layerStyle2: {
        visible: true,
        opacity: 1,
        zIndex: 2001,
      },
      options: {
        tileWidth: 256,
        tileHeight: 256,
      },
      id: "2",
      show: false,

      // srs: "EPSG:4326"
    };
  },
  methods: {
    addMap() {
      this.show = !this.show;
    },
    changeOpacity() {
      if (this.layerStyle.opacity > 1) {
        this.layerStyle.opacity = 0;
      } else {
        this.layerStyle.opacity += 0.1;
      }
    },
    changeIndex() {
      if (this.layerStyle.zIndex === 3) {
        this.layerStyle.zIndex = 5;
      } else {
        this.layerStyle.zIndex = 1;
      }
    },
    changeLayers() {
      this.layers = "1,2,4,6,7,8,10";
    },
  },
};
</script>
<style lang="css">
.main {
  height: 600px;
  width: 100%;
}
</style>