重构基础图层加载的代码

wangrui

2020-12-19 44280203af25006efc4b8939b4fc01477041e9b8

重构基础图层加载的代码

 src/Sgis.js

@@ -22,32 +22,23 @@
        commonLayerLoad = null
    }

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

    // CustomPopup.init(L)
    // DashFlow.DashFlow(L)
    // CustomPopup.init(L) // 自定义弹出框
    // DashFlow.DashFlow(L) // 流动线图
    // Leaflet扩展代码

    map = L.map(div, MapConfig.mapOptions)
    // 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)
    
    // getToken()
    // L.control.scale({ maxWidth: 200, metric: true, imperial: false }).addTo(map)
    // L.control.layers(SgisConfig.baseLayers, SgisConfig.overlayLayers, { position: 'bottomright' }).addTo(map)
    // 加载国界和铁路
    const nationalBoundaries = commonLayerLoad.loadGuoJie()
    const railWay = commonLayerLoad.loadRailWay()
    nationalBoundaries.addTo(map)
    railWay.addTo(map)

    window.map = map
    window.L = L

@@ -67,6 +58,7 @@
//     baseMapGroup.addLayer(imgMapm)
//     baseMapGroup.addLayer(imgMapa)
// }

/**
 * 瓦片底图初始化
 * @param map
@@ -75,6 +67,18 @@
    // todo 这里进行底图地图的初始化
    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)
}

/**
@@ -88,7 +92,7 @@
 * @param obj { name: 'trackPlayer', ref: this.$refs.trackPlayer }  组件的名称 和 组件的引用
 * @param loadMethodNames
 */
const initLayers = (map, L, obj, env) => {
const initVectorLayers = (map, L, obj, env) => {
    // todo 这里进行地图的初始化
    var vectorLayerHelper = new VectorLayerHelper(map, L, env)
    if (obj != null) {
@@ -103,5 +107,6 @@
export default {
    initMap,
    initBasemaps,
    initLayers
    initTileLayers,
    initVectorLayers
}

 src/api/app.js

File was deleted

 src/api/host.js

File was deleted

 src/api/index.js

@@ -1,4 +1,7 @@
import * as map from './map'
import * as app from './app'
import * as mapApi from './mapApi'
import * as mapUrl from './mapUrl'

export default Object.assign({}, map, app)
export default {
    mapApi,
    mapUrl
}

 src/api/map.js

File was deleted

 src/api/mapApi.js

@@ -1,125 +1,14 @@
import $http from '@utils/axios'
import * as Service from './services'
// import $http from '@utils/axios'
// import * as Service from './services'
// const $HOST = 'http://10.238.221.113'
// 测试环境IP：http://10.238.221.113
export default {

    /** **************** 一、行驶路径管理接口：*****************/
    // 1、 分页查询行驶路径数据
    getTravelPath(data) {
        return $http.get(Service.HcstmsClientHwsTravelPathPager, data)
    },
    // 2.根据ID查询行驶路径数据 hwsTravelPathId
    getTravelPathByID(id) {
        return $http.get(Service.HcstmsClientHwsTravelPathId + id, {})
        // return $http.get($HOST + '/hcstms/client/hws-travel-path/id/', data)
    },
    // 3. 获取车辆和船舶信息数据 transType  carriersName
    getTravelPathTransInfo(data) {
        return $http.get(Service.HcstmsClientHwsTravelPathGetTransInfo, data)
    },
    // 4. 分页获取关联车辆信息数据 current=1&size=10&hwsTravelPathId=21
    getTravelPathFindVehiclePage(data) {
        return $http.get(Service.HcstmsClientHwsTravePathFindVehiclePage, data)
    },
    // 5. 分页获取关联船舶信息数据 current=1&size=10&hwsTravelPathId=18
    getTravelPathFindShipsPage(data) {
        return $http.get(Service.HcstmsClientHwsTravelPathFindShipsPage, data)
    },
    /** ******************************* 二、行驶路径提醒接口：*********************************/
    // 1.分页查询行驶路径提醒数据 current=1&size=10
    getTravelPathWarnPager(data) {
        return $http.get(Service.HcstmsClientTravelPathWarnPager, data)
    },
    // 2.添加行驶路径提醒数据 transNumber  transType  hwsTravelPathName  warnReason  enterTime
    postTravelPathItem(data) {
        return $http.post(Service.HcstmsClientTravelPathItem, data)
    },

    /* ********************************   三、组织机构接口：*********************************/
    // 1、根据板块编码查询企业列表信息接口 sector=1111& serviceType=1111
    getOrganizationCompanyList(data) {
        return $http.get(Service.GetOrganizationCompanyList, data)
    },
    /*  ******************************** 四、总部-危化品首页接口：*********************************/
    // 1、查询在途载具、当日运量、当日运单、预警数量接口 sector=111&orgCode=1111
    getStatistics(data) {
        return $http.get(Service.GetStatistics, data)
    },
    // 2、查询板块的车辆最新位置信息 ?sector=111&orgCode=1111
    getVehiclePositionReal(data) {
        return $http.get(Service.GetVehiclePositionReal, data)
    },
    // 3、查询车辆历史轨迹信息 ?vehicleNumber =111&queryDate =2020-11-20
    getVehiclePositionHistory(data) {
        return $http.get(Service.GetVehiclePositionHistory, data)
    },
    // 4、车辆接入情况统计接口
    getStatisticsVehiclePosition(data) {
        return $http.get(Service.GetStatisticsVehiclePosition, data)
    },
    // 5、报警级别统计接口 startDate endDate
    getStatisticsAlarmTrend(data) {
        return $http.get(Service.GetStatisticsAlarmTrend, data)
    },
    // 6、报警事件(大类)统计接口  startDate endDate
    getStatisticsAlarmEventType(data) {
        return $http.get(Service.GetStatisticsAlarmEventType, data)
    },
    // 7、板块报警统计接口 startDate endDate
    getStatisticsVehicleAlarm(data) {
        return $http.get(Service.GetStatisticsVehicleAlarm, data)
    },

    /* ******************************** 五、综合监控首页-危化品：******************************** */
    // 1、根据车辆状态查询车辆信息 根据车辆状态(正常、报警、离线)查询运单车辆位置信息 orgSector orgCode vehicleStatus

    getTransOrderVehiclePosition(data) { // todo 这里的接口配置没有理明白
        return $http.get(Service.vehiclePosition, data)
        // return $http.get($HOST + '/hcstms/client/trans-order/vehicle/position', data)
    },
    // 2、查询危化品在途车辆、当日运量、当日运单、预警数量接口 接口和总部-危化品首页第1个接口一样

    // 3、分页查询危化品运单信息 transNo=111&carrierName=1111&transMode=1&vehicleNo=111&orderState=1
    // transNo carrierName transMode vehicleNo orderState size current
    getTransOrderlist(data) { // todo 这里的接口配置没有理明白
        return $http.get(Service.HcstmsClientTransOrderPager, data)
        // return $http.get($HOST + '/hcstms/client/trans-order/pager', data)
    },

    getTransOrderlists(data) { // todo 这里的接口配置没有理明白
        return $http.get(Service.HcstmsClientTransOrderPagers, data)
        // return $http.get($HOST + '/hcstms/client/trans-order/pager', data)
    },

    /* ********************************   六、 安全预警报警：******************************** */
    // 1、根据报警大小类、级别查询报警信息 ?alarmCategory=1&alarmType=1&alarmlevel=3
    getVehicleAlarmList(data) {
        return $http.get(Service.HcstmsClientAlarmVehicleRealPager, data)
        // return $http.get($HOST + '/hcstms/client/vehicle/alarm/list', data)
    },
    // 2、报警数量统计接口 startDate:String  endDate:String  orgCode:String  orgSector:String
    getAlarmVehicleReal(data) {
        return $http.get(Service.HcstmsClientAlarmVehicleRealPager, data)
    },
    // 3、根据车牌号查询车辆最新轨迹信息接口 ?vehicleNumber =111
    getRealVehiclePosition(data) {
        return $http.get(Service.HcstmsClientPositionVehicleRealVehiclePosition, data)
    },
    // 4、根据车牌号查询运单(运输中)接口 ?vehicleNo=3&orderState=
    getTransOrderList(data) {
        return $http.get(Service.HcstmsClientTransorderList, data)
    },
    // 5、根据车牌号查询实时报警信息接口 ?vehicleNo=沪D86519
    getAlarmVehicleRealDetail(data) {
        return $http.get(Service.HcstmsClientAlarmVehicleRealDetail, data)
    },

    /*  ******************************** 七、危废运输首页：******************************** */
    // 1、查询在途载具、转移量、转移单数据 orgSector orgCode
    getStatisticsSgisGroupByOrgCode(data) {
        // return $http.get($HOST + '/hcstms/client/hws-statistics/sgis/groupByOrgCode', data)
        return $http.get(Service.HcstmsClientStatisticsHwsSgis, data)
    }

/**
 * 该方法配置
 */
class MapAPI{
    
}

export default new MapAPI()

 src/api/mapUrl.js

New file
@@ -0,0 +1,10 @@
/**
 * 该文件配置接口的URL地址 
 */ 
class ApiURLs{
    constructor(){
        this.APIURL_HELLOWORLD = 'http://www.baidu.com'
    }
}

export default new ApiURLs()

 src/api/services.js

File was deleted

 src/base/BaseLayer.js

New file
@@ -0,0 +1,136 @@
import L from 'leaflet'

/**
 * 基础图层类， 包含图层的创建，加载和清除等基础功能。
 */
class BaseLayer {
    LOAD_TYPE_JSON = 'json' // GeoJson加载方法
    LOAD_TYPE_URL = 'url' // ajax加载方法
    /**
     * 初始化图层
     * @param {*} options 
     * <code>
     * {
     *   map : '地图引用'
     *   params : 地图加载参数
     *   
     *   code : 图层编号
     *   name : 图层名称
     *   loadType : 图层加载类型， json或者url
     *   url : 请求数据的url地址
     *   data : 初始的GeoJson数据
     * }
     * </code>
     */
    constructor(options){
        this.map = options.map // 必填项
        this.params = options.params // 必填项，加载图层数据的参数， 子类需要，可以是{}空对象

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

        this.layerHandler = null // 图层引用

        this.features = [] // 所有被构建出来的Features
        this.featuresArray = [] // 所有被构建出来的Features保存备份，避免再次被加载。 load方法全生命周期只被调用一次

        this.featuresGroup = new Map() // 对加载的数据进行分组，便于后续控制。 但在数据初始化时，需要手动分组。否则，分组

        this._init(this.map, this.params)
    }

    /**
     * 初始化基本的图层并加载到map中
     */
    _init(map){
        this.layerHandler = L.layerGroup().addTo(map)
    }

    /**
     * 加载数据
     * @param boolean isAddToMap 是否直接将marker添加到地图中, 默认是加载
     */
    load(isAddToMap = true){
        if(this.layerHandler) { // 默认，应该只会加载一次，但是如果有的图层要定时刷新，则需要先清除原图层的数据
            this.layerHandler.clearLayers()
        }

        let features = [] 

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

        if(isAddToMap){ // 添加到地图中
            this.layerHandler.addLayer(features)
        }
    }

    _loadFromJSON(){
        console.log('该方法是抽象方法，在子类尚未实现！')
    }
    _loadFromURL(){
        console.log('该方法是抽象方法，在子类尚未实现！')
    }

    /**
     * 显示图层， 如果groups参数，则只显示group对应的图层
     * @param {} groups 数组，元素之与layerGroups键值对应。
     */
    show(groups){
        if(typeof groups !== 'undefined') { // 如果传递了groups， 则按分组的要求加载图层
            if(this.layerHandler) {
                for(let i = 0, len = groups.length; i < len; i++) {
                    let gFeaturesArray = this.featuresGroup.get(groups[i])
                    if(gFeaturesArray || gFeaturesArray.length > 0){
                        gFeaturesArray.forEach(element => {
                            this.layerHandler.removeLayer(element) // 避免被重复加载
                            this.layerHandler.addLayer(element)
                        });
                    }
                }
            }
        } else { // 否则加载全部的数据
            if(this.layerHandler) {
                this.layerHandler.clearLayers()
                for(let i = 0, len = this.featuresArray.length; i < len; ++i){
                    this.layerHandler.addLayer(this.featuresArray[i])
                }
            }
        }
    }

    /**
     * 隐藏图层， 如果groups参数，则只隐藏group对应的图层
     * @param {} groups 数组，元素之与layerGroups键值对应。 如果图层在初始加载时，没有对数据分组，该方法不会有效果。
     */
    hide(groups){
        if(typeof groups !== 'undefined') { // 如果传递了groups， 则按分组的要求加载图层
            if(this.layerHandler) {
                for(let i = 0, len = groups.length; i < len; i++) {
                    let gFeaturesArray = this.featuresGroup.get(groups[i])
                    if(gFeaturesArray || gFeaturesArray.length > 0){
                        gFeaturesArray.forEach(element => {
                            this.layerHandler.removeLayer(element)
                        });
                    }
                }
            }
        } else { // 否则卸载全部的数据
            if(this.layerHandler) {
                this.layerHandler.clearLayers()
            }
        }
    }
}

export default BaseLayer

 src/components/helpers/BasemapHelper.js

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

    /**
     * 该方法负责各种底图加载到地图上
     * @param map
     * @param defBasemapName 初始化完成后，默认显示的图层
     */
    this.initBasemap = (map, defBasemapName) => {
        console.log(map, defBasemapName)
        // todo 创建完以后，把图层都放到basemapList对象保存起来，方便其他接口调用
    initBasemap = (mapConfig, isIntranet) => {
        if(isIntranet) {
            this._getToken(mapConfig);
        }else {
            //
        }

        return null
        return this.basemapMap
    }

    /**
     * 获取所有的底图列表
     * @returns {null} 结构：[{名称, 图层引用}]
     */
    this.getBasemapList = (map) => {
    getBasemapList = (map) => {
        console.log(map)
        return null
    }
@@ -32,7 +41,7 @@
     * @param map 结构：[{名称, 图层引用}]
     * @param name 名称
     */
    this.getBasemap = (map, name) => {
    getBasemap = (map, name) => {
        console.log(map, name)
    }

@@ -42,7 +51,7 @@
     * @param layer 待显示图层引用
     * @param isHideOthers 是否先关闭其他图层，默认是true
     */
    this.showBasemap = (map, layer, isHideOthers) => {
    showBasemap = (map, layer, isHideOthers) => {
        console.log(map, layer, isHideOthers)
    }

@@ -51,9 +60,24 @@
     * @param map 地图对象
     * @param layer 待关闭图层引用
     */
    this.hideBasemap = (map, layer) => {
    hideBasemap = (map, layer) => {
        console.log(map, layer)
    }

    _getToken = (mapConfig) => {
        let params = mapConfig.TokenConfig
        AjaxUtils.GetDataAsynByUrl(params.url, params.option, (token) => {
            this._showTDT(token)
        })
    }

    _showTDT = (token) => {
        let commonLayerLoad = new CommonLayerLoad()
        const imgMapm = commonLayerLoad.loadIntranetImgMap(token)
        const imgMapa = commonLayerLoad.loadIntranetImgMapCia(token)
        this.basemapLayerGroup.addLayer(imgMapm)
        this.basemapLayerGroup.addLayer(imgMapa)
    }
}

export default BasemapHelper

 src/components/helpers/LayerHelper.js

File was deleted

 src/components/helpers/ServiceLayerHelper.js

New file
@@ -0,0 +1,85 @@
/**
 * 创建图层相关的类
 */
import L from 'leaflet'
class ServiceLayerHelper {
    constructor(options){
        this.map = options.map
        this.tileLayersMap = new Map()
        this.tileLayersArray = []
    }

    /**
     * 往地图中加入一个tile服务
     * @param {}} options 
     * @param {*} isAddToMap 
     */
    loadWmtsLayer(options, isAddToMap) {
        const layer =L.tileLayer.wmts(options.url, {
            layers: options.layers || 'all',//country
            format: options.format || "image/png",
            transparent: options.true || true,
            crs:options.crs || L.CRS.EPSG4326
        });
   
        if(isAddToMap) {
            layer.addTo(this.map)
        }
        this.tileLayersMap.put(options.name, layer)
        this.tileLayersArray.push(layer)
    }
    /**
     * 往地图中加入一个WMS服务
     * @param {}} options 
     * @param {*} isAddToMap 
     */
    loadWmsLayer(options, isAddToMap) {
        const layer =L.tileLayer.wms(options.url, {
            layers: options.layers || 'all',//country
            format: options.format || "image/png",
            transparent: options.true || true,
            crs:options.crs || L.CRS.EPSG4326
        });
   
        if(isAddToMap) {
            layer.addTo(this.map)
        }
        this.tileLayersMap.put(options.name, layer)
        this.tileLayersArray.push(layer)
    }

    /**
     * 往地图中加入一个WMS服务
     * @param {}} options 
     * @param {*} isAddToMap 
     */
    loadTileLayer(options, isAddToMap) {
        const layer =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.put(options.name, layer)
        this.tileLayersArray.push(layer)
    }

    hideTileLayer(name){
        if(this.tileLayersMap){
            let tileLayer = this.tileLayersMap.get(name)
            this.map.removeLayer(tileLayer)
        }
    }

    getTileLayers(){
        return this.tilelayersArray
    }
}
export default ServiceLayerHelper

 src/components/mapmodules/CommonLayerLoad.js

@@ -2,29 +2,30 @@
 * 加载公共的图层，例如国界，铁路，蓝色地图等图层
 */
import L from 'leaflet'

import MapConfig from '@/conf/MapConfig'
import LayerHelper from '@components/helpers/LayerHelper'
import { $HOST } from '@/api/host'
const tokenStr = 'tk=' + 'f1b72b5e7cb1175acddfa485f1bc9770' + '&'
class CommonLayerLoad {
     loadBlueMap() {
        return L.tileLayer($HOST + '/server/ogcserver/whp_basemap_tile/wmts?x={x}&y={y}&z={z}', {
    // 中国蓝色覆盖层
    loadBlueMap() {
        return L.tileLayer(MapConfig.BLUEMAP_HOST + '/server/ogcserver/whp_basemap_tile/wmts?x={x}&y={y}&z={z}', {
            maxZoom: 7,
            minZoom: 1,
            zoomOffset: 1

        })
    }
     loadNormalMap() {
    // 道路路
    loadNormalMap() {
        return L.tileLayer('http://t0.tianditu.gov.cn/vec_c/wmts?' + tokenStr +
            'layer=cva&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}', {
            maxZoom: 18,
            minZoom: 1,
            zoomOffset: 1

        })
    }
     loadNormalMapa() {
    // 道路标注
    loadNormalMapa() {
        return L.tileLayer('http://t0.tianditu.gov.cn/cva_c/wmts?' + tokenStr +
            'layer=cva&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}', {
            maxZoom: 18,
@@ -33,7 +34,8 @@

        })
    }
     loadImgMapm() {
    // 影像图
    loadImgMapm() {
        return L.tileLayer('http://t0.tianditu.gov.cn/img_c/wmts?' + tokenStr +
            'layer=img&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}', {
            maxZoom: 18,
@@ -41,7 +43,8 @@
            zoomOffset: 1
        })
    }
     loadImgMapa() {
    // 影像标注
    loadImgMapa() {
        return L.tileLayer('http://t0.tianditu.gov.cn/cia_c/wmts?' + tokenStr +
            'layer=cia&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}', {
            maxZoom: 18,
@@ -49,6 +52,7 @@
            zoomOffset: 1
        })
    }
    // 中石化内网影像图
    loadIntranetImgMap(token) {
        return L.tileLayer('http://10.246.132.249:8080/OneMapServer/rest/services/base-tdt-image-globe/WMTS?token=' + token + '&' +
            'layer=img&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}', {
@@ -57,24 +61,12 @@
            zoomOffset: 1
        })
    }

    // 中石化内网影像图标注
    loadIntranetImgMapCia(token) {
        return L.tileLayer('http://10.246.132.249:8080/OneMapServer/rest/services/base-tdt-label-image/WMTS?token=' + token + '&' +
            'layer=cia&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}', {
            maxZoom: 18,
            minZoom: 1,
            zoomOffset: 1
        })
    }
     loadGuoJie() {
        return new LayerHelper().loadTileLayer({
            url: MapConfig.mapConfig.ChinaGj,
            zoomOffset: 1
        })
    }
     loadRailWay() {
        return new LayerHelper().loadTileLayer({
            url: MapConfig.mapConfig.RailwayUrl,
            zoomOffset: 1
        })
    }

 src/conf/MODE.js

File was deleted

 src/conf/MapConfig.js

@@ -1,25 +1,33 @@
import * as L from 'leaflet'
import { $HOST } from '@/api/host'

let curWwwPath = window.document.location.href
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 DMHttpService='http://10.246.146.111/IPMSAPI/' // 测试
// var DMHttpService1='http://10.246.151.16:8094/'
const DMHttpService1 = sconfig.ifS + '://' + sconfig.ip + ':' + sconfig.port + sconfig.name + '/'
// 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 config = {
    ArcGisApiService: 'http://10.246.146.111/DigitalSand'
} */
const BLUEMAP_HOST = 'http://xearth.cn:6288/'

const mapOptions = {
    crs: L.CRS.EPSG4326,
    minZoom: 3,
    maxZoom: 18,
    center: [26, 104],
    zoom: 3,
    zoomControl: false,
    attributionControl: false,
    editable: true
}

const mapConfig = {
    IsLoadMapByToken: true, // 是否通过token加载地图
    showBaseMapType: 1, // 1显示天地图，2显示arcgis地图
@@ -66,55 +74,8 @@
            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',
    ChinaGj: $HOST + '/server/ogcserver/whp_guojie/wmts',
    RailwayUrl: $HOST + '/server/ogcserver/railway_network_tile/wmts'
}

const mapOptions = {
    crs: L.CRS.EPSG4326,
    minZoom: 3,
    maxZoom: 18,
    center: [26, 104],
    zoom: 3,
    zoomControl: false,
    attributionControl: false,
    editable: true
}

const layerNameNew = {
    TransportEnterprise: 'T_Carrier', // 运输企业
    Petrochemical: 'CHEMICAL_OIL_ENTERPRISE', // 炼化企业
    Chemical: 'CHEMICAL_ENTERPRISE', // 化工企业
    Refinery: 'OIL_REFINING_ENTERPRISE', // 炼油企业
    SalesEnterprise: 'SALES_ENTERPRISE', // 销售企业
    Dock: 'WHARF', // 码头
    StoreHouse: 'Warehouse', // 仓库
    Sales: 'CHEMICAL_SALES_OUTLETS', // 化销经营网点
    Petroleum: 'CRUDE_OIL_DEPOT', // 原油油库
    ProductOil: 'PRODUCT_OIL_DEPOT', // 成品油油库
    LNGStation: 'LNG_RECEIVING_STATION', // LNG接收站
    LNGStorage: 'LNG_TANK', // LNG储罐
    TrainStation: 'TrainStation', // 铁路自备车火车站
    Railway: 'TrainWay', // 铁路
    TransportPath: 'TRANS_PATH', // 运输路径
    TransportNode: 'TRANS_NODE_TOPOLOGY', // 运输节点拓扑
    FillingStation: 'FillingStation', // 加油站
    TransportWarning: '运输监控',
    TransportWaste: '危废监控',
    Train: 'Train',
    Truck: 'Truck',
    Ship: 'Ship',
    Warning: '综合预警',
    Track: '历史轨迹',
    Weather: '天气预警',
    WarningLayer: 'warning',
    RainFall: 'RainFall',
    WindAndTemperature: 'WindAndTemperature',
    Dust: 'Dust',
    FogWarning: 'FogWarning',
    HazeLayer: 'HazeLayer'
    GeometryServer: GIS_URL + '/arcgis/rest/services/Utilities/Geometry/GeometryServer',
    FenceUrl: GIS_URL + '/arcgis/rest/services/fence',
}

const TokenConfig = {
@@ -127,115 +88,11 @@
        clientid: 'ref.' + HOST_URL// 获取token的应用服务器地址
    }
}
const layerNames = {
    TransportEnterprise: '运输企业',
    Petrochemical: '炼化企业',
    Chemical: '化工企业',
    Refinery: '炼油企业',
    SalesEnterprise: '销售企业',
    Dock: '码头',
    StoreHouse: '仓库',
    Sales: '化销经营网点',
    Petroleum: '原油油库',
    ProductOil: '成品油油库',
    LNGStation: 'LNG接收站',
    LNGStorage: 'LNG储罐',
    TrainStation: '铁路自备车火车站',
    Railway: '铁路',
    TransportPath: '运输路径',
    TransportNode: '运输节点拓扑',
    FillingStation: '加油站',
    TransportWarning: '运输监控',
    TransportWaste: '危废监控',
    Train: '铁路自备车',
    Ship: '船舶',
    Warning: '综合预警',
    Track: '历史轨迹',
    Weather: '天气预警'
}

const moduleNames = {
    Analysis: '经营分析',
    Facilities: '设施分布',
    Pipeline: '管线',
    CrudeOil: '原油',
    NaturalGas: '天然气',
    OilRefining: '炼油',
    Chemical: '化工',
    ProductOilSales: '成品油销售',
    ChemicalSales: '化工销售',
    ProductOil_dq_Sales: '成品油大区销售',
    ProductOli_ss_Sales: '成品油省市销售',
    ImportedCrudeOil: '进口原油',
    ImportedCrudeOil_dz: '进口原油大洲',
    ImportedCrudeOil_dq: '进口原油地区',
    ImportedCrudeOil_gj: '进口原油国家',
    ImportedCrudeOil_jc: '进口原油进场',
    Refining_ImportedCrudeOil: '炼油进口原油',
    Refining_HomeCrudeOil: '炼油国内原油',
    Refining_Cpylx: '炼油成品油流向',
    Dock_Yyly: '码头原油来源',
    Dock_Yylxqy: '码头原油流向企业',
    Oil_Yylxqy: '油田原油流向企业',
    ProductOilSales_dq_drdc: '成品油销售大区调入调出',

    jyfx_tb: '经营分析图表',
    gx_tb: '管线图表',
    yq_tb: '油气图表',
    ly_tb: '炼油图表',
    hg_tb: '化工图表',
    cpyxs_tb: '成品油销售图表',
    cpyxs_dq_tb: '成品油销售大区图表',
    cpyxs_ck_tb: '成品油销售出口图表'
}
const imageIDlayerCode = {
        '1_1': 'sinopec_yout',
        '1_2': 'petro_yout',
        '1_3': 'cnooc_yout',
        '1_4': 'other_yout',
        '2_1': 'sinopec_qit',
        '2_2': 'petro_qit',
        '2_3': 'cnooc_qit',
        '2_4': 'other_qit',
        '3_1': 'sinopec_jinkyy',
        '3_2': 'petro_jinkyy',
        '3_3': 'cnooc_jinkyy',
        '3_4': 'other_jinkyy',
        '4_1': 'sinopec_mat',
        '4_2': 'petro_mat',
        '4_3': 'cnooc_mat',
        '4_4': 'other_mat',
        '5_1': 'sinopec_lianyqy',
        '5_2': 'petro_lianyqy',
        '5_3': 'cnooc_lianyqy',
        '5_4': 'other_lianyqy',
        '6_1': 'sinopec_huagqy',
        '6_2': 'petro_huagqy',
        '6_3': 'cnooc_huagqy',
        '6_4': 'other_huagqy',
        '7_1': 'sinopec_chengpy',
        '7_2': 'petro_chengpy',
        '7_3': 'cnooc_chengpy',
        '7_4': 'other_chengpy',
        '8_1': 'sinopec_huag',
        '8_2': 'petro_huag',
        '8_3': 'cnooc_huag',
        '8_4': 'other_huag'
    }

const API_URLS = {
    vehicleAlarmUrl: '',
    corpTransVolumeUrl: ''
}

export default {
   mapConfig,
   layerNameNew,
   imageIDlayerCode,
    moduleNames,
    TokenConfig,
    layerNames,
    mapOptions,
    DMHttpService1,
    API_URLS
    mapConfig,
    TokenConfig,

    BLUEMAP_HOST
}

 src/views/MapTemplate.vue

@@ -33,12 +33,10 @@
        const mapcontainer = this.$refs.rootmap
        this.mapObj = Sgis.initMap(mapcontainer)
        this.basemapHelper = Sgis.initBasemaps(this.mapObj.map, this.mapObj.L) // 初始化底图
        this.vectorLayerHelper = Sgis.initLayers(this.mapObj.map, this.mapObj.L, {}, this.$nodeEnv) // 初始化业务图层
        this.serviceLayerHelper = Sgis.initTileLayers(this.mapObj.map, this.mapObj.L) // 初始化底图
        this.vectorLayerHelper = Sgis.initVectorLayers(this.mapObj.map, this.mapObj.L, {}) // 初始化业务图层
        this.setLayerHelper(this.vectorLayerHelper)
        return this.map
      },
      setLayerHelper(){

      }
  }
}