图层控制BUG修改

徐旺旺

2021-04-20 7d02699a0b2d425f3f9f3dd6af872bbc1d352710

图层控制BUG修改

 src/components/BaseNav/pipeline/AffiliatedFacilities.vue

@@ -3,7 +3,7 @@
    <div class="affiliatedFacilities">
        <el-dialog
                custom-class="affiliatedFacilities-dialog"
                :title="facilitiesParameter.properties.pipename"
                :title="facilitiesParameter && facilitiesParameter.properties.pipename"
                :visible.sync="dialogVisible"
                :append-to-body="true"
                :modal="false"

 src/components/LayerController/logic/Company.js

@@ -9,9 +9,9 @@

module.exports = function () {
  /**
     * 返回marker对象数组
     * @param L leaflet对象
     */
   * 返回marker对象数组
   * @param L leaflet对象
   */
  this.init = async (layer, L) => {
    // const SolidWasteIcon = this.SolidWasteIcon()
    this.animalService = new AnimalService({
@@ -19,7 +19,7 @@
      layer: layer
    })
    const res = await mapApi.getCompany()
    // console.log(res)
    console.log(res)
    const data = res.Result.DataInfo || {}
    for (let i = 0; i < data.length; i++) {
      // console.log(data[i])

 src/components/LayerController/logic/PipeLineAnimal.js

@@ -7,6 +7,9 @@

module.exports = function () {
  this.init = () => {
  }

  this.create = () => {
    const layers = LayerPipeLines.layers
    for (var i = 0; i < layers.length; i++) {
      const config = layers[i]
@@ -42,12 +45,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) {
            layer.resetStyle()
            var newStyles = Object.assign(STYLES, styles)
            layer.setStyle({
              fill: newStyles.FILL,
              weight: newStyles.WEIGHT,
              fillColor: newStyles.FILL_COLOR,
              color: newStyles.COLOR,
              fillOpacity: newStyles.FILL_OPACITY,
              opacity: newStyles.OPACITY
            })
          })
        }
      }

 src/components/LayerController/service/EventLayerService.js

File was deleted

 src/components/LayerController/service/LayerFactory.js

@@ -1,13 +1,13 @@
import WfsLayerService from './WfsLayerService'
import BusiLayerService from './BusiLayerService'
import WmsLayerService from './WmsLayerService'
import EventLayerService from './EventLayerService'
import { clone } from '../../../utils/utils'
import { logicMapper } from '../../../conf/Constants'
class LayerFactory {
  constructor (options) {
    this.L = options.L
    this.map = window.map
    this.layers = {}
    this.layersLogic = {}
  }

  init (layerConfig) {
@@ -17,14 +17,66 @@
        var config = layerConfig[i]
        var layers = config.layers
        var childLayer = config.childLayer
        var checked = config.checked
        layers && this.init(config.layers)
        childLayer && this.init(config.childLayer)

        var checked = config.checked
        checked && this.load(config)
        checked && this.toggleZoomByConfig(config)
        this.loadLogic(config)
        this.toggleZoomByConfig(config)
        checked && this.show(config)
      }
    }
  }

  loadLogic (config) {
    var code = config.code
    var wfs = config.wfs
    var wms = config.wms

    const file = logicMapper[code]
    var logic = this.layersLogic[code]
    if (!logic) {
      if (file) {
        var BusiLayer = require('../logic/' + file)
        logic = new BusiLayer()
      } else if (wfs) {
        logic = new WfsLayerService(config)
      } else if (wms) {
        logic = new WmsLayerService(config)
      }
    }
    this.layersLogic[code] = logic
    return logic
  }

  addLayer (config) {
    var code = config.code
    var logic = this.loadLogic(config)
    var layer = (logic && logic.initLayer && logic.initLayer((this.L))) || this.L.featureGroup({})
    layer.addTo(this.map)
    this.layers[code] = layer
    return layer
  }

  show (config) {
    var layer = this.layers[config.code]
    var logic = this.loadLogic(config)
    if (layer) {
      if (!this.map.hasLayer(layer)) {
        layer.addTo(this.map)
      }
    } else {
      logic && logic.init(this.addLayer(config), this.L)
    }
    logic && logic.create && logic.create()
  }

  hide (config) {
    const code = config.code
    const layer = this.layers[code]
    layer && this.map.removeLayer(layer)
    const logic = this.loadLogic(config)
    logic && logic.destory && logic.destory()
  }

  /**
@@ -63,65 +115,9 @@
    }
  }

  load (config) {
    var code = config.code
    var wfs = config.wfs
    var wms = config.wms
    var url = config.url
    var checked = config.checked
    // 判断是否已经加载过，加载过就 直接得到对象调用 显示函数
    var layer = this.layers[code]
    // todo if是不是太多了
    if (checked) {
      if ((wfs || wms || url)) {
        if (layer) {
          this.show(code)
        } else {
          layer = this.L.featureGroup({}).addTo(this.map)
          this.layers[code] = layer
        }
      }
      // 2. 判断类型
      if (wfs) {
        // 3. 实例化具体service
        var wfsLayerService = new WfsLayerService(config)
        wfsLayerService.init(layer)
        this.setZIndex(layer)
      } else if (wms) {
        var wmsLayerService = new WmsLayerService(config)
        wmsLayerService.init(layer)
      } else if (url) {
        var busiLayerService = new BusiLayerService(config)
        busiLayerService.init(layer)
      }
    }
    var eventLayerService = new EventLayerService(config)
    eventLayerService.init()
  }

  show (config) {
    var layer = this.layers[config.code]
    if (layer) {
      layer.addTo(this.map)
      this.setZIndex(layer)
    } else {
      this.load(config)
    }
  }

  hide (config) {
    var layer = this.layers[config.code]
    layer && this.map.removeLayer(layer)
    // this.load(config)
  }

  toggle (code) {

  }

  /**
   *
   * 根据传的 feature对象定位
   * 根据传的 feature对象定位，
   * @param code
   * @param feature
   */
@@ -134,7 +130,7 @@
        break
      case 'MultiLineString':
        var coordinates = feature.geometry.coordinates
        point = clone(coordinates[parseInt(coordinates.length / 2)][0])
        point = coordinates[parseInt(coordinates.length / 2)][0]
        break
    }
    window.map.flyTo(point.reverse(), 15)
@@ -189,30 +185,6 @@
      layer.eachLayer(function (layer) {
        console.log(layer)
      })
    }
  }

  /**
     * todo 这里无效，貌似是因为geojson加载到地图也是个layergroup
     *
     * 设置index,线在最下面，点在上面
     * @param layerGroup 图层组
     */
  setZIndex (layer) {
    if (Array.isArray(layer)) {
      for (var i = 0; i < layer.length; i++) {
        this.setZIndex(layer[i])
      }
    } else {
      if (layer.getLayers) {
        this.setZIndex(layer.getLayers())
      } else {
        if (layer.feature && (layer.feature.geometry.type === 'LineString' || layer.feature.geometry.type === 'MultiLineString')) {
          layer.bringToBack && layer.bringToBack()
        } else {
          layer.bringToFront && layer.bringToFront()
        }
      }
    }
  }
}

 src/components/LayerController/service/WfsLayerService.js

@@ -3,6 +3,7 @@
 */
import { STYLES } from '../../../conf/Constants'
import AjaxUtils from '../../../utils/AjaxUtils'
import { setZIndex } from '../../../utils/utils'

class WfsLayerService {
  constructor (config) {
@@ -75,7 +76,7 @@
          .on('mouseover', (e) => this.mouseOverListener(e, layer)).on('mouseout', (e) => this.mouseOutListener(e, layer))
      }
    }).addTo(this.layer)
    window.layerFactory.setZIndex(geojsonLayer)
    setZIndex(geojsonLayer)
  }

  mouseOverListener (e, layer) {

 src/utils/utils.js

@@ -56,4 +56,27 @@
  return o
}

/**
 *
 * 设置index,线在最下面，点在上面
 * @param layerGroup 图层组
 */
export function setZIndex (layer) {
  if (Array.isArray(layer)) {
    for (var i = 0; i < layer.length; i++) {
      setZIndex(layer[i])
    }
  } else {
    if (layer.getLayers) {
      setZIndex(layer.getLayers())
    } else {
      if (layer.feature && (layer.feature.geometry.type === 'LineString' || layer.feature.geometry.type === 'MultiLineString')) {
        layer.bringToBack && layer.bringToBack()
      } else {
        layer.bringToFront && layer.bringToFront()
      }
    }
  }
}

export default clone