修改报错

chenzeping

2021-03-10 b85b0e9ea957fac745b9e7350cb0315578abef85

修改报错

 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) {

 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>

 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参数，解决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
    }

    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)