From b85b0e9ea957fac745b9e7350cb0315578abef85 Mon Sep 17 00:00:00 2001 From: chenzeping <ChenZeping02609@163.com> Date: 星期三, 10 三月 2021 17:29:23 +0800 Subject: [PATCH] 修改报错 --- src/components/helpers/ServiceLayerHelper.js | 149 +++++++++++++++++++++++++++---------------------- 1 files changed, 83 insertions(+), 66 deletions(-) diff --git a/src/components/helpers/ServiceLayerHelper.js b/src/components/helpers/ServiceLayerHelper.js index 96da67f..26bd028 100644 --- a/src/components/helpers/ServiceLayerHelper.js +++ b/src/components/helpers/ServiceLayerHelper.js @@ -126,13 +126,12 @@ const res = await AjaxUtils.GetDataAsynByUrl(newUrl, {}) if (res.data instanceof Object && Object.prototype.hasOwnProperty.call(res.data, 'features')) { store.commit('addSewersDatas', res.data) - if (newUrl.indexOf('绠$綉') !== -1 || newUrl.indexOf('鍥涢��') !== -1) { - var layer = that.loadGeojson(res.data, item) - that.layerArray[code] = layer - } + var layer = that.loadGeojson(res.data, item) + that.layerArray[code] = layer } } else { - that.layerArray[code].addTo(that.map) + var _layer = that.layerArray[code].addTo(that.map) + that.setZIndex(_layer) } } @@ -143,7 +142,8 @@ loadGeojson (res, opt) { var that = this var icon = opt.icon - const layergroup = that.L.featureGroup().addTo(that.map) + const featureGroup = that.L.featureGroup() + const featureList = [] const geojson = that.L.geoJSON(res.features, { style: function (feature) { return { @@ -152,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) { @@ -166,68 +166,85 @@ 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 || 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] + }, + 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(that.map) - }).addTo(layergroup) + }).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() + } } - return geojson } removeLayer (item) { -- Gitblit v1.8.0