From d9b89e0520d29ffdf1775b4f2d87fc45db2b0bf5 Mon Sep 17 00:00:00 2001 From: zhangshuaibao <15731629597@163.com> Date: 星期三, 17 三月 2021 11:38:06 +0800 Subject: [PATCH] 修改 --- src/components/helpers/ServiceLayerHelper.js | 131 ++++++++++++++++++++----------------------- 1 files changed, 62 insertions(+), 69 deletions(-) diff --git a/src/components/helpers/ServiceLayerHelper.js b/src/components/helpers/ServiceLayerHelper.js index 6a67caa..4e0d2fc 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 } @@ -140,11 +140,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 +156,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 +166,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 } -- Gitblit v1.8.0