修复ie下不能显示的问题

YANGDL

2021-03-10 0b0b09ff2285abf99e41d822d2b5c6f0ca0ee239

修复ie下不能显示的问题

 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)


 src/components/plugin/PathDashFlow.js

@@ -1,7 +1,5 @@
// @class PolyLine
import * as L from 'leaflet'

const DashFlow = () => {
const L = window.L
  L.Path.mergeOptions({
    // @option dashSpeed: Number
    // The speed of the dash array, in pixels per second
@@ -35,9 +33,65 @@
      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参数，解决Canvas下无法实现动态线问题
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
}

export default { DashFlow }
    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()
    }
  }
})

 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]
}


 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)