优化天地图矢量瓦片切换

YANGDL

2021-01-09 da21171cc9b248ad9c7f062e41f039eceb910c23

 src/components/helpers/BasemapHelper.js

@@ -1,16 +1,17 @@
/* eslint-disable no-debugger */
import AjaxUtils from '@/utils/AjaxUtils'

/**
 * 底图管理助手，负责底图创建及开关
 */
class BasemapHelper{
    constructor(options) {
        this.map = options.map
        this.L = options.L
        this.basemapList = []
        this.basemapMap = new Map()
        this.basemapLayerGroup = options.L.layerGroup().addTo(options.map)
    }
class BasemapHelper {
  constructor (options) {
    this.map = options.map
    this.L = options.L
    this.basemapList = []
    this.basemapMap = new Map()
    this.basemapLayerGroup = options.L.layerGroup().addTo(options.map)
  }

    /**
     * 该方法负责各种底图加载到地图上
@@ -18,13 +19,13 @@
     * @param defBasemapName 初始化完成后，默认显示的图层
     */
    initBasemap = (mapConfig, isIntranet) => {
        if(isIntranet) {
            this._getToken(mapConfig); // 获取token，并按配置加载地图
        }else {
            this._createBasemapByConfig(mapConfig)
        }
      if (isIntranet) { // 内网
        this._getToken(mapConfig) // 获取token后，并按配置加载地图
      } else { // 外网
        this._createBasemapByConfig(mapConfig)
      }

        return this.basemapMap
      return this.basemapMap
    }

    /**
@@ -32,7 +33,7 @@
     * @returns {null} 结构：[{名称, 图层引用}]
     */
    getBasemapList = () => {
        return this.basemapList
      return this.basemapList
    }

    /**
@@ -41,93 +42,92 @@
     * @param code 名称
     */
    getBasemap = (map, code) => {
        return this.basemapMap.get(code)
      return this.basemapMap.get(code)
    }

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

    /**
     * 隐藏某个图层
     * @param map 地图对象
     * @param layer 待关闭图层引用
     */
    hideBasemap = (map, code) => {
        let basemap = this.basemapMap.get(code)
        map.removeLayer(basemap.layer)
        map.removeLayer(basemap.annotation)
    hideBasemap = (code) => {
      const basemap = this.basemapMap.get(code)
      this.map.removeLayer(basemap.layer)
      this.map.removeLayer(basemap.annotation)
    }

    // 公网创建地图部分
    _createBasemapByConfig(mapConfig){
        console.log(mapConfig)
        let internetBasemaps = mapConfig.mapConfig.InternetBaseMaps
        for(let i = 0, len = internetBasemaps.length; i < len; ++i) {
            let basemapConfig = internetBasemaps[i]
            let basemapLayer = this.L.tileLayer(basemapConfig.map.url, basemapConfig.map.options)
            let basemapAnnotationLayer = this.L.tileLayer(basemapConfig.annotation.url, basemapConfig.annotation.options)
    _createBasemapByConfig (mapConfig) {
      const internetBasemaps = mapConfig.mapConfig.InternetBaseMaps
      for (let i = 0, len = internetBasemaps.length; i < len; ++i) {
        const basemapConfig = internetBasemaps[i]
        const basemapLayer = this.L.tileLayer(basemapConfig.map.url, basemapConfig.map.option)
        const basemapAnnotationLayer = this.L.tileLayer(basemapConfig.annotation.url, basemapConfig.annotation.option)

            let basemap = {
                code: basemapConfig.code,
                name: basemapConfig.name,
                layer: basemapLayer,
                annotation: basemapAnnotationLayer
            }
         
            this.basemapList.push(basemap);
            this.basemapMap.set(basemapConfig.code, basemap)
            if(typeof basemapConfig.isAddToMap !== 'undefined' && basemapConfig.isAddToMap) {
                this.basemapLayerGroup.addLayer(basemapLayer)
                this.basemapLayerGroup.addLayer(basemapAnnotationLayer)
            }
        const basemap = {
          code: basemapConfig.code,
          name: basemapConfig.name,
          conf: basemapConfig,
          layer: basemapLayer,
          annotation: basemapAnnotationLayer
        }

        this.basemapList.push(basemap)
        this.basemapMap.set(basemapConfig.code, basemap)
        if (typeof basemapConfig.isAddToMap !== 'undefined' && basemapConfig.isAddToMap) {
          this.basemapLayerGroup.addLayer(basemapLayer)
          this.basemapLayerGroup.addLayer(basemapAnnotationLayer)
        }
      }
    }

    // 内网地图创建部分
    // 获取内网地图token，并加载到地图中
    _getToken = (mapConfig) => {
        let params = mapConfig.TokenConfig
        AjaxUtils.GetDataAsynByUrl(params.url, params.option, (token) => {
            this._showTDT(token, mapConfig)
        })
      const params = mapConfig.TokenConfig
      AjaxUtils.GetDataAsynByUrl(params.url, params.option, (token) => {
        this._showTDT(token, mapConfig)
      })
    }

    // 内网地图加载，并加载到地图
    _showTDT = (token, mapConfig) => {
        let intranetBasemaps = mapConfig.mapConfig.IntranetBaseMaps
        for(let i = 0, len = intranetBasemaps.length; i < len; ++i) {
            let basemapConfig = intranetBasemaps[i]
            let basemapLayer = this.L.tileLayer(basemapConfig.map.url, basemapConfig.map.options)
            let basemapAnnotationLayer = this.L.tileLayer(basemapConfig.annotation.url, basemapConfig.annotation.options)
      const intranetBasemaps = mapConfig.mapConfig.IntranetBaseMaps
      for (let i = 0, len = intranetBasemaps.length; i < len; ++i) {
        const basemapConfig = intranetBasemaps[i]
        const basemapLayer = this.L.tileLayer(basemapConfig.map.url, basemapConfig.map.option)
        const basemapAnnotationLayer = this.L.tileLayer(basemapConfig.annotation.url, basemapConfig.annotation.option)

            let basemap = {
                code: basemapConfig.code,
                name: basemapConfig.name,
                layer: basemapLayer,
                annotation: basemapAnnotationLayer
            }
         
            this.basemapList.push(basemap);
            this.basemapMap.set(basemapConfig.code, basemap)
            if(typeof basemapConfig.isAddToMap !== 'undefined' && basemapConfig.isAddToMap) {
                this.basemapLayerGroup.addLayer(basemapLayer)
                this.basemapLayerGroup.addLayer(basemapAnnotationLayer)
            }
        const basemap = {
          code: basemapConfig.code,
          name: basemapConfig.name,
          conf: basemapConfig,
          layer: basemapLayer,
          annotation: basemapAnnotationLayer
        }

        this.basemapList.push(basemap)
        this.basemapMap.set(basemapConfig.code, basemap)
        if (typeof basemapConfig.isAddToMap !== 'undefined' && basemapConfig.isAddToMap) {
          this.basemapLayerGroup.addLayer(basemapLayer)
          this.basemapLayerGroup.addLayer(basemapAnnotationLayer)
        }
      }
    }
}