From c4044fb60e53e5c83da4ee645d5160f914e422a3 Mon Sep 17 00:00:00 2001
From: YANGDL <114714267@qq.com>
Date: 星期五, 05 三月 2021 16:17:41 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/master'
---
src/components/helpers/ServiceLayerHelper.js | 128 ++++++++++++++++++++++++++++++++++--------
1 files changed, 102 insertions(+), 26 deletions(-)
diff --git a/src/components/helpers/ServiceLayerHelper.js b/src/components/helpers/ServiceLayerHelper.js
index 60325fb..dcde9a6 100644
--- a/src/components/helpers/ServiceLayerHelper.js
+++ b/src/components/helpers/ServiceLayerHelper.js
@@ -4,6 +4,7 @@
*/
import AjaxUtils from '@/utils/AjaxUtils'
import store from '@/store'
+import styles from '@/conf/Styles'
class ServiceLayerHelper {
constructor (options) {
@@ -14,7 +15,7 @@
this.tileLayersWMTSArray = [] // 鍒濆鐨刉MTS闆�
this.tileLayersTileArray = [] // 鍒濆鐨凾ile闆�
this.tileLayersWMSArray = [] // 鍒濆鐨刉MS闆�
- this.geojsonArray = {} // 鍒濆鐨刧eojson闆�
+ this.layerArray = {} // key涓洪厤缃殑code锛屽姞杞界殑鍥惧眰瀵硅薄锛�
this.layerConfig = {}
this.regex = /\{(.+?)\}/g // 鍖归厤{}
this.popupComp = null
@@ -24,14 +25,40 @@
return this.loadedLayersMap.get(code)
}
+ initDisplayZoom (layerConfig) {
+ var that = this
+ that.map.on('zoomend ', function (e) {
+ const zoom = that.map.getZoom()
+ for (var i = 0, l = layerConfig.length; i < l; i++) {
+ var config = layerConfig[i]
+ var layers = config.layers
+ for (var j = 0; j < layers.length; j++) {
+ var layer = layers[j]
+ if (layer.minZoom) {
+ if (zoom > layer.minZoom) {
+ var layerObj = that.layerArray[layer.code]
+ layerObj && layerObj.addTo(that.map)
+ } else {
+ that.removeLayer(layer)
+ }
+ }
+ }
+ }
+ })
+ }
+
/**
* 鏍规嵁閰嶇疆鏂囦欢鍒濆鍖栦笟鍔″簳鍥�
*/
initServiceLayers (layerConfig, popupComp) {
this.layerConfig = layerConfig
this.popupComp = popupComp
+ store.commit('clearSewersDatas')
+ store.commit('clearSewersLayers')
this.loadLayers(layerConfig.mapConfig.Layers.LayerSewersLine)
this.loadLayers(layerConfig.mapConfig.Layers.layerSewersPoint)
+ this.initDisplayZoom(layerConfig.mapConfig.Layers.LayerSewersLine)
+ this.initDisplayZoom(layerConfig.mapConfig.Layers.layerSewersPoint)
}
/**
@@ -70,55 +97,59 @@
}
}
+ /**
+ * 璇锋眰wfs鏁版嵁
+ * @param url
+ * @param item
+ */
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]) {
+ if (!that.layerArray[code]) {
AjaxUtils.GetDataAsynByUrl(newUrl, {}, function (res) {
- store.commit('setSewersDatas', res)
+ store.commit('addSewersDatas', res)
var layer = that.loadGeojson(res, item)
- that.geojsonArray[code] = layer
+ that.layerArray[code] = layer
})
}
}
/**
- * 鍔犺浇鐐规暟鎹�
+ * 鍔犺浇gis server杩斿洖鐨刧eoson鏁版嵁鍒板湴鍥句腑灞曠ず
* @param res
*/
- loadGeojson (res, layer) {
+ loadGeojson (res, opt) {
var that = this
- var icon = layer.icon
+ var icon = opt.icon
const featureGroup = that.L.featureGroup().addTo(that.map)
- that.L.geoJSON(res.features, {
+ const geojson = 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
+ fill: styles.defaultLineStyle.fill,
+ weight: styles.defaultLineStyle.weight,
+ fillColor: styles.defaultLineStyle.fillColor,
+ color: styles.defaultLineStyle.color,
+ fillOpacity: styles.defaultLineStyle.fillOpacity,
+ opacity: styles.defaultLineStyle.opacity
+ // dashArray: styles.defaultLineStyle.dashArray,
+ // dashSpeed: styles.defaultLineStyle.dashSpeed
}
},
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]
+ size: styles.defaultLineStyle.size
}
})
}
}).bindPopup(function (layer) {
- that.popupComp.setDatas(layer.feature)
+ that.popupComp.setDatas(layer)
that.popupComp.setShow()
return that.popupComp.$el
}, {
@@ -126,17 +157,62 @@
minWidth: 300,
closeButton: false,
autoClose: false
- }).addTo(featureGroup).bringToFront()
+ })
+ .bindTooltip(function (layer) {
+ const nameId = layer.feature.id
+ let name = ''
+ if (nameId.indexOf('涓夐��') !== -1 || nameId.indexOf('鍥涢��') !== -1 || nameId.indexOf('绐ㄤ簳') !== -1) {
+ name = layer.feature.properties.pointnumber
+ } else {
+ name = layer.feature.properties.name
+ }
+ if (name === undefined) {
+ name = ''
+ }
+ return name
+ }, { direction: 'bottom', offset: [0, 15], sticky: true })
+ .on('mouseover', function (e) {
+ const layer = e.layer
+ const type = e.layer.feature.geometry.type
+ if (type === 'LineString' || type === 'MultiLineString') {
+ layer.setStyle({ weight: 8, color: '#00ffff' })
+ } else if (type === 'Point' || type === 'MultiPoint') {
+ layer.setStyle({
+ img: {
+ url: '/assets/images/map/' + icon,
+ size: [25, 25]
+ }
+ })
+
+ layer.bringToFront()
+ }
+ }).on('mouseout', function (e) {
+ const layer = e.layer
+ const type = e.layer.feature.geometry.type
+ if (type === 'LineString' || type === 'MultiLineString') {
+ layer.setStyle({ weight: styles.defaultLineStyle.weight, color: styles.defaultLineStyle.color })
+ }
+ if (type === 'Point' || type === 'MultiPoint') {
+ layer.setStyle({
+ img: {
+ url: '/assets/images/map/' + icon,
+ size: styles.defaultLineStyle.size
+ }
+ })
+ }
+ }).addTo(featureGroup)
+ store.commit('addSewersDatas', geojson)
+ if (Object.prototype.hasOwnProperty.call(res, 'features') && res.features.length > 0 && (res.features[0].geometry.type === 'LineString' || res.features[0].geometry.type === 'MultiLineString')) {
+ geojson.bringToBack()
+ } else {
+ geojson.bringToFront()
+ }
return featureGroup
}
removeLayer (item) {
- var code = item.code
- var layer = this.geojsonArray[code]
- if (layer) {
- this.map.removeLayer(layer)
- delete this.geojsonArray[code]
- }
+ var layer = this.layerArray[item.code]
+ layer && this.map.removeLayer(layer)
}
/**
--
Gitblit v1.8.0