重构地图加载的逻辑

wangrui

2020-12-19 02d584c8d0f31b56f24e367681aa034cd2acf0e9

重构地图加载的逻辑

 src/Sgis.js

@@ -1,112 +1,75 @@
import * as L from 'leaflet'
import BasemapHelper from '@components/helpers/BasemapHelper'
import VectorLayerHelper from '@components/helpers/VectorLayerHelper'
import ServiceLayerHelper from '@components/helpers/ServiceLayerHelper'

// import Editable from '@components/plugin/Editable'
// import PathDrag from '@components/plugin/PathDrag'
// import CanvasIcon from '@components/plugin/CanvasMarkers'
// import MagicMarker from '@components/plugin/MagicMarker'
import Editable from '@components/plugin/Editable'
import PathDrag from '@components/plugin/PathDrag'
import CanvasIcon from '@components/plugin/CanvasMarkers'
import MagicMarker from '@components/plugin/MagicMarker'
import 'leaflet.markercluster'

import MapConfig from '@/conf/MapConfig'
import CommonLayerLoad from '@components/mapmodules/CommonLayerLoad'
// import DashFlow from '@components/plugin/PathDashFlow'
// import AjaxUtils from '@/utils/AjaxUtils'
import DashFlow from '@components/plugin/PathDashFlow'
let map = null
// let baseMapGroup = null
let commonLayerLoad = null
const initMap = (div) => {
    if (map != null) {
        map.remove()
        // baseMapGroup = null
        commonLayerLoad = null
    }

    // Leaflet扩展代码
    // Editable.init(L) // 图层编辑
    // PathDrag.init(L) // 路径拖拽
    // MagicMarker.init(L) // 动画Marker
    // CanvasIcon.init(L) // 使用canvas绘制Marker

    Editable.init(L) // 图层编辑
    PathDrag.init(L) // 路径拖拽
    MagicMarker.init(L) // 动画Marker
    CanvasIcon.init(L) // 使用canvas绘制Marker
    // CustomPopup.init(L) // 自定义弹出框
    // DashFlow.DashFlow(L) // 流动线图
    DashFlow.DashFlow(L) // 流动线图
    // Leaflet扩展代码

    map = L.map(div, MapConfig.mapOptions)

    
    // getToken()
    // L.control.scale({ maxWidth: 200, metric: true, imperial: false }).addTo(map)
    // L.control.layers(SgisConfig.baseLayers, SgisConfig.overlayLayers, { position: 'bottomright' }).addTo(map)

    window.map = map
    window.L = L

    // showLngLat()
    return { map: map, L: L }
}

// let getToken = () => {
//     let params = MapConfig.TokenConfig
//     AjaxUtils.GetDataAsynByUrl(params.url, params.option, function(token) {
//         showTdt(token)
//     })
// }
// let showTdt = (token) => {
//     const imgMapm = commonLayerLoad.loadIntranetImgMap(token)
//     const imgMapa = commonLayerLoad.loadIntranetImgMapCia(token)
//     baseMapGroup.addLayer(imgMapm)
//     baseMapGroup.addLayer(imgMapa)
// }

/**
 * 瓦片底图初始化
 * 基础底图初始化
 * @param map
 * @param L
 */
const initBasemaps = (map, L) => {
const initBasemapsHelper = (map, L) => {
    // todo 这里进行底图地图的初始化
    var basemapHelper = new BasemapHelper(map, L)
    var basemapHelper = new BasemapHelper({map, L})
    return basemapHelper
}

const initTileLayers = (map, L) => {
    // DashFlow.DashFlow(L, map)
    commonLayerLoad = new CommonLayerLoad()
    // const blueMap = commonLayerLoad.loadBlueMap()
    // baseMapGroup = L.layerGroup([blueMap]).addTo(map)

    const imgMapm = commonLayerLoad.loadImgMapm()
    const imgMapa = commonLayerLoad.loadImgMapa()
    
    L.layerGroup([imgMapm, imgMapa]).addTo(map)
/**
 * 业务底图初始化
 * @param map
 * @param L
 */
const initTileLayersHelper = (map, L) => {
    let serviceLayerHelper = new ServiceLayerHelper({map, L})
    return serviceLayerHelper
}

/**
 * 矢量地图初始化
 * @param map
 */
/**
 *
 * @param map
 * @param L
 * @param obj { name: 'trackPlayer', ref: this.$refs.trackPlayer }  组件的名称 和 组件的引用
 * @param loadMethodNames
 */
const initVectorLayers = (map, L, obj, env) => {
const initVectorLayersHelper = (map, L) => {
    // todo 这里进行地图的初始化
    var vectorLayerHelper = new VectorLayerHelper(map, L, env)
    if (obj != null) {
        vectorLayerHelper.setVueRef(obj.name, obj.ref)
    }
    // let loadMethodNames = ['dock', 'petro', 'fillingStation', 'storeHouse', 'productOil', 'transDisplay', 'ship', 'train', 'warningCar', 'trackQuery', 'weather']
    vectorLayerHelper.initVectorLayers()
    var vectorLayerHelper = new VectorLayerHelper({map, L})
    window.vectorLayerHelper = vectorLayerHelper
    return vectorLayerHelper
}

export default {
    initMap,
    initBasemaps,
    initTileLayers,
    initVectorLayers
    initBasemapsHelper,
    initTileLayersHelper,
    initVectorLayersHelper
}

 src/components/helpers/BasemapHelper.js

@@ -1,15 +1,15 @@
/* eslint-disable no-debugger */
import AjaxUtils from '@/utils/AjaxUtils'
import CommonLayerLoad from '../mapmodules/CommonLayerLoad'
/**
 * 底图管理助手，负责底图创建及开关
 */
class BasemapHelper{
    constructor(map, L) {
        this.map = map
        this.L = L
    constructor(options) {
        this.map = options.map
        this.L = options.L
        this.basemapList = []
        this.basemapMap = new Map()
        this.basemapLayerGroup = L.layerGroup().addTo(map)
        this.basemapLayerGroup = options.L.layerGroup().addTo(options.map)
    }

    /**
@@ -18,10 +18,11 @@
     * @param defBasemapName 初始化完成后，默认显示的图层
     */
    initBasemap = (mapConfig, isIntranet) => {
        debugger
        if(isIntranet) {
            this._getToken(mapConfig);
            this._getToken(mapConfig); // 获取token，并按配置加载地图
        }else {
            //
            this._createBasemapByConfig(mapConfig)
        }

        return this.basemapMap
@@ -64,19 +65,62 @@
        console.log(map, layer)
    }

    // 公网创建地图部分
    _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)

            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)
            }
        }
    }

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

    _showTDT = (token) => {
        let commonLayerLoad = new CommonLayerLoad()
        const imgMapm = commonLayerLoad.loadIntranetImgMap(token)
        const imgMapa = commonLayerLoad.loadIntranetImgMapCia(token)
        this.basemapLayerGroup.addLayer(imgMapm)
        this.basemapLayerGroup.addLayer(imgMapa)
    // 内网地图加载，并加载到地图
    _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)

            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)
            }
        }
    }
}


 src/components/helpers/ServiceLayerHelper.js

@@ -5,11 +5,19 @@
class ServiceLayerHelper {
    constructor(options){
        this.map = options.map
        this.L = options.L
        this.tileLayersMap = new Map()
        this.tileLayersArray = []
    }

    /**
     * 根据配置文件初始化业务底图
     */
    initServiceLayers(mapConfig){
        console.log(mapConfig)
    }

    /**
     * 往地图中加入一个tile服务
     * @param {}} options 
     * @param {*} isAddToMap 

 src/components/helpers/VectorLayerHelper.js

@@ -1,14 +1,13 @@
/**
 * 业务相关矢量图管理助手，负责业务相关矢量图创建及开关
 */
function VectorLayerHelper(map, L, env) {
    this.map = map
    this.L = L
function VectorLayerHelper(options) {
    this.map = options.map
    this.L = options.L
    this.vectorLayerMap = {}
    this.vectorLayerList = []
    this.vueRefMap = {}
    this.functionMap = {}
    this.env = env
    /**
     * 该方法负责各种底图加载到地图上
     * 不同页面加载图层不同根据模块类型选择加载不同图层
@@ -54,7 +53,7 @@
     * @param name  图层名称
     */
    this.showVectorLayer = (name, vuexStat) => {
        console.log(map, vuexStat)
        console.log(this.map, vuexStat)
    }

    /**
@@ -62,7 +61,7 @@
     * @param name  图层名称
     */
    this.hideVectorLayer = (name, vuexStat) => {
        console.log(map, vuexStat)
        console.log(this.map, vuexStat)
    }
}


 src/conf/MapConfig.js

@@ -4,19 +4,12 @@
let pathname = window.document.location.pathname
let pos = curWwwPath.indexOf(pathname)
let HOST_URL = curWwwPath.substring(0, pos)
// const sconfig = {
//     // 'ip' : '10.246.151.116',
//     // 'port' : '8093',
//     'ip': '10.238.221.80',
//     'port': '8088',
//     'ifS': 'http',
//     'name': '/hcss'
// }

// const DMHttpService1 = sconfig.ifS + '://' + sconfig.ip + ':' + sconfig.port + sconfig.name + '/'
const GIS_URL = 'http://10.238.221.80:6080'
const BLUEMAP_HOST = 'http://xearth.cn:6288/'
const BLUEMAP_HOST = 'http://xearth.cn:6288/' // 公司发布的地图服务，用于测试的地址

const SINOPEC_GIS_HOST = 'http://10.246.132.249:8080'  // 内网天地图主机地址
const TIANDITU_GIS_HOST = 'http://t0.tianditu.gov.cn' // 公网天地图主机地址
const TIANDITU_GIS_TOKEN = '5d76218063082952d18b76da5005f490' // 备用tk: f1b72b5e7cb1175acddfa485f1bc9770
const mapOptions = {
    crs: L.CRS.EPSG4326,
    minZoom: 3,
@@ -31,38 +24,140 @@
const mapConfig = {
    IsLoadMapByToken: true, // 是否通过token加载地图
    showBaseMapType: 1, // 1显示天地图，2显示arcgis地图
    TDTBaseMaps: [
    IntranetBaseMaps: [
        {
            layerName: '天地图影像地图',
            type: 'wmts',
            visible: false,
            layerType: 'img_c',
            isLoadMapByToken: true,
            url: 'http://10.246.132.249:8080/OneMapServer/rest/services/base-tdt-image-globe/WMTS'
            code: 'sinopec_img',
            name: '中石化天地图影像',
            isAddToMap: true,
            map: {
                layerName: '天地图影像地图',
                type: 'wmts',
                visible: false,
                layerType: 'img_c',
                isLoadMapByToken: true,
                url: SINOPEC_GIS_HOST + '/OneMapServer/rest/services/base-tdt-image-globe/WMTS',
                option:{
                    maxZoom: 18,
                    minZoom: 1,
                    zoomOffset: 1
                }
            },
            annotation: {
                layerName: '天地图影像标注',
                type: 'wmts',
                visible: false,
                layerType: 'cia_c',
                isLoadMapByToken: true,
                url: SINOPEC_GIS_HOST + '/OneMapServer/rest/services/base-tdt-label-image/WMTS',
                option:{
                    maxZoom: 18,
                    minZoom: 1,
                    zoomOffset: 1
                }
            },
        },
        {
           layerName: '天地图影像标注',
           type: 'wmts',
           visible: false,
           layerType: 'cia_c',
           isLoadMapByToken: true,
           url: 'http://10.246.132.249:8080/OneMapServer/rest/services/base-tdt-label-image/WMTS'
            code: 'sinopec_vec',
            name: '中石化天地图矢量',
            isAddToMap: false,
            map: {
                layerName: '天地图矢量地图',
                type: 'wmts',
                visible: false,
                layerType: 'vec_c',
                isLoadMapByToken: true,
                url: SINOPEC_GIS_HOST + '/OneMapServer/rest/services/base-tdt-vector-globe/WMTS',
                option:{
                    maxZoom: 18,
                    minZoom: 1,
                    zoomOffset: 1
                }
            },
            annotation: {
                layerName: '天地图矢量标注',
                type: 'wmts',
                visible: false,
                layerType: 'cva_c',
                isLoadMapByToken: true,
                url: SINOPEC_GIS_HOST + '/OneMapServer/rest/services/base-tdt-label-vector/WMTS',
                option:{
                    maxZoom: 18,
                    minZoom: 1,
                    zoomOffset: 1
                }
            }
        }
    ],
    InternetBaseMaps: [
        {
            code: 'tianditu_img',
            name: '天地图影像',
            isAddToMap: true,
            map: {
                layerName: '天地图影像地图',
                type: 'wmts',
                visible: false,
                layerType: 'img_c',
                isLoadMapByToken: true,
                url: TIANDITU_GIS_HOST + '/img_c/wmts?layer=img&style=default&tilematrixset=c'+
                '&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}'+
                '&tk=' + TIANDITU_GIS_TOKEN,
                option:{
                    maxZoom: 18,
                    minZoom: 1,
                    zoomOffset: 1
                }
            },
            annotation: {
                layerName: '天地图影像标注',
                type: 'wmts',
                visible: false,
                layerType: 'cia_c',
                isLoadMapByToken: true,
                url: TIANDITU_GIS_HOST + '/cia_c/wmts?layer=cia&style=default&tilematrixset=c'+
                '&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}'+
                '&tk=' + TIANDITU_GIS_TOKEN,
                option:{
                    maxZoom: 18,
                    minZoom: 1,
                    zoomOffset: 1
                }
            },
        },
        {
           layerName: '天地图矢量地图',
           type: 'wmts',
           visible: false,
           layerType: 'vec_c',
           isLoadMapByToken: true,
           url: 'http://10.246.132.249:8080/OneMapServer/rest/services/base-tdt-vector-globe/WMTS'
        },
        {
           layerName: '天地图矢量标注',
           type: 'wmts',
           visible: false,
           layerType: 'cva_c',
           isLoadMapByToken: true,
           url: 'http://10.246.132.249:8080/OneMapServer/rest/services/base-tdt-label-vector/WMTS'
            code: 'tianditu_vec',
            name: '天地图影像',
            isAddToMap: false,
            map: {
                layerName: '天地图矢量地图',
                type: 'wmts',
                visible: false,
                layerType: 'vec_c',
                isLoadMapByToken: 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,
                option:{
                    maxZoom: 18,
                    minZoom: 1,
                    zoomOffset: 1
                }
            },
            annotation: {
                layerName: '天地图矢量标注',
                type: 'wmts',
                visible: false,
                layerType: 'cva_c',
                isLoadMapByToken: true,
                url: TIANDITU_GIS_HOST + '/cva_c/wmts?layer=cva&style=default&tilematrixset=c'+
                '&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}'+
                '&tk=' + TIANDITU_GIS_TOKEN,
                option:{
                    maxZoom: 18,
                    minZoom: 1,
                    zoomOffset: 1
                }
            }
        }
    ],
    ArcBaseMaps: [
@@ -72,14 +167,16 @@
            visible: true,
            layerType: 'cia_c',
            isLoadMapByToken: false,
            url: 'http://10.246.132.249:8080/OneMapServer/rest/services/base-map-image-globe/MapServer'
        }],
    GeometryServer: GIS_URL + '/arcgis/rest/services/Utilities/Geometry/GeometryServer',
    FenceUrl: GIS_URL + '/arcgis/rest/services/fence',
            url: SINOPEC_GIS_HOST + '/OneMapServer/rest/services/base-map-image-globe/MapServer'
        }
    ]
}

/**
 * 内网GIS，获取token参数
 */
const TokenConfig = {
    url: 'http://10.246.132.249:8080/RemoteTokenServer', // 获取token的服务接口
    url: SINOPEC_GIS_HOST + '/RemoteTokenServer', // 获取token的服务接口
    option: {
        request: 'getToken',
        username: 'sipms', // 获取token的用户名

 src/views/MapTemplate.vue

@@ -9,6 +9,7 @@
<script>
import 'leaflet/dist/leaflet.css'
import Sgis from '@src/Sgis'
import mapConfig from '@/conf/MapConfig'
import SgisLayerController from '@components/LayerController/LayerController'
import MonitorPanel from '@components/panel/MonitorPanel'
import { mapMutations, mapState } from 'vuex'
@@ -32,9 +33,17 @@
      init() {
        const mapcontainer = this.$refs.rootmap
        this.mapObj = Sgis.initMap(mapcontainer)
        this.basemapHelper = Sgis.initBasemaps(this.mapObj.map, this.mapObj.L) // 初始化底图
        this.serviceLayerHelper = Sgis.initTileLayers(this.mapObj.map, this.mapObj.L) // 初始化底图
        this.vectorLayerHelper = Sgis.initVectorLayers(this.mapObj.map, this.mapObj.L, {}) // 初始化业务图层

        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()

        this.vectorLayerHelper = Sgis.initVectorLayersHelper(this.mapObj.map, this.mapObj.L) // 初始化动态要素图层助手
        this.vectorLayerHelper.initVectorLayers()

        this.setLayerHelper(this.vectorLayerHelper)
        return this.map
      }