From 840a83fe3ff01d2185c0aa10474f0fcb1a543693 Mon Sep 17 00:00:00 2001 From: 徐旺旺 <11530253@qq.com> Date: 星期四, 25 二月 2021 18:19:55 +0800 Subject: [PATCH] 修改图层控制 --- src/components/helpers/ServiceLayerHelper.js | 104 +++++++++++++++++++++++++--------------------------- 1 files changed, 50 insertions(+), 54 deletions(-) diff --git a/src/components/helpers/ServiceLayerHelper.js b/src/components/helpers/ServiceLayerHelper.js index cbfdedd..eb4eb9e 100644 --- a/src/components/helpers/ServiceLayerHelper.js +++ b/src/components/helpers/ServiceLayerHelper.js @@ -3,7 +3,7 @@ * 鍒涘缓鍥惧眰鐩稿叧鐨勭被 */ import AjaxUtils from '@/utils/AjaxUtils' -import { GEOM_TYPE } from '../../conf/Constants' +import store from '@/store' class ServiceLayerHelper { constructor (options) { @@ -14,7 +14,7 @@ this.tileLayersWMTSArray = [] // 鍒濆鐨刉MTS闆� this.tileLayersTileArray = [] // 鍒濆鐨凾ile闆� this.tileLayersWMSArray = [] // 鍒濆鐨刉MS闆� - this.geojsonArray = [] // 鍒濆鐨刧eojson闆� + this.geojsonArray = {} // 鍒濆鐨刧eojson闆� this.layerConfig = {} this.regex = /\{(.+?)\}/g // 鍖归厤{} } @@ -51,73 +51,49 @@ this.loadTileLayer(opt, isAddToMap) this.tileLayersTileArray.push(opt) } else if (opt.type === 'geojson') { - this.loadGeojson(opt) + this.loadGeojsonLayers(opt) } } } } - loadGeojson (options) { + loadGeojsonLayers (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 - var geomtype = layer.geomtype - if (!checked) { - continue + if (checked) { + this.loadGeojsonLayer(url, layer) } - var newUrl = url.replace(this.regex, matchValue) - var that = this + } + } + + 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) { - switch (geomtype) { - case GEOM_TYPE.POINT : - that.loadPointGeojson(res) - break - case GEOM_TYPE.LINE : - that.loadLineGeojson(res) - break - case GEOM_TYPE.POLYGON : - break - default: - that.loadLineGeojson(res) - break - } + store.commit('setSewersDatas', res) + var layer = that.loadGeojson(res) + that.geojsonArray[code] = layer }) } } /** - * 鍔犺浇鐐规暟鎹� - * @param res - */ - loadPointGeojson (res) { - this.L.geoJSON(res.features, { - pointToLayer: function (geoJsonPoint, latlng) { - return this.L.canvasMarker(latlng, - { - radius: 20, - prevLatlng: this.L.latLng(51.503, -0.09), // previous point - img: { - url: './images/beng.png', - size: [20, 20], - rotate: 90 - } - }) - } - }).bindPopup(function (layer) { - // return layer.feature.properties.linenumber - }).addTo(this.map) - } - - /** - * 鍔犺浇绾挎暟鎹� - * @param res - */ - loadLineGeojson (res) { - this.L.geoJSON(res.features, { + * 鍔犺浇鐐规暟鎹� + * @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, @@ -130,10 +106,30 @@ dashSpeed: -10 } }, - minZoom: 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(this.map) + }).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] + } } /** -- Gitblit v1.8.0