From b89ad0355f2d466304ecc2dad86407e26aa69db4 Mon Sep 17 00:00:00 2001
From: 徐旺旺 <11530253@qq.com>
Date: 星期一, 22 二月 2021 18:37:47 +0800
Subject: [PATCH] 修改图层控制
---
src/components/helpers/ServiceLayerHelper.js | 267 +++++++++++++++++++++++++++++++++-------------------
1 files changed, 169 insertions(+), 98 deletions(-)
diff --git a/src/components/helpers/ServiceLayerHelper.js b/src/components/helpers/ServiceLayerHelper.js
index 21573a9..7bef7bd 100644
--- a/src/components/helpers/ServiceLayerHelper.js
+++ b/src/components/helpers/ServiceLayerHelper.js
@@ -2,162 +2,233 @@
/**
* 鍒涘缓鍥惧眰鐩稿叧鐨勭被
*/
-import L from 'leaflet'
+import AjaxUtils from '@/utils/AjaxUtils'
class ServiceLayerHelper {
- constructor(options) {
- this.map = options.map
- this.L = options.L
- this.tileLayersMap = new Map()
- this.tileLayersWMSArray = []
- this.tileLayersWMTSArray = []
- this.tileLayersTileArray = []
- this.mapConfig = {}
- }
+ constructor (options) {
+ this.map = options.map
+ this.L = window.L
+ this.loadedLayersMap = new Map()
+ this.tileLayerWmslayerGroup = this.L.layerGroup().addTo(this.map)
+ this.tileLayersWMTSArray = [] // 鍒濆鐨刉MTS闆�
+ this.tileLayersTileArray = [] // 鍒濆鐨凾ile闆�
+ this.tileLayersWMSArray = [] // 鍒濆鐨刉MS闆�
+ this.geojsonArray = [] // 鍒濆鐨刧eojson闆�
+ this.layerConfig = {}
+ this.regex = /\{(.+?)\}/g // 鍖归厤{}
+ }
- getTileLayer(code) {
- return this.tileLayersMap.get(code)
- }
+ getTileLayer (code) {
+ return this.loadedLayersMap.get(code)
+ }
- /**
+ /**
* 鏍规嵁閰嶇疆鏂囦欢鍒濆鍖栦笟鍔″簳鍥�
*/
- initServiceLayers(mapConfig) {
- this.mapConfig = mapConfig
- this._loadLayers(mapConfig)
- }
+ initServiceLayers (layerConfig) {
+ this.layerConfig = layerConfig
+ this._loadLayers(layerConfig.mapConfig.Layers.LayerSewersLine)
+ }
- /**
+ /**
* 鎸夐厤缃枃浠跺姞杞戒笁绉嶄笉鍚岀被鍨嬬殑
* @param {*} mapConfig
* @param {*} isAddToMap
*/
- _loadLayers(mapConfig, isAddToMap = true) {
- console.debug('ServiceLayerHelper鍔犺浇鍙傛暟锛�', mapConfig)
- 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, mapConfig.mapConfig.ServiceLayers[i])
- } else if (opt.type === 'wms') {
- this.loadWmsLayer(opt, isAddToMap, mapConfig.mapConfig.ServiceLayers[i])
- } else if (opt.type === 'tile') {
- this.loadTileLayer(opt, isAddToMap, mapConfig.mapConfig.ServiceLayers[i])
- }
+ _loadLayers (layerConfig, isAddToMap = true) {
+ console.debug('ServiceLayerHelper鍔犺浇鍙傛暟锛�', layerConfig)
+ for (let i = 0, len = layerConfig.length; i < len; ++i) {
+ const opt = layerConfig[i]
+ if (opt.checked) {
+ if (opt.type === 'wmts') {
+ this.loadWmtsLayer(opt, isAddToMap)
+ this.tileLayersWMTSArray.push(opt)
+ } else if (opt.type === 'wms') {
+ this.loadWmsLayer(opt, isAddToMap)
+ this.tileLayersWMSArray.push(opt)
+ } else if (opt.type === 'tile') {
+ this.loadTileLayer(opt, isAddToMap)
+ this.tileLayersTileArray.push(opt)
+ } else if (opt.type === 'geojson') {
+ this.loadGeojson(opt)
}
+ }
}
+ }
- /**
+ loadGeojson (options) {
+ var url = options.url
+ var layers = options.layers
+ var matches = this.regex.exec(url)
+ for (var i = 0; i < layers.length; i++) {
+ var layer = layers[i]
+ var matchValue = layer[matches[1]]
+ var checked = layer.checked
+ if (!checked) {
+ continue
+ }
+ var newUrl = url.replace(this.regex, matchValue)
+ var that = this
+ AjaxUtils.GetDataAsynByUrl(newUrl, {}, function (res) {
+ // let geojsondata = L.geoJSON(test.features,{
+ that.L.geoJSON(res.features, {
+ style: function (feature) {
+ return {
+ fill: true,
+ weight: 2,
+ fillColor: '#06cccc',
+ color: '#06cccc',
+ fillOpacity: 0.2,
+ opacity: 0.8,
+ dashArray: '10,4',
+ dashSpeed: -10
+ }
+ },
+ minZoom: 10
+ }).bindPopup(function (layer) {
+ // return layer.feature.properties.linenumber
+ }).addTo(that.map)
+ })
+ }
+ }
+
+ /**
* 寰�鍦板浘涓姞鍏ヤ竴涓猈MTS鏈嶅姟
* @param {}} options
* @param {*} isAddToMap
*/
- loadWmtsLayer(options, isAddToMap = true, config) {
- const layer = this.L.tileLayer(options.url, options.option);
- layer.config = config
+ loadWmtsLayer (options, isAddToMap = true) {
+ const layer = this.L.tileLayer(options.url, options.option)
+ layer.config = options
- if (isAddToMap) {
- layer.addTo(this.map)
- }
- this.tileLayersMap.set(options.code, layer)
- this.tileLayersWMTSArray.push(layer)
+ if (isAddToMap) {
+ layer.addTo(this.map)
}
+ this.loadedLayersMap.set(options.code, layer)
+ }
- /**
+ /**
* 寰�鍦板浘涓姞鍏ヤ竴涓猈MS鏈嶅姟
* @param {}} options
* @param {*} isAddToMap
*/
- loadWmsLayer(options, isAddToMap = true, config) {
- const layer = this.L.tileLayer.wms(options.url, options.option);
- layer.config = config
+ loadWmsLayer (options, isAddToMap = true) {
+ const layer = this.L.tileLayer.wms(options.url, options.option)
+ layer.config = options
- if (isAddToMap) {
- layer.addTo(this.map)
- }
- this.tileLayersMap.set(options.code, layer)
- this.tileLayersWMSArray.push(layer)
+ if (isAddToMap) {
+ layer.addTo(this.tileLayerWmslayerGroup)
}
+ this.loadedLayersMap.set(options.code, layer)
+ }
- /**
+ /**
* 寰�鍦板浘涓姞鍏ヤ竴涓猅ILE鏈嶅姟
* @param {}} options
* @param {*} isAddToMap
*/
- loadTileLayer(options, isAddToMap = true, config) {
- 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
- });
- layer.config = config
+ loadTileLayer (options, isAddToMap = true) {
+ const layer = this.L.tileLayer(options.url, {
+ layers: options.layers || 'all', // country
+ format: options.format || 'image/png',
+ transparent: options.true || true,
+ crs: options.crs || this.L.CRS.EPSG4326,
+ maxZoom: options.maxZoom || 21,
+ minZoom: options.minZoom || 1,
+ zoomOffset: options.zoomOffset || 0
+ })
+ layer.config = options
- if (isAddToMap) {
- layer.addTo(this.map)
- }
- this.tileLayersMap.set(options.code, layer)
- this.tileLayersTileArray.push(layer)
+ if (isAddToMap) {
+ layer.addTo(this.map)
}
+ this.loadedLayersMap.set(options.code, layer)
+ }
- /**
+ /**
* 闅愯棌鏈嶅姟鍥惧眰
* @param {*} name
*/
- hideTileLayer(code) {
- if (this.tileLayersMap) {
- let tileLayer = this.tileLayersMap.get(code)
- this.map.removeLayer(tileLayer)
- }
+ hideTileLayer (code) {
+ if (this.loadedLayersMap) {
+ const tileLayer = this.loadedLayersMap.get(code)
+ this.map.removeLayer(tileLayer)
}
+ }
- /**
+ /**
* 灞曠ず鏈嶅姟鍥惧眰
* @param {*} name
*/
- showTileLayer(code) {
- if (this.tileLayersMap) {
- let tileLayer = this.tileLayersMap.get(code)
- this.map.addLayer(tileLayer)
- }
+ showTileLayer (code) {
+ if (this.loadedLayersMap) {
+ const tileLayer = this.loadedLayersMap.get(code)
+ this.map.addLayer(tileLayer)
}
+ }
- /**
+ /**
+ * 寰楀埌閫変腑鐨勫浘灞傚垪琛�
+ * @param mapConfig
+ * @returns {[]}
+ */
+ getCheckedLayers (serviceLayers) {
+ var checkedLayers = []
+ for (var i = 0; i < serviceLayers.length; i++) {
+ var serviceLayer = serviceLayers[i]
+ var layers = serviceLayer.layers
+ for (var j = 0; j < layers.length; j++) {
+ var layer = layers[j]
+ var checked = layer.checked
+ if (checked) {
+ checkedLayers.push(layer)
+ }
+ }
+ }
+ return checkedLayers
+ }
+
+ /**
* 鑾峰彇鎵�鏈夌殑TILE鏈嶅姟鍥惧眰
*/
- getTileLayers() {
- return this.tileLayersTileArray
- }
+ getTileLayers () {
+ return this.tileLayersTileArray
+ }
- /**
+ /**
* 鑾峰彇鎵�鏈夌殑WMTS鏈嶅姟鍥惧眰
*/
- getWmtsLayers() {
- return this.tileLayersWMTSArray
- }
+ getWmtsLayers () {
+ return this.tileLayersWMTSArray
+ }
- /**
+ /**
* 鑾峰彇鎵�鏈夌殑WMS鏈嶅姟鍥惧眰
*/
- getWmsLayers() {
- return this.tileLayersWMSArray
- }
+ getWmsLayers () {
+ return this.tileLayersWMSArray
+ }
- /**
+ /**
+ * 鏍规嵁绾跨殑閫夋嫨锛屽緱鍒扮偣鐨勫彲閫夋嫨鍥惧眰鏁版嵁
+ */
+ getFiltersGroup () {
+
+ }
+
+ /**
* 閫氳繃code鏌ユ壘WMS鐨勬湇鍔￠厤缃�
* @param {} code wms鏈嶅姟閰嶇疆鐨刢ode
*/
- getWMSConfig(code) {
- let mc = this.mapConfig
- for (let i = 0, len = mc.mapConfig.ServiceLayers.length; i < len; ++i) {
- if (code == mc.mapConfig.ServiceLayers[i].code && mc.mapConfig.ServiceLayers[i].type === 'wms') {
- return mc.mapConfig.ServiceLayers[i]
- }
- }
- return null
+ getWMSConfig (code) {
+ const mc = this.mapConfig
+ for (let i = 0, len = mc.mapConfig.ServiceLayers.length; i < len; ++i) {
+ if (code === mc.mapConfig.ServiceLayers[i].code || mc.mapConfig.ServiceLayers[i].type === 'wms') {
+ return mc.mapConfig.ServiceLayers[i]
+ }
}
+ return null
+ }
}
export default ServiceLayerHelper
--
Gitblit v1.8.0