From 1883c95da4b79da03365e8e0eea6b917e6cb4f10 Mon Sep 17 00:00:00 2001
From: 徐旺旺 <11530253@qq.com>
Date: 星期五, 26 二月 2021 12:11:01 +0800
Subject: [PATCH] 修改图层控制
---
src/components/helpers/ServiceLayerHelper.js | 112 ++++++++++++++++++++++++++-----------------------------
1 files changed, 53 insertions(+), 59 deletions(-)
diff --git a/src/components/helpers/ServiceLayerHelper.js b/src/components/helpers/ServiceLayerHelper.js
index 81069b5..fa100b0 100644
--- a/src/components/helpers/ServiceLayerHelper.js
+++ b/src/components/helpers/ServiceLayerHelper.js
@@ -3,8 +3,9 @@
* 鍒涘缓鍥惧眰鐩稿叧鐨勭被
*/
import AjaxUtils from '@/utils/AjaxUtils'
-import { GEOM_TYPE } from '../../conf/Constants'
+import store from '@/store'
+var myRenderer = window.L.canvas()
class ServiceLayerHelper {
constructor (options) {
this.map = options.map
@@ -14,7 +15,7 @@
this.tileLayersWMTSArray = [] // 鍒濆鐨刉MTS闆�
this.tileLayersTileArray = [] // 鍒濆鐨凾ile闆�
this.tileLayersWMSArray = [] // 鍒濆鐨刉MS闆�
- this.geojsonArray = [] // 鍒濆鐨刧eojson闆�
+ this.geojsonArray = {} // 鍒濆鐨刧eojson闆�
this.layerConfig = {}
this.regex = /\{(.+?)\}/g // 鍖归厤{}
}
@@ -51,73 +52,47 @@
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, item) {
+ var matches = this.regex.exec(url)
+ var matchValue = item[matches[1]]
+ var code = item.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, item)
+ 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, layer) {
+ var that = this
+ var icon = layer.icon
+ return that.L.geoJSON(res.features, {
style: function (feature) {
return {
fill: true,
@@ -125,16 +100,35 @@
fillColor: '#06cccc',
color: '#06cccc',
fillOpacity: 0.2,
- opacity: 0.8
- // ,
- // dashArray: '10,4',
- // dashSpeed: -10
+ opacity: 0.8,
+ dashArray: '10,4',
+ dashSpeed: -10
}
},
- minZoom: 10
+ pointToLayer: function (geoJsonPoint, latlng) {
+ return that.L.canvasMarker(latlng,
+ {
+ radius: 20,
+ img: {
+ // url: 'assets/images/map/marker-icon.png',
+ url: '/assets/images/map/' + icon,
+ size: [20, 20]
+ }
+ })
+ },
+ renderer: myRenderer
}).bindPopup(function (layer) {
- // return layer.feature.properties.linenumber
- }).addTo(this.map)
+ return layer.feature.properties.linenumber
+ }).addTo(that.map)
+ }
+
+ 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