From 236e6b13a0959c69afe40ab8e503c0ed01899f30 Mon Sep 17 00:00:00 2001
From: 徐旺旺 <11530253@qq.com>
Date: 星期四, 25 三月 2021 10:34:56 +0800
Subject: [PATCH] 图层控制
---
src/components/helpers/ServiceLayerHelper.js | 136 ++++++++++++++++++++++-----------------------
1 files changed, 66 insertions(+), 70 deletions(-)
diff --git a/src/components/helpers/ServiceLayerHelper.js b/src/components/helpers/ServiceLayerHelper.js
index 6a67caa..c53ff99 100644
--- a/src/components/helpers/ServiceLayerHelper.js
+++ b/src/components/helpers/ServiceLayerHelper.js
@@ -26,11 +26,11 @@
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]
+ var layerGroup = this.layerArray[k]
+ var layers = layerGroup.getLayers()
+ for (var m = 0; m < layers.length; m++) {
+ var layer = layers[m]
+ var feature = layer.feature
if (feature.id === layerId) {
return layer
}
@@ -39,6 +39,10 @@
return null
}
+ /**
+ * 鎺у埗鏄剧ず鐨勭骇鍒�
+ * @param layerConfig
+ */
initDisplayZoom (layerConfig) {
var that = this
that.map.on('zoomend ', function (e) {
@@ -140,11 +144,10 @@
* @param res
*/
loadGeojson (res, opt) {
- var that = this
var icon = opt.icon
- const featureGroup = that.L.featureGroup()
+ const featureGroup = this.L.featureGroup()
const featureList = []
- const geojson = that.L.geoJSON(res.features, {
+ const geojson = this.L.geoJSON(res.features, {
style: function (feature) {
return {
fill: styles.defaultLineStyle.fill,
@@ -157,8 +160,8 @@
dashSpeed: styles.defaultLineStyle.dashSpeed
}
},
- pointToLayer: function (geoJsonPoint, latlng) {
- return that.L.canvasMarker(latlng,
+ pointToLayer: (geoJsonPoint, latlng) => {
+ return this.L.canvasMarker(latlng,
{
img: {
// url: 'assets/images/map/marker-icon.png',
@@ -167,70 +170,64 @@
}
})
},
- onEachFeature: function (feature, layer) {
- console.log(feature)
- console.log(layer)
+ onEachFeature: (feature, layer) => {
featureList.push(layer)
- layer.addTo(featureGroup)
- }
- }).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 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.bindPopup((layer) => {
+ this.popupComp.setDatas(layer)
+ this.popupComp.setShow()
+ return this.popupComp.$el
+ }, {
+ className: 's-map-popup',
+ minWidth: 300,
+ closeButton: false,
+ autoClose: false
+ })
+ .bindTooltip((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', (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(that.map)
- // }).addTo(featureGroup)
- })
+ }).on('mouseout', (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)
- featureGroup.addTo(that.map)
- that.setZIndex(featureGroup)
+ featureGroup.addTo(this.map)
+ this.setZIndex(featureGroup)
return featureGroup
}
@@ -239,7 +236,6 @@
* @param layerGroup 鍥惧眰缁�
*/
setZIndex (layerGroup) {
- console.log(layerGroup)
var layers = layerGroup.getLayers()
if (layers.length > 0) {
var layer = layers[0]
--
Gitblit v1.8.0