basemap图层控制ui

wangrui

2020-12-23 1ba44459ed390fbcb4b05dea06923e4df99d3acc

basemap图层控制ui

 package.json

@@ -16,7 +16,7 @@
    "element-ui": "^2.14.1",
    "jquery": "^3.5.1",
    "js-cookie": "^2.2.0",
    "leaflet": "^1.7.1",
    "leaflet": "^1.6.0",
    "leaflet-canvas-marker": "^0.2.0",
    "leaflet.markercluster": "^1.4.1",
    "lodash": "^4.17.10",

 src/Sgis.js

@@ -49,6 +49,7 @@
const initBasemapsHelper = (map, L) => {
    // todo 这里进行底图地图的初始化
    var basemapHelper = new BasemapHelper({map, L})
    console.log(basemapHelper)
    return basemapHelper
}
/**

 src/base/BaseVectorLayer.js

File was renamed from src/base/BaseLayer.js
@@ -3,7 +3,7 @@
/**
 * 基础图层类， 包含图层的创建，加载和清除等基础功能。
 */
class BaseLayer {
class BaseVectorLayer {
    LOAD_TYPE_JSON = 'json' // GeoJson加载方法
    LOAD_TYPE_URL = 'url' // ajax加载方法
    /**
@@ -28,7 +28,7 @@

        this.layerCode = options.code || '' // 图层编码
        this.layerName = options.name || '' // 图层名称
        this.layerLoadType = options.loadType || BaseLayer.LOAD_TYPE_JSON // 图层加载类型
        this.layerLoadType = options.loadType || BaseVectorLayer.LOAD_TYPE_JSON // 图层加载类型
        this.layerUrl = options.url || '' // 数据请求地址
        this.layerData = options.data || '' // 原始GeoJson数据

@@ -61,10 +61,10 @@
        let features = [] 

        // 依据加载方式加载数据
        if(this.layerLoadType === BaseLayer.LOAD_TYPE_JSON) {
        if(this.layerLoadType === BaseVectorLayer.LOAD_TYPE_JSON) {
            this.features = this._loadFromJSON()
            
        }else if(this.layerLoadType === BaseLayer.LOAD_TYPE_URL) {
        }else if(this.layerLoadType === BaseVectorLayer.LOAD_TYPE_URL) {
            this.features = this._loadFromURL()
        }else {
            console.log('图层【'+this.layerCode+'_'+this.layerName+'】的'+this.loadType+'加载方式暂不支持！')
@@ -133,4 +133,4 @@
    }
}

export default BaseLayer
export default BaseVectorLayer

 src/components/LayerController/LayerController.vue

@@ -16,8 +16,7 @@
    </div>
    <div class="bodyBox" id="panelContent">
      <div id="panelInnerContent" style="height: auto; overflow: hidden;">
        fdsafdsaf
          
        <slot>图层数据暂未加载......</slot>
      </div>
    </div>
  </div>

 src/components/LayerController/modules/LcBaseMap.vue

New file
@@ -0,0 +1,40 @@
<template>
<div class="inner-panel">
    <div v-for="item in basemapList" :key="item.code" class="basemap-layer-item">
        <img src="" width="40" height="40" :title="item.name"/>
        <input type="checkbox" title="显示标注" />
    </div>
</div>
</template>

<script>
export default {
  name: 'LcBaseMap',
  components: {},
  porps:['helper'],
  data() {
    return {
        basemapList:[]
    }
  },
  mounted(){
    console.log('03步骤：', this.helper)
  },
  methods:{

  }
}
</script>

<style scoped lang="less">
.inner-panel{
    display: flex;
    justify-content: center;
    align-items: center;
}
.basemap-layer-item{
    width: 40px;
    height: 40px;
    margin: 10px;
}
</style>

 src/components/helpers/BasemapHelper.js

@@ -78,12 +78,13 @@
        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)
            let basemapLayer = this.L.tileLayer(basemapConfig.map.url, basemapConfig.map.option)
            let basemapAnnotationLayer = this.L.tileLayer(basemapConfig.annotation.url, basemapConfig.annotation.option)

            let basemap = {
                code: basemapConfig.code,
                name: basemapConfig.name,
                conf: basemapConfig,
                layer: basemapLayer,
                annotation: basemapAnnotationLayer
            }
@@ -111,12 +112,13 @@
        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)
            let basemapLayer = this.L.tileLayer(basemapConfig.map.url, basemapConfig.map.option)
            let basemapAnnotationLayer = this.L.tileLayer(basemapConfig.annotation.url, basemapConfig.annotation.option)

            let basemap = {
                code: basemapConfig.code,
                name: basemapConfig.name,
                conf: basemapConfig,
                layer: basemapLayer,
                annotation: basemapAnnotationLayer
            }

 src/components/helpers/ServiceLayerHelper.js

@@ -22,32 +22,38 @@
        this._loadLayers(mapConfig)
    }

    /**
     * 按配置文件加载三种不同类型的
     * @param {*} mapConfig 
     * @param {*} isAddToMap 
     */
    _loadLayers(mapConfig, isAddToMap = true){
        console.debug('ServiceLayerHelper加载参数：',mapConfig)
        this.loadTileLayer(mapConfig, isAddToMap)
        this.loadWmtsLayer(mapConfig, isAddToMap)
        this.loadWmtsLayer(mapConfig, isAddToMap)
        for(let i = 0, len = mapConfig.mapConfig.ServiceLayers.length; i < len; ++i) {
            let opt = mapConfig.mapConfig.ServiceLayers[i]
            if(opt.type === 'wmts') {
                this.loadWmtsLayer(opt, isAddToMap)
            }else if(opt.type === 'wms') {
                this.loadWmsLayer(opt, isAddToMap)
            }else if(opt.type === 'tile') {
                this.loadTileLayer(opt, isAddToMap)
            }
        }
    }

    /**
     * 往地图中加入一个tile服务
     * 往地图中加入一个WMTS服务
     * @param {}} options 
     * @param {*} isAddToMap 
     */
    loadWmtsLayer(options, isAddToMap = true) {
        for(let i = 0, len = options.mapConfig.ServiceLayers.length; i < len; ++i) {
            let opt = options.mapConfig.ServiceLayers[i]
            if(opt.type !== 'wmts') {
                continue
            }
            const layer = this.L.tileLayer(opt.url, opt.option);
       
            if(isAddToMap) {
                layer.addTo(this.map)
            }
            this.tileLayersMap.set(opt.code, layer)
            this.tileLayersArray.push(layer)
        const layer = this.L.tileLayer(options.url, options.option);
    
        if(isAddToMap) {
            layer.addTo(this.map)
        }
        this.tileLayersMap.set(options.code, layer)
        this.tileLayersArray.push(layer)
    }
    /**
     * 往地图中加入一个WMS服务
@@ -55,62 +61,57 @@
     * @param {*} isAddToMap 
     */
    loadWmsLayer(options, isAddToMap = true) {
        for(let i = 0, len = options.mapConfig.ServiceLayers.length; i < len; ++i) {
            let opt = options.mapConfig.ServiceLayers[i]
            if(opt.type !== 'wms') {
                continue
            }

            const layer =this.L.tileLayer.wms(opt.url, opt.option);
       
            if(isAddToMap) {
                layer.addTo(this.map)
            }
            this.tileLayersMap.set(opt.code, layer)
            this.tileLayersArray.push(layer)
        const layer =this.L.tileLayer.wms(options.url, options.option);
    
        if(isAddToMap) {
            layer.addTo(this.map)
        }
        
        this.tileLayersMap.set(options.code, layer)
        this.tileLayersArray.push(layer)
    }

    /**
     * 往地图中加入一个WMS服务
     * 往地图中加入一个TILE服务
     * @param {}} options 
     * @param {*} isAddToMap 
     */
    loadTileLayer(options, isAddToMap = true) {
        for(let i = 0, len = options.mapConfig.ServiceLayers.length; i < len; ++i) {
            let opt = options.mapConfig.ServiceLayers[i]
            if(opt.type !== 'tile') {
                continue
            }

            const layer =this.L.tileLayer(opt.url, {
                layers: opt.layers || 'all',//country
                format: opt.format || "image/png",
                transparent: opt.true || true,
                crs:opt.crs || L.CRS.EPSG4326,
                maxZoom: opt.maxZoom || 21,
                minZoom: opt.minZoom || 1,
                zoomOffset: opt.zoomOffset || 0
            });
       
            if(isAddToMap) {
                layer.addTo(this.map)
            }
            this.tileLayersMap.set(opt.code , layer)
            this.tileLayersArray.push(layer)
        const layer =this.L.tileLayer(options.url, {
            layers: options.layers || 'all',//country
            format: options.format || "image/png",
            transparent: options.true || true,
            crs: options.crs || L.CRS.EPSG4326,
            maxZoom: options.maxZoom || 21,
            minZoom: options.minZoom || 1,
            zoomOffset: options.zoomOffset || 0
        });
    
        if(isAddToMap) {
            layer.addTo(this.map)
        }
        this.tileLayersMap.set(options.code , layer)
        this.tileLayersArray.push(layer)
    }
    /**
     * 隐藏服务图层
     * @param {*} name 
     */
    hideTileLayer(name){
    hideTileLayer(code){
        if(this.tileLayersMap){
            let tileLayer = this.tileLayersMap.get(name)
            let tileLayer = this.tileLayersMap.get(code)
            this.map.removeLayer(tileLayer)
        }
    }
    /**
     * 展示服务图层
     * @param {*} name 
     */
    showTileLayer(code){
        if(this.tileLayersMap){
            let tileLayer = this.tileLayersMap.get(code)
            this.map.addLayer(tileLayer)
        }
    }

    /**
     * 获取所有的服务图层

 src/components/helpers/VectorLayerHelper.js

@@ -4,32 +4,18 @@
function VectorLayerHelper(options) {
    this.map = options.map
    this.L = options.L
    this.vectorLayerMap = {}
    this.vectorLayerMap = new Map()
    this.vectorLayerList = []
    this.vueRefMap = {}
    this.functionMap = {}
    this.vectorLayerGroup = null
    this.vueState = {} // 用户图层权限
    /**
     * 该方法负责各种底图加载到地图上
     * 不同页面加载图层不同根据模块类型选择加载不同图层
     * @param map
     * @param methodNames 需要加载的方法名称
     */
    this.initVectorLayers = (methodNames) => {
        // todo 创建完以后，把图层都放到vectorLayerMap对象保存起来，方便其他接口调用
        // todo 在mapmodules文件夹定义相关图层的实现代码。
        this.loadFunction(methodNames)
        // todo 企业图层都可以后面加入，然后统一由Helper程序来管理图层的开关。
        return null
    }
    // 按需加载对应方法创建图层
    this.loadFunction = (methodNames) => {
        console.log(methodNames)
    }

    

    this.setVueRef = (vueName, ref) => {
       this.vueRefMap[vueName] = ref
    this.initVectorLayers = (vueState) => {
        this.vectorLayerGroup = options.L.layerGroup().addTo(options.map)
        this.vueState = vueState
    }

    /**
@@ -44,24 +30,26 @@
     * 通过名称获取图层对象
     * @param name 名称
     */
    this.getVectorLayer = (name) => {
        return this.vectorLayerMap[name]
    this.getVectorLayer = (code) => {
        return this.vectorLayerMap[code]
    }

    /**
     * 显示某个图层
     * @param name  图层名称
     */
    this.showVectorLayer = (name, vuexStat) => {
        console.log(this.map, vuexStat)
    this.showVectorLayer = (code) => {
        let layer = this.vectorLayerMap.get(code)
        this.map.addLayer(layer)
    }

    /**
     * 隐藏某个图层
     * @param name  图层名称
     */
    this.hideVectorLayer = (name, vuexStat) => {
        console.log(this.map, vuexStat)
    this.hideVectorLayer = (code) => {
        let layer = this.vectorLayerMap.get(code)
        this.map.removeLayer(layer)
    }
}


 src/conf/MapConfig.js

@@ -36,6 +36,8 @@
        {
            code: 'sinopec_img',
            name: '中石化天地图影像',
            icon_actived: '',
            icon_deactived: '',
            isAddToMap: true,
            map: {
                layerName: '天地图影像地图',
@@ -69,6 +71,8 @@
        {
            code: 'sinopec_vec',
            name: '中石化天地图矢量',
            icon_actived: '',
            icon_deactived: '',
            isAddToMap: false,
            map: {
                layerName: '天地图矢量地图',
@@ -104,6 +108,8 @@
        {
            code: 'tianditu_img',
            name: '天地图影像',
            icon_actived: '',
            icon_deactived: '',
            isAddToMap: true,
            map: {
                layerName: '天地图影像地图',
@@ -139,6 +145,8 @@
        {
            code: 'tianditu_vec',
            name: '天地图影像',
            icon_actived: '',
            icon_deactived: '',
            isAddToMap: false,
            map: {
                layerName: '天地图矢量地图',
@@ -187,6 +195,8 @@
        {
            code:'guojie',
            name:'国界',
            icon_actived: '',
            icon_deactived: '',
            type:'wmts',
            url: APP_GIS_HOST + '/server/ogcserver/whp_guojie/wmts?x={x}&y={y}&z={z}',
            option:{

 src/store/index.js

@@ -1,3 +1,4 @@
/* eslint-disable no-debugger */
import Vue from 'vue'
import Vuex from 'vuex'
import app from './app'
@@ -10,7 +11,9 @@
    currentCorpType: null,
    L: null,
    map: null, // 实例化的map
    layerHelper: {}, // 图层控制器实现助手程序
    basemapHelper: {}, // 影像地图图层控制器实现助手程序
    serviceLayerHelper: {}, // 服务图层控制器实现助手程序
    vectoryLayerHelper: {}, // 动态图层控制器实现助手程序
    layerControllerVisible: { // 图层控制面板的显示状态››
        layerController: true, // 爸爸栏目：是否显示图层控制面板
    }
@@ -20,8 +23,14 @@
        state.L = mObject.L
        state.map = mObject.map
    },
    setLayerHelper(state, layerHelper) {
        state.layerHelper = layerHelper
    setBasemapHelper(state, layerHelper) {
      state.basemapHelper = layerHelper
    },
    setServiceLayerHelper(state, layerHelper) {
      state.serviceLayerHelper = layerHelper
    },
    setVectorLayerHelper(state, layerHelper) {
        state.vectoryLayerHelper = layerHelper
    },
    updateLayerControllerVisible(state, preset) {
        state.layerControllerVisible = preset

 src/views/MapTemplate.vue

@@ -1,7 +1,11 @@
<template>
  <div class="full-screen">
        <div id="map" ref="rootmap"></div>
        <sgis-layer-controller :preset="'warningPreset'"></sgis-layer-controller>
        <sgis-layer-controller :preset="'warningPreset'">
          <template v-slot:default>
            <lc-basemap></lc-basemap>
          </template>
        </sgis-layer-controller>
        <monitor-panel></monitor-panel>
  </div>
</template>
@@ -11,16 +15,21 @@
import Sgis from '@src/Sgis'
import mapConfig from '@/conf/MapConfig'
import SgisLayerController from '@components/LayerController/LayerController'
import LcBasemap from '@components/LayerController/modules/LcBaseMap'
import MonitorPanel from '@components/panel/MonitorPanel'
import { mapMutations, mapState } from 'vuex'
import { mapMutations } from 'vuex'

export default {
  name: 'MapTemplate',
  components: {SgisLayerController, MonitorPanel},
  datas:{
      ...mapState("/",{})
  components: {SgisLayerController, MonitorPanel, LcBasemap},
  data(){
    return {
      basemapHelper: {},
      serviceLayerHelper: {},
      vectorLayerHelper: {}
    }
  },
  mounted(){
  beforeMount(){
      this.$nextTick(() => {
          this.init()
      })
@@ -28,15 +37,17 @@
  methods:{
      ...mapMutations({
        setMapObj: 'setMapObj',
        setLayerHelper: 'setLayerHelper'
        setBasemapHelper: 'setBasemapHelper',
        setServiceLayerHelper: 'setServiceLayerHelper',
        setVectorLayerHelper: 'setVectorLayerHelper',
      }),
      init() {
        const mapcontainer = this.$refs.rootmap
        this.mapObj = Sgis.initMap(mapcontainer)
        console.log('01步骤：', this.mapObj)

        this.basemapHelper = Sgis.initBasemapsHelper(this.mapObj.map, this.mapObj.L) // 初始化基础底图助手
        this.basemapHelper.initBasemap(mapConfig, false) // 第二个参数，表示是否内网底图


        this.serviceLayerHelper = Sgis.initTileLayersHelper(this.mapObj.map, this.mapObj.L) // 初始化业务底图助手
        this.serviceLayerHelper.initServiceLayers(mapConfig)
@@ -44,7 +55,10 @@
        this.vectorLayerHelper = Sgis.initVectorLayersHelper(this.mapObj.map, this.mapObj.L) // 初始化动态要素图层助手
        this.vectorLayerHelper.initVectorLayers(mapConfig)

        this.setLayerHelper(this.vectorLayerHelper)
        console.log('02步骤：', this.basemapHelper)
        this.setBasemapHelper(this.basemapHelper)
        this.setServiceLayerHelper(this.serviceLayerHelper)
        this.setVectorLayerHelper(this.vectorLayerHelper)
        return this.map
      }
  }