From 69fab1868d98e69c81e04d877185a432261baf3d Mon Sep 17 00:00:00 2001
From: 徐旺旺 <11530253@qq.com>
Date: 星期三, 10 三月 2021 11:30:21 +0800
Subject: [PATCH] 菜单组件联动
---
src/components/helpers/ServiceLayerHelper.js | 175 ++++++++++++++++++++++++++++++++++++----------------------
1 files changed, 108 insertions(+), 67 deletions(-)
diff --git a/src/components/helpers/ServiceLayerHelper.js b/src/components/helpers/ServiceLayerHelper.js
index 490b7ea..26bd028 100644
--- a/src/components/helpers/ServiceLayerHelper.js
+++ b/src/components/helpers/ServiceLayerHelper.js
@@ -16,13 +16,27 @@
this.tileLayersTileArray = [] // 鍒濆鐨凾ile闆�
this.tileLayersWMSArray = [] // 鍒濆鐨刉MS闆�
this.layerArray = {} // key涓洪厤缃殑code锛屽姞杞界殑鍥惧眰瀵硅薄锛�
- this.layerConfig = {}
this.regex = /\{(.+?)\}/g // 鍖归厤{}
this.popupComp = null
}
getTileLayer (code) {
return this.loadedLayersMap.get(code)
+ }
+
+ getByLayerId (layerId) {
+ for (var k in this.layerArray) {
+ var layer = this.layerArray[k]
+ var geojson = layer.toGeoJSON()
+ var features = geojson.features
+ for (var j = 0; j < features.length; j++) {
+ var feature = features[j]
+ if (feature.id === layerId) {
+ return layer
+ }
+ }
+ }
+ return null
}
initDisplayZoom (layerConfig) {
@@ -34,10 +48,10 @@
var layers = config.layers
for (var j = 0; j < layers.length; j++) {
var layer = layers[j]
- if (layer.zoom) {
- if (zoom > layer.zoom) {
+ if (layer.minZoom) {
+ if (zoom > layer.minZoom) {
var layerObj = that.layerArray[layer.code]
- layerObj.addTo(that.map)
+ layerObj && layerObj.addTo(that.map)
} else {
that.removeLayer(layer)
}
@@ -102,18 +116,22 @@
* @param url
* @param item
*/
- loadGeojsonLayer (url, item) {
+ async 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.layerArray[code]) {
- AjaxUtils.GetDataAsynByUrl(newUrl, {}, function (res) {
- store.commit('addSewersDatas', res)
- var layer = that.loadGeojson(res, item)
+ const res = await AjaxUtils.GetDataAsynByUrl(newUrl, {})
+ if (res.data instanceof Object && Object.prototype.hasOwnProperty.call(res.data, 'features')) {
+ store.commit('addSewersDatas', res.data)
+ var layer = that.loadGeojson(res.data, item)
that.layerArray[code] = layer
- })
+ }
+ } else {
+ var _layer = that.layerArray[code].addTo(that.map)
+ that.setZIndex(_layer)
}
}
@@ -124,7 +142,8 @@
loadGeojson (res, opt) {
var that = this
var icon = opt.icon
- const featureGroup = that.L.featureGroup().addTo(that.map)
+ const featureGroup = that.L.featureGroup()
+ const featureList = []
const geojson = that.L.geoJSON(res.features, {
style: function (feature) {
return {
@@ -133,9 +152,9 @@
fillColor: styles.defaultLineStyle.fillColor,
color: styles.defaultLineStyle.color,
fillOpacity: styles.defaultLineStyle.fillOpacity,
- opacity: styles.defaultLineStyle.opacity
- // dashArray: styles.defaultLineStyle.dashArray,
- // dashSpeed: styles.defaultLineStyle.dashSpeed
+ opacity: styles.defaultLineStyle.opacity,
+ dashArray: styles.defaultLineStyle.dashArray,
+ dashSpeed: styles.defaultLineStyle.dashSpeed
}
},
pointToLayer: function (geoJsonPoint, latlng) {
@@ -147,68 +166,90 @@
size: styles.defaultLineStyle.size
}
})
- }
- }).bindPopup(function (layer) {
- that.popupComp.setDatas(layer)
- that.popupComp.setShow()
- return that.popupComp.$el
- }, {
- className: 's-map-popup',
- minWidth: 300,
- closeButton: false,
- autoClose: false
- })
- .bindTooltip(function (layer) {
- const nameId = layer.feature.id
- let name = ''
- if (nameId.indexOf('涓夐��') !== -1 || nameId.indexOf('鍥涢��') !== -1) {
- name = layer.feature.properties.pointnumber
- } else {
- name = layer.feature.properties.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]
+ },
+ onEachFeature: function (feature, layer) {
+ console.log(feature)
+ console.log(layer)
+ featureList.push(layer)
+ layer.bindPopup(function (layer) {
+ that.popupComp.setDatas(layer)
+ that.popupComp.setShow()
+ return that.popupComp.$el
+ }, {
+ className: 's-map-popup',
+ minWidth: 300,
+ closeButton: false,
+ autoClose: false
+ })
+ .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 type = e.target.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
+ layer.bringToFront()
}
- })
- }
- }).addTo(featureGroup)
+ }).on('mouseout', function (e) {
+ const type = e.target.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()
- }
+ featureGroup.addTo(that.map)
+ that.setZIndex(featureGroup)
return featureGroup
}
+ /**
+ * 璁剧疆index,绾垮湪鏈�涓嬮潰锛岀偣鍦ㄤ笂闈�
+ * @param layerGroup 鍥惧眰缁�
+ */
+ setZIndex (layerGroup) {
+ console.log(layerGroup)
+ var layers = layerGroup.getLayers()
+ if (layers.length > 0) {
+ var layer = layers[0]
+ if (layer.feature && (layer.feature.geometry.type === 'LineString' || layer.feature.geometry.type === 'MultiLineString')) {
+ layerGroup.bringToBack()
+ } else {
+ layerGroup.bringToFront()
+ }
+ }
+ }
+
removeLayer (item) {
- this.map.removeLayer(this.layerArray[item.code])
+ var layer = this.layerArray[item.code]
+ layer && this.map.removeLayer(layer)
}
/**
--
Gitblit v1.8.0