优化天地图矢量瓦片切换

YANGDL

2021-01-09 da21171cc9b248ad9c7f062e41f039eceb910c23

优化天地图矢量瓦片切换

 src/Sgis.js

@@ -48,9 +48,7 @@
 */
const initBasemapsHelper = (map, L) => {
  // todo 这里进行底图地图的初始化
  var basemapHelper = new BasemapHelper({ map, L })
  console.log(basemapHelper)
  return basemapHelper
  return new BasemapHelper({ map, L })
}
/**
 * 业务底图初始化
@@ -58,8 +56,7 @@
 * @param L
 */
const initTileLayersHelper = (map, L) => {
  const serviceLayerHelper = new ServiceLayerHelper({ map, L })
  return serviceLayerHelper
  return new ServiceLayerHelper({ map, L })
}

/**
@@ -69,9 +66,8 @@
 */
const initVectorLayersHelper = (map, L) => {
  // todo 这里进行地图的初始化
  var vectorLayerHelper = new VectorLayerHelper({ map, L })
  window.vectorLayerHelper = vectorLayerHelper
  return vectorLayerHelper
  window.vectorLayerHelper = new VectorLayerHelper({ map, L })
  return window.vectorLayerHelper
}

export default {

 src/components/LayerController/modules/LcBaseMap.vue

@@ -1,85 +1,91 @@
<template>
  <div class="inner-panel" v-show="isShow">
    <div v-for="item in basemapList" :key="item.code" class="basemap-layer-item">
      <div style="display: flex;">
        <el-checkbox :src="item.conf.icon_actived" style="display: flex;" name="basemap" v-model="selectedBasemap"
                     :value="item.code" label="item.code" @change="changeBasemap">标注
  <div class="base-map-inner-panel" v-show="isShow">
    <div  style="display: flex;" v-for="item in basemapList" :key="item.code" class="basemap-layer-item">
        <img class="base-map-img" :src="item.conf.icon_actived" width="50" height="50" :title="item.name"
             @click="changeBasemap(item)"/>
        <el-checkbox  class="base-map-anno" name="basemap" v-model="item.conf.annotationCheck"
                     label="标注" @change="changeBasemap(item)">
        </el-checkbox>
        <img style="position: absolute;" :src="item.conf.icon_actived" width="50" height="50" :title="item.name"
             @click="changeBasemap"/>
      </div>


      <!--      <input  style="position: absolute;" type="radio" name="basemap" v-model="selectedBasemap" :value="item.code" title="显示标注" @change="changeBasemap"/>标注-->

    </div>
  </div>
</template>

<script>
export default {
  name: "LcBaseMap",
  name: 'LcBaseMap',
  components: {},
  data() {
  data () {
    return {
      isShow: true,
      basemapList: [],
      selectedBasemap: "tianditu_img",
    };
      basemapList: []
    }
  },
  computed: {
    basemapHelper() {
    basemapHelper () {
      return this.$store.state.map.basemapHelper
    }
  },
  mounted() {
  mounted () {
  },
  methods: {
    toggleShow() {
      this.isShow = !this.isShow
    updateBasemapList () {
      this.basemapList = this.basemapHelper.getBasemapList()
    },
    updateBasemapList() {
      let list = this.basemapHelper.getBasemapList();
      this.basemapList = list;
    },
    changeBasemap() {
      this.basemapHelper.showBasemap(this.selectedBasemap, true)
    },
    changeBasemap (itm) {
      const code = itm.code
      this.basemapList.forEach((item) => {
        if (item.code === code) {
          this.basemapHelper.showBasemap(item.code, item.conf.annotationCheck, true)
          this.basemapHelper.getBasemapList().forEach((item) => {
            item.layer.bringToBack()
          })
        }
      })
    }
  },
  watch: {
    basemapHelper(newVal) {
    basemapHelper (newVal) {
      if (newVal != null) {
        this.updateBasemapList();
        this.updateBasemapList()
      }
    },
  },
};
    }
  }
}
</script>

<style scoped lang="less">
.inner-panel {
<style lang="less">
.base-map-inner-panel {
  display: flex;
  justify-content: center;
  align-items: center;
}

.basemap-layer-item {
  display: flex;
  width: 50px;
  height: 50px;
  margin: 10px;
  border: 2px solid white;

  input {
    position: relative;
    left: 0px;
    top: -53px;
  .base-map-img{
    position: absolute;
  }

  .basemap-layer-item-name {
    position: relative;
    left: 0px;
    top: -53px;
  .base-map-img:hover{
     cursor:pointer;
  }
  .base-map-anno{
    position: absolute;margin-left: 2px;background-color: rgba(0,0,0,.5);color: white;
    .el-checkbox__label{
      padding-left: 5px !important;
    }
  }
  .basemap-layer-item {
    display: flex;
    width: 50px;
    height: 50px;
    margin: 10px;
    border: 2px solid white;
    input {
      position: relative;
      left: 0;
      top: -53px;
    }
    .basemap-layer-item-name {
      position: relative;
      left: 0;
      top: -53px;
    }
  }
}
</style>

 src/components/helpers/BasemapHelper.js

@@ -50,16 +50,15 @@
     * @param layer 待显示图层引用
     * @param isHideOthers 是否先关闭其他图层，默认是true
     */
    showBasemap = (code, isHideOthers = true) => {
    showBasemap = (code, showAnnotation, isHideOthers = true) => {
      const basemap = this.basemapMap.get(code)
      if (isHideOthers) {
        for (let i = 0, len = this.basemapList.length; i < len; ++i) {
          this.map.removeLayer(this.basemapList[i].layer)
          this.map.removeLayer(this.basemapList[i].annotation)
        }
        this.basemapLayerGroup.clearLayers()
      }
      this.map.addLayer(basemap.layer)
      this.map.addLayer(basemap.annotation)
      this.basemapLayerGroup.addLayer(basemap.layer)
      if (showAnnotation) {
        this.basemapLayerGroup.addLayer(basemap.annotation)
      }
    }

    /**

 src/components/helpers/ServiceLayerHelper.js

@@ -10,6 +10,7 @@
    this.L = options.L
    this.tileLayersMap = new Map()
    this.tileLayersWMSArray = []
    this.tileLayerWmslayerGroup = L.layerGroup().addTo(this.map)
    this.tileLayersWMTSArray = []
    this.tileLayersTileArray = []
    this.mapConfig = {}
@@ -72,7 +73,7 @@
    layer.config = config

    if (isAddToMap) {
      layer.addTo(this.map)
      layer.addTo(this.tileLayerWmslayerGroup)
    }
    this.tileLayersMap.set(options.code, layer)
    this.tileLayersWMSArray.push(layer)
@@ -152,7 +153,7 @@
  getWMSConfig (code) {
    const mc = this.mapConfig
    for (let i = 0, len = mc.mapConfig.ServiceLayers.length; i < len; ++i) {
      if (code == mc.mapConfig.ServiceLayers[i].code && mc.mapConfig.ServiceLayers[i].type === 'wms') {
      if (code === mc.mapConfig.ServiceLayers[i].code && mc.mapConfig.ServiceLayers[i].type === 'wms') {
        return mc.mapConfig.ServiceLayers[i]
      }
    }

 src/conf/MapConfig.js

@@ -45,6 +45,7 @@
      icon_actived: '/assets/images/map-pages/icon/img.png',
      icon_deactived: '/assets/images/map-pages/icon/img.png',
      isAddToMap: true,
      annotationCheck: true,
      map: {
        layerName: '天地图影像地图',
        type: 'wmts',
@@ -80,6 +81,7 @@
      icon_actived: '/assets/images/map-pages/icon/road.png',
      icon_deactived: '/assets/images/map-pages/icon/road.png',
      isAddToMap: false,
      annotationCheck: true,
      map: {
        layerName: '天地图矢量地图',
        type: 'wmts',
@@ -117,6 +119,7 @@
      icon_actived: '/assets/images/map-pages/icon/img.png',
      icon_deactived: '/assets/images/map-pages/icon/img.png',
      isAddToMap: true,
      annotationCheck: true,
      map: {
        layerName: '天地图影像地图',
        type: 'wmts',
@@ -150,16 +153,18 @@
    },
    {
      code: 'tianditu_vec',
      name: '天地图影像',
      name: '天地图矢量',
      icon_actived: '/assets/images/map-pages/icon/road.png',
      icon_deactived: '/assets/images/map-pages/icon/road.png',
      isAddToMap: false,
      annotationCheck: true,
      map: {
        layerName: '天地图矢量地图',
        type: 'wmts',
        visible: false,
        layerType: 'vec_c',
        isLoadMapByToken: true,
        annotationCheck: true,
        url: TIANDITU_GIS_HOST + '/vec_c/wmts?layer=vec&style=default&tilematrixset=c' +
                    '&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}' +
                    '&tk=' + TIANDITU_GIS_TOKEN,