From 0b0b09ff2285abf99e41d822d2b5c6f0ca0ee239 Mon Sep 17 00:00:00 2001
From: YANGDL <114714267@qq.com>
Date: 星期三, 10 三月 2021 10:17:51 +0800
Subject: [PATCH] 修复ie下不能显示的问题
---
src/main.js | 6 -
src/components/plugin/PathDashFlow.js | 120 +++++++++++++++++++++++++++++-----------
src/conf/Styles.js | 4
src/Sgis.js | 24 ++++---
4 files changed, 104 insertions(+), 50 deletions(-)
diff --git a/src/Sgis.js b/src/Sgis.js
index f736ba3..02831eb 100644
--- a/src/Sgis.js
+++ b/src/Sgis.js
@@ -4,15 +4,20 @@
import Editable from '@components/plugin/Editable'
import PathDrag from '@components/plugin/PathDrag'
-import MagicMarker from '@components/plugin/MagicMarker'
-import WmtsSupport from '@components/plugin/wmts_plugins'
+// import MagicMarker from '@components/plugin/MagicMarker'
+// import WmtsSupport from '@components/plugin/wmts_plugins'
import MapConfig from '@/conf/MapConfig'
-import DashFlow from '@components/plugin/PathDashFlow'
-import CanvasMarkers from '@components/plugin/CanvasMarkers'
-import FullScreen from '@components/plugin/FullScreen'
+import '@components/plugin/PathDashFlow' // 娴佸姩绾垮浘
+// import CanvasMarkers from '@components/plugin/CanvasMarkers'
+// import FullScreen from '@components/plugin/FullScreen'
import DownLoad from '@components/plugin/DownLoad'
+import 'leaflet.markercluster'
+// import 'leaflet-canvas-markers'
+import './components/plugin/Leaflet.GridLayer.FadeOut' // 鐡︾墖鍥惧眰鍒囨崲娣″叆娣″嚭
+
+import './components/plugin/leaflet-canvas-markers' // 鐢诲竷marker
let map = null
const L = window.L
const initMap = (div) => {
@@ -23,13 +28,12 @@
// Leaflet鎵╁睍浠ｇ爜
Editable.init(L) // 鍥惧眰缂栬緫
PathDrag.init(L) // 璺緞鎷栨嫿
- MagicMarker.init(L) // 鍔ㄧ敾Marker
- WmtsSupport.init(L) // 鎵╁睍锛屼娇鏀寔WMTS
+ // MagicMarker.init(L) // 鍔ㄧ敾Marker
+ // WmtsSupport.init(L) // 鎵╁睍锛屼娇鏀寔WMTS
// CustomPopup.init(L) // 鑷畾涔夊脊鍑烘
- DashFlow.DashFlow(L) // 娴佸姩绾垮浘
- CanvasMarkers.init(L)// 鐢诲竷鍥惧眰
+ // CanvasMarkers.init(L)// 鐢诲竷鍥惧眰
// 鍏ㄥ睆
- FullScreen.init(L)
+ // FullScreen.init(L)
// 涓嬭浇
DownLoad.init(L)
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 1d1c6ac..17309bb 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