修复图层重复加载、图层动画颜色不一致、地图数据缺失问题

徐旺旺

2021-04-19 0547901378595158423e4f992ad889abe9d0aad0

修复图层重复加载、图层动画颜色不一致、地图数据缺失问题

 src/components/LayerController/logic/PipeLineAnimal.js

@@ -11,20 +11,22 @@
    for (var i = 0; i < layers.length; i++) {
      const config = layers[i]
      const code = config.code
      const styles = config.styles
      // window.layerFactory.show(config)
      const layer = window.layerFactory.layers[code]
      if (layer) {
        if (layer.eachLayer) {
          layer.eachLayer(function (layer) {
            var newStyles = Object.assign(STYLES, styles)
            layer.setStyle({
              fill: STYLES.FILL,
              weight: STYLES.WEIGHT,
              fillColor: STYLES.FILL_COLOR,
              color: STYLES.COLOR,
              fillOpacity: STYLES.FILL_OPACITY,
              opacity: STYLES.OPACITY,
              dashArray: STYLES.DASH_ARRAY,
              dashSpeed: STYLES.DASH_SPPED
              fill: newStyles.FILL,
              weight: newStyles.WEIGHT,
              fillColor: newStyles.FILL_COLOR,
              color: newStyles.COLOR,
              fillOpacity: newStyles.FILL_OPACITY,
              opacity: newStyles.OPACITY,
              dashArray: newStyles.DASH_ARRAY,
              dashSpeed: newStyles.DASH_SPPED
            })
          })
          // 重新添加到地图上，动画才有效果
@@ -33,33 +35,9 @@
        }
      }
    }
    /* window.$layer.iframe({
      content: {
        content: publicBounced,
        parent: this,
        data: {
          info: this.info,
          fn: () => {
            alert(1)
          }
        }
      },
      area: ['901px', '101px'],
      title: '这是一个标题这是一个标题这是一个标题这是一个标题',
      maxmin: true,
      shade: false,
      shadeClose: false,
      scrollbar: false,
      resize: true,
      btn: ['a', 'b'],
      cancel: () => {
        alert(2110)
      }
    }) */
  }

  this.destory = () => {
    console.log('destory!!!')
    const layers = LayerPipeLines.layers
    for (var i = 0; i < layers.length; i++) {
      const config = layers[i]

 src/components/LayerController/service/LayerFactory.js

@@ -2,7 +2,7 @@
import BusiLayerService from './BusiLayerService'
import WmsLayerService from './WmsLayerService'
import EventLayerService from './EventLayerService'

import { clone } from '../../../utils/utils'
class LayerFactory {
  constructor (options) {
    this.L = options.L
@@ -112,15 +112,37 @@
  hide (config) {
    var layer = this.layers[config.code]
    layer && this.map.removeLayer(layer)
    this.load(config)
    // this.load(config)
  }

  toggle (code) {

  }

  flyByLayerId (code, id) {
    const layer = this.layers[code]
  /**
   *
   * 根据传的 feature对象定位
   * @param code
   * @param feature
   */
  flyByFeature (feature, code) {
    const type = feature.geometry.type
    var point = []
    switch (type) {
      case 'Point':
        point = clone(feature.geometry.coordinates)
        break
      case 'MultiLineString':
        var coordinates = feature.geometry.coordinates
        point = clone(coordinates[parseInt(coordinates.length / 2)][0])
        break
    }
    window.map.flyTo(point.reverse(), 15)
    code && this.openPopup(code, feature.id)
  }

  openPopup (layerId, id) {
    const layer = this.layers[layerId]

    if (layer.eachLayer) {
      layer.eachLayer(function (layer) {

 src/components/panel/topicSearch/SewersSearch.vue

@@ -137,9 +137,7 @@
      }
    },
    handleLocation (val) {
      const bound = this.L.geoJSON([val], {}).getBounds()
      window.map.flyToBounds(bound)
      window.layerFactory.flyByLayerId(this.form.dataType.code, val.id)
      window.layerFactory.flyByFeature(val, this.form.dataType.code)
      // layer && layer.openPopup()
    }
  }

 src/conf/layers/LayerPipeLines.js

@@ -19,7 +19,7 @@
      sname: '管网',
      checked: false,
      // wfs: WFS_URL + '?TYPENAME=管网&FILTER=<Filter xmlns="http://www.opengis.net/ogc"><PropertyIsEqualTo><PropertyName>mediumtype</PropertyName><Literal>雨水管线</Literal></PropertyIsEqualTo></Filter>',
      wfs: 'http://xearth.cn:6240/geoserver/sewer/wfs?typeName=sewer:pipeline&maxFeatures=50&outputFormat=application%2Fjson&cql_filter=linenumtype=\'雨水管线\'',
      wfs: 'http://xearth.cn:6240/geoserver/sewer/wfs?typeName=sewer:pipeline&maxFeatures=500&outputFormat=application%2Fjson&cql_filter=linenumtype=\'雨水管线\'',
      icon: 'sewers/雨水线.png',
      color: '#0070ff',
      minZoom: 13,
@@ -43,7 +43,7 @@
      checked: false,
      minZoom: 13,
      color: '#ffaa00',
      wfs: 'http://xearth.cn:6240/geoserver/sewer/wfs?typeName=sewer:pipeline&maxFeatures=50&outputFormat=application%2Fjson&cql_filter=mediumtype=\'含油污水\'',
      wfs: 'http://xearth.cn:6240/geoserver/sewer/wfs?typeName=sewer:pipeline&maxFeatures=500&outputFormat=application%2Fjson&cql_filter=mediumtype=\'含油污水\'',
      styles: {
        COLOR: '#ffaa00',
        FILL_COLOR: '#ffaa00'
@@ -96,7 +96,7 @@
      checked: false,
      minZoom: 13,
      color: '#a8a800',
      wfs: 'http://xearth.cn:6240/geoserver/sewer/wfs?typeName=sewer:pipeline&maxFeatures=50&outputFormat=application%2Fjson&cql_filter=mediumtype=\'生产污水\'',
      wfs: 'http://xearth.cn:6240/geoserver/sewer/wfs?typeName=sewer:pipeline&maxFeatures=500&outputFormat=application%2Fjson&cql_filter=mediumtype=\'生产污水\'',
      styles: {
        COLOR: '#a8a800',
        FILL_COLOR: '#a8a800'

 src/utils/utils.js

@@ -22,3 +22,38 @@
  // eslint-disable-next-line no-unreachable
  return url + '\n' + arg + '\n' + argValue
}

/**
 * 复制对象
 * @param obj
 * @returns {{}}
 */
export function clone (obj) {
  var o
  // 如果  他是对象object的话  , 因为null,object,array  也是'object';
  if (typeof obj === 'object') {
    // 如果  他是空的话
    if (obj === null) {
      o = null
    } else {
      // 如果  他是数组arr的话
      if (obj instanceof Array) {
        o = []
        for (var i = 0, len = obj.length; i < len; i++) {
          o.push(clone(obj[i]))
        }
      } else {
        // 如果  他是对象object的话
        o = {}
        for (var j in obj) {
          o[j] = clone(obj[j])
        }
      }
    }
  } else {
    o = obj
  }
  return o
}

export default clone