From 02d584c8d0f31b56f24e367681aa034cd2acf0e9 Mon Sep 17 00:00:00 2001 From: wangrui <zephyrs0894@163.com> Date: 星期六, 19 十二月 2020 02:20:38 +0800 Subject: [PATCH] 重构地图加载的逻辑 --- src/components/helpers/VectorLayerHelper.js | 11 src/conf/MapConfig.js | 183 ++++++++++++++++++++------ src/views/MapTemplate.vue | 15 + src/components/helpers/BasemapHelper.js | 72 ++++++++-- src/components/helpers/ServiceLayerHelper.js | 8 + src/Sgis.js | 93 ++++--------- 6 files changed, 251 insertions(+), 131 deletions(-) diff --git a/src/Sgis.js b/src/Sgis.js index 378fcba..1165a85 100644 --- a/src/Sgis.js +++ b/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鎵╁睍浠g爜 - // 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鎵╁睍浠g爜 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 } diff --git a/src/components/helpers/BasemapHelper.js b/src/components/helpers/BasemapHelper.js index ddd6c32..6ff5085 100644 --- a/src/components/helpers/BasemapHelper.js +++ b/src/components/helpers/BasemapHelper.js @@ -1,15 +1,15 @@ +/* eslint-disable no-debugger */ import AjaxUtils from '@/utils/AjaxUtils' -import CommonLayerLoad from '../mapmodules/CommonLayerLoad' /** * 搴曞浘绠$悊鍔╂墜锛岃礋璐e簳鍥惧垱寤哄強寮�鍏� */ 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) + } + } } } diff --git a/src/components/helpers/ServiceLayerHelper.js b/src/components/helpers/ServiceLayerHelper.js index 2ca252a..ad2939c 100644 --- a/src/components/helpers/ServiceLayerHelper.js +++ b/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) + } + + /** * 寰�鍦板浘涓姞鍏ヤ竴涓猼ile鏈嶅姟 * @param {}} options * @param {*} isAddToMap diff --git a/src/components/helpers/VectorLayerHelper.js b/src/components/helpers/VectorLayerHelper.js index 2917146..04abe59 100644 --- a/src/components/helpers/VectorLayerHelper.js +++ b/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 /** * 璇ユ柟娉曡礋璐e悇绉嶅簳鍥惧姞杞藉埌鍦板浘涓� * 涓嶅悓椤甸潰鍔犺浇鍥惧眰涓嶅悓鏍规嵁妯″潡绫诲瀷閫夋嫨鍔犺浇涓嶅悓鍥惧眰 @@ -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) } } diff --git a/src/conf/MapConfig.js b/src/conf/MapConfig.js index f1f4cb6..b41eec9 100644 --- a/src/conf/MapConfig.js +++ b/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锛岃幏鍙杢oken鍙傛暟 + */ const TokenConfig = { - url: 'http://10.246.132.249:8080/RemoteTokenServer', // 鑾峰彇token鐨勬湇鍔℃帴鍙� + url: SINOPEC_GIS_HOST + '/RemoteTokenServer', // 鑾峰彇token鐨勬湇鍔℃帴鍙� option: { request: 'getToken', username: 'sipms', // 鑾峰彇token鐨勭敤鎴峰悕 diff --git a/src/views/MapTemplate.vue b/src/views/MapTemplate.vue index a441c66..6ee012d 100644 --- a/src/views/MapTemplate.vue +++ b/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 } -- Gitblit v1.8.0