From 290793d9fbbe2c497e106143bba06b2841af5991 Mon Sep 17 00:00:00 2001 From: YANGDL <114714267@qq.com> Date: 星期五, 26 二月 2021 09:18:11 +0800 Subject: [PATCH] 增加图标 --- src/components/helpers/ServiceLayerHelper.js | 147 ++++++++++++++++++++++++++++++++++++------------ 1 files changed, 110 insertions(+), 37 deletions(-) diff --git a/src/components/helpers/ServiceLayerHelper.js b/src/components/helpers/ServiceLayerHelper.js index 2ff5042..eb4eb9e 100644 --- a/src/components/helpers/ServiceLayerHelper.js +++ b/src/components/helpers/ServiceLayerHelper.js @@ -2,6 +2,8 @@ /** * 鍒涘缓鍥惧眰鐩稿叧鐨勭被 */ +import AjaxUtils from '@/utils/AjaxUtils' +import store from '@/store' class ServiceLayerHelper { constructor (options) { @@ -12,7 +14,9 @@ this.tileLayersWMTSArray = [] // 鍒濆鐨刉MTS闆� this.tileLayersTileArray = [] // 鍒濆鐨凾ile闆� this.tileLayersWMSArray = [] // 鍒濆鐨刉MS闆� - this.mapConfig = {} + this.geojsonArray = {} // 鍒濆鐨刧eojson闆� + this.layerConfig = {} + this.regex = /\{(.+?)\}/g // 鍖归厤{} } getTileLayer (code) { @@ -22,9 +26,9 @@ /** * 鏍规嵁閰嶇疆鏂囦欢鍒濆鍖栦笟鍔″簳鍥� */ - initServiceLayers (mapConfig) { - this.mapConfig = mapConfig - this._loadLayers(mapConfig) + initServiceLayers (layerConfig) { + this.layerConfig = layerConfig + this.loadLayers(layerConfig.mapConfig.Layers.LayerSewersLine) } /** @@ -32,29 +36,99 @@ * @param {*} mapConfig * @param {*} isAddToMap */ - _loadLayers (mapConfig, isAddToMap = true) { - console.debug('ServiceLayerHelper鍔犺浇鍙傛暟锛�', mapConfig) - for (let i = 0, len = mapConfig.mapConfig.ServiceLayers.length; i < len; ++i) { - const opt = mapConfig.mapConfig.ServiceLayers[i] - this.setArray(opt) - if (opt.type === 'wmts') { - opt.checked && this.loadWmtsLayer(opt, isAddToMap, mapConfig.mapConfig.ServiceLayers[i]) - } else if (opt.type === 'wms') { - opt.checked && this.loadWmsLayer(opt, isAddToMap, mapConfig.mapConfig.ServiceLayers[i]) - } else if (opt.type === 'tile') { - opt.checked && 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.loadGeojsonLayers(opt) + } } } } - setArray (opt) { - var type = opt.type - if (type === 'wmts') { - this.tileLayersWMTSArray.push(opt) - } else if (type === 'wms') { - this.tileLayersWMSArray.push(opt) - } else if (type === 'tile') { - this.tileLayersTileArray.push(opt) + loadGeojsonLayers (options) { + var url = options.url + var layers = options.layers + for (var i = 0; i < layers.length; i++) { + var layer = layers[i] + var checked = layer.checked + if (checked) { + this.loadGeojsonLayer(url, layer) + } + } + } + + loadGeojsonLayer (url, layer) { + var matches = this.regex.exec(url) + var matchValue = layer[matches[1]] + var code = layer.code + var newUrl = url.replace(this.regex, matchValue) + var that = this + if (!that.geojsonArray[code]) { + AjaxUtils.GetDataAsynByUrl(newUrl, {}, function (res) { + store.commit('setSewersDatas', res) + var layer = that.loadGeojson(res) + that.geojsonArray[code] = layer + }) + } + } + + /** + * 鍔犺浇鐐规暟鎹� + * @param res + */ + loadGeojson (res) { + var that = this + const featureGroup = that.L.featureGroup([], { + attribution: { id: '123' } + }).addTo(that.map) + 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 + } + }, + pointToLayer: function (geoJsonPoint, latlng) { + return that.L.canvasMarker(latlng, + { + radius: 20, + img: { + url: 'assets/images/map/marker-icon.png', + size: [20, 20] + } + }) + } + }).bindPopup(function (layer) { + // return layer.feature.properties.linenumber + }).addTo(featureGroup) + featureGroup.bringToBack() + return featureGroup + } + + removeLayer (item) { + var code = item.code + var layer = this.geojsonArray[code] + if (layer) { + this.map.removeLayer(layer) + delete this.geojsonArray[code] } } @@ -63,9 +137,9 @@ * @param {}} options * @param {*} isAddToMap */ - loadWmtsLayer (options, isAddToMap = true, config) { + loadWmtsLayer (options, isAddToMap = true) { const layer = this.L.tileLayer(options.url, options.option) - layer.config = config + layer.config = options if (isAddToMap) { layer.addTo(this.map) @@ -78,9 +152,9 @@ * @param {}} options * @param {*} isAddToMap */ - loadWmsLayer (options, isAddToMap = true, config) { + loadWmsLayer (options, isAddToMap = true) { const layer = this.L.tileLayer.wms(options.url, options.option) - layer.config = config + layer.config = options if (isAddToMap) { layer.addTo(this.tileLayerWmslayerGroup) @@ -93,7 +167,7 @@ * @param {}} options * @param {*} isAddToMap */ - loadTileLayer (options, isAddToMap = true, config) { + loadTileLayer (options, isAddToMap = true) { const layer = this.L.tileLayer(options.url, { layers: options.layers || 'all', // country format: options.format || 'image/png', @@ -103,7 +177,7 @@ minZoom: options.minZoom || 1, zoomOffset: options.zoomOffset || 0 }) - layer.config = config + layer.config = options if (isAddToMap) { layer.addTo(this.map) @@ -134,13 +208,12 @@ } /** - * 寰楀埌閫変腑鐨勫浘灞傚垪琛� - * @param mapConfig - * @returns {[]} - */ - getCheckedLayers (mapConfig) { + * 寰楀埌閫変腑鐨勫浘灞傚垪琛� + * @param mapConfig + * @returns {[]} + */ + getCheckedLayers (serviceLayers) { var checkedLayers = [] - var serviceLayers = mapConfig.ServiceLayers for (var i = 0; i < serviceLayers.length; i++) { var serviceLayer = serviceLayers[i] var layers = serviceLayer.layers @@ -177,8 +250,8 @@ } /** - * 鏍规嵁绾跨殑閫夋嫨锛屽緱鍒扮偣鐨勫彲閫夋嫨鍥惧眰鏁版嵁 - */ + * 鏍规嵁绾跨殑閫夋嫨锛屽緱鍒扮偣鐨勫彲閫夋嫨鍥惧眰鏁版嵁 + */ getFiltersGroup () { } -- Gitblit v1.8.0