From b85b0e9ea957fac745b9e7350cb0315578abef85 Mon Sep 17 00:00:00 2001
From: chenzeping <ChenZeping02609@163.com>
Date: 星期三, 10 三月 2021 17:29:23 +0800
Subject: [PATCH] 修改报错
---
src/main.js | 6 -
src/components/plugin/PathDashFlow.js | 120 +++++++++++++++++------
src/conf/Styles.js | 4
src/components/panel/LegendPanel.vue | 2
src/components/helpers/ServiceLayerHelper.js | 149 ++++++++++++++++-------------
5 files changed, 174 insertions(+), 107 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) {
diff --git a/src/components/panel/LegendPanel.vue b/src/components/panel/LegendPanel.vue
index 5412fae..a70ef75 100644
--- a/src/components/panel/LegendPanel.vue
+++ b/src/components/panel/LegendPanel.vue
@@ -4,7 +4,7 @@
<i class="el-icon-more-outline"></i>
<span>鍥句緥</span>
</div>
- <transition name='fade'>
+ <transition name="fade">
<div class="legend-content" v-show="legendControl">
<div class="legend-content-box" v-for="(item,index) in legendContents" :key="index">
<p>{{ item.title }}</p>
diff --git a/src/components/plugin/PathDashFlow.js b/src/components/plugin/PathDashFlow.js
index 1432190..a868066 100644
--- a/src/components/plugin/PathDashFlow.js
+++ b/src/components/plugin/PathDashFlow.js
@@ -1,43 +1,97 @@
// @class PolyLine
-import * as L from 'leaflet'
+const L = window.L
+L.Path.mergeOptions({
+ // @option dashSpeed: Number
+ // The speed of the dash array, in pixels per second
+ dashSpeed: 0
+})
-const DashFlow = () => {
- L.Path.mergeOptions({
- // @option dashSpeed: Number
- // The speed of the dash array, in pixels per second
- dashSpeed: 0
- })
+var _originalBeforeAdd = L.Path.prototype.beforeAdd
- var _originalBeforeAdd = L.Path.prototype.beforeAdd
+L.Path.include({
- L.Path.include({
+ beforeAdd: function (map) {
+ _originalBeforeAdd.bind(this)(map)
- beforeAdd: function (map) {
- _originalBeforeAdd.bind(this)(map)
-
- if (this.options.dashSpeed) {
- this._lastDashFrame = performance.now()
- this._dashFrame = L.Util.requestAnimFrame(this._onDashFrame.bind(this))
- }
- },
-
- _onDashFrame: function () {
- if (!this._renderer) {
- return
- }
-
- var now = performance.now()
- var dashOffsetDelta = (now - this._lastDashFrame) * this.options.dashSpeed / 1000
-
- this.options.dashOffset = Number(this.options.dashOffset || 0) + dashOffsetDelta
- this._renderer._updateStyle(this)
-
+ if (this.options.dashSpeed) {
this._lastDashFrame = performance.now()
-
this._dashFrame = L.Util.requestAnimFrame(this._onDashFrame.bind(this))
}
+ },
- })
-}
+ _onDashFrame: function () {
+ if (!this._renderer) {
+ return
+ }
-export default { DashFlow }
+ var now = performance.now()
+ var dashOffsetDelta = (now - this._lastDashFrame) * this.options.dashSpeed / 1000
+
+ this.options.dashOffset = Number(this.options.dashOffset || 0) + dashOffsetDelta
+ this._renderer._updateStyle(this)
+
+ this._lastDashFrame = performance.now()
+
+ this._dashFrame = L.Util.requestAnimFrame(this._onDashFrame.bind(this))
+ },
+
+ _offDashFrame: function () {
+ L.Util.cancelAnimFrame(this._dashFrame)
+ },
+
+ onRemove: function () {
+ this._renderer._removePath(this)
+ this._offDashFrame()
+ }
+})
+
+// 閽堝Canvas娣诲姞dashOffset鍙傛暟锛岃В鍐矯anvas涓嬫棤娉曞疄鐜板姩鎬佺嚎闂
+L.Canvas.include({
+ _updateDashArray: function (layer) {
+ if (typeof layer.options.dashArray === 'string') {
+ var parts = layer.options.dashArray.split(/[, ]+/)
+ var dashArray = []
+ var dashValue
+ var i
+ for (i = 0; i < parts.length; i++) {
+ dashValue = Number(parts[i])
+ // Ignore dash array containing invalid lengths
+ if (isNaN(dashValue)) {
+ return
+ }
+ dashArray.push(dashValue)
+ }
+ layer.options._dashArray = dashArray
+ } else {
+ layer.options._dashArray = layer.options.dashArray
+ }
+
+ if (layer.options.dashOffset) {
+ layer.options._dashOffset = layer.options.dashOffset
+ }
+ },
+ _fillStroke: function (ctx, layer) {
+ var options = layer.options
+
+ if (options.fill) {
+ ctx.globalAlpha = options.fillOpacity
+ ctx.fillStyle = options.fillColor || options.color
+ ctx.fill(options.fillRule || 'evenodd')
+ }
+
+ if (options.stroke && options.weight !== 0) {
+ if (ctx.setLineDash) {
+ ctx.setLineDash((layer.options && layer.options._dashArray) || [])
+ }
+ if (layer.options._dashOffset) {
+ ctx.lineDashOffset = layer.options._dashOffset
+ }
+ ctx.globalAlpha = options.opacity
+ ctx.lineWidth = options.weight
+ ctx.strokeStyle = options.color
+ ctx.lineCap = options.lineCap
+ ctx.lineJoin = options.lineJoin
+ ctx.stroke()
+ }
+ }
+})
diff --git a/src/conf/Styles.js b/src/conf/Styles.js
index c94b60d..2061afb 100644
--- a/src/conf/Styles.js
+++ b/src/conf/Styles.js
@@ -5,8 +5,8 @@
color: '#73b2ff',
fillOpacity: 0.2,
opacity: 1,
- dashArray: '10,4',
- dashSpeed: -10,
+ dashArray: '5,5',
+ dashSpeed: -5,
size: [20, 20]
}
diff --git a/src/main.js b/src/main.js
index e9343a2..b2139c0 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,4 +1,4 @@
-import 'babel-polyfill'
+// import 'babel-polyfill'
import Vue from 'vue'
import App from './App.vue'
import router from './router'
@@ -10,11 +10,7 @@
import 'element-ui/lib/theme-chalk/index.css'
import 'leaflet/dist/leaflet.css'
import L from 'leaflet'
-import 'leaflet.markercluster'
-// import 'leaflet-canvas-markers'
-import './components/plugin/Leaflet.GridLayer.FadeOut'
-import './components/plugin/leaflet-canvas-markers'
Vue.config.productionTip = false
Vue.use(ElementUI)
--
Gitblit v1.8.0