Merge branch 'develop' of http://xearth.cn:6600/r/wuyushui/SewerAndRainNetw...

ChenZeping02609

2021-05-13 4cabc76013fde2c6f20ef6efb8e0e1e1a94a8f36

 src/components/LayerController/service/WmsLayerService.js

@@ -1,5 +1,7 @@
import AjaxUtils from '../../../utils/AjaxUtils'
import { PIPELINE_WMS } from '../../../conf/Constants'
import Popup from '@views/popup/Popup'
import WmsLayerList from '../dataset/WmsLayerList'

/**
 * todo 得考虑一个图层配置了多个 wmsLayers的情况
@@ -26,64 +28,74 @@
    // 存放getfeatureinfo的图层组
    this.featureGroup = this.L.featureGroup({}).addTo(this.map)

    this.layers = []
    this.wmsLayerList = new WmsLayerList()
    for (var i = 0; i < layersConfig.length; i++) {
      const config = layersConfig[i]
      for (var k in config) {
        if (k === 'wmsLayers') {
          this.layers.push(config[k])
        }
      }
      this.wmsLayerList.addConfig(config)
    }
    this.load()
  }

  init () {
    if (this.layers) {
      this.load(this.layers)
      this.clickListener()
    }
    this.clickListener()
  }

  add (config) {
    const wmsLayers = config.wmsLayers
    if (wmsLayers) {
      if (this.layers.indexOf(wmsLayers) < 0) {
        this.layers.push(config.wmsLayers)
        this.wmsLayer.setParams({ layers: this.layers.join(',') })
      }
    this.wmsLayerList.addConfig(config)
    const layers = this.wmsLayerList.getLayers()
    const filter = this.wmsLayerList.getFilters()
    const params = {}
    if (filter) {
      params.cql_filter = filter
    }
    if (layers) {
      params.layers = layers
    }
    this.wmsLayer.setParams(params)
  }

  remove (config) {
    const wmsLayers = config.wmsLayers
    for (var i = 0; i < this.layers.length; i++) {
      const layerName = this.layers[i]
      if (wmsLayers === layerName) {
        this.layers.splice(i, 1)
      }
    console.log(config)
    this.wmsLayerList.remove(config.typeName, config.filter)
    const layers = this.wmsLayerList.getLayers()
    const filter = this.wmsLayerList.getFilters()
    const params = { layers: layers }
    if (filter) {
      params.cql_filter = filter
    }
    this.wmsLayer.setParams({ layers: this.layers.join(',') })
    this.wmsLayer.setParams(params)
  }

  load (layers) {
    this.wmsLayer = this.L.tileLayer.wms(PIPELINE_WMS, {
  load () {
    const layers = this.wmsLayerList.getLayers()
    const filter = this.wmsLayerList.getFilters()
    const params = {
      format: 'image/png', // 返回的数据格式
      transparent: true,
      layers: layers.join(',')
    }).addTo(this.map)
      BBOX: this.map.getBounds().toBBoxString()
    }
    if (layers) {
      params.layers = layers
    }
    if (filter.length > 0) {
      params.cql_filter = filter
    }
    this.wmsLayer = this.L.tileLayer.wms(PIPELINE_WMS, params).addTo(this.map)
  }

  clickListener () {
    if (this.layers && this.layers.length > 0) {
      window.map.on('click', (e) => {
        this.featureGroup.clearLayers()
        var point = this.map.latLngToContainerPoint(e.latlng, this.map.getZoom())
        var size = this.map.getSize()
        // const bbox = this.L.latLngBounds(this.L.latLng(e.latlng.lng, e.latlng.lat)).toBBoxString()

    window.map.on('click', (e) => {
      // console.log(e)
      window.layerFactory.clearHighlight()
      this.featureGroup.clearLayers()
      var point = this.map.latLngToContainerPoint(e.latlng, this.map.getZoom())
      var size = this.map.getSize()
      // const bbox = this.L.latLngBounds(this.L.latLng(e.latlng.lng, e.latlng.lat)).toBBoxString()
      const layers = this.wmsLayerList.getLayers()
      if (layers.length > 0) {
        const params = Object.assign({
          LAYERS: this.layers.join(','),
          QUERY_LAYERS: this.layers.join(','),
          LAYERS: layers,
          QUERY_LAYERS: layers,
          WIDTH: size.x,
          HEIGHT: size.y,
          X: Math.round(point.x),
@@ -93,13 +105,13 @@
        AjaxUtils.get4JsonDataByUrl(PIPELINE_WMS, params, (res) => {
          const features = res.data.features
          /**
         * {
         *     title: 'New Tab',
         *     name: newTabName,
         *     content: 'New Tab content'
         * }
         * @type {*[]}
         */
           * {
           *     title: 'New Tab',
           *     name: newTabName,
           *     content: 'New Tab content'
           * }
           * @type {*[]}
           */
          const popupDatas = []
          if (features) {
            for (var i = 0; i < features.length; i++) {
@@ -108,7 +120,7 @@
              this.highlight(feature)
              // const coordinates = feature.geometry.coordinates
              popupDatas.push({
                title: properties.wellname || properties.devicename || properties.name,
                title: properties.wellname || properties.devicename || properties.name || properties.pipename,
                name: feature.id,
                content: properties
              })
@@ -118,7 +130,7 @@
            var myIcon = this.L.divIcon({ className: 'my-div-icon' })
            this.L.marker(e.latlng, {
              icon: myIcon
            }).addTo(this.featureGroup)
            }).addTo(this.featureGroup)/*
              .bindPopup((layer) => {
                this.popupComp.setDatas(popupDatas)
                this.popupComp.setShow()
@@ -129,14 +141,30 @@
                closeButton: false,
                autoClose: false
              })
              .openPopup()
              .openPopup() */

            if (window.layerFactory.clickSwitch) {
              window.$layer.open({
                content: {
                  content: Popup, // 组件
                  data: { // 传递的参数
                    datas: popupDatas
                  }
                },
                title: '', // 标题
                left: e.originalEvent.clientX,
                top: e.originalEvent.clientY
              })
            }
            // this.popupComp.setDatas(popupDatas)
            // this.popupComp.setShow()
          }
        })
      })
    }
      }
    })
  }

  reverse (feature) {
  reverseMultiLine (feature) {
    const coordinates = feature.geometry.coordinates
    var latlng = []
    for (var j = 0; j < coordinates.length; j++) {
@@ -151,15 +179,27 @@
    return latlng
  }

  reversePolyLine (feature) {
    const coordinates = feature.geometry.coordinates
    var latlng = []
    for (var j = 0; j < coordinates.length; j++) {
      const coordinate = coordinates[j]
      latlng.push(coordinate.reverse())
    }
    return latlng
  }

  highlight (feature) {
    const type = feature.geometry.type
    if (type === 'MultiLineString') {
      this.L.polyline(this.reverse(feature)).addTo(this.featureGroup)
      this.L.polyline(this.reverseMultiLine(feature), { color: 'red' }).addTo(this.featureGroup)
    } else if (type === 'Point') {
      var myIcon = this.L.divIcon({ className: 'my-div-icon' })
      this.L.marker(feature.geometry.coordinates.reverse(), {
        icon: myIcon
      }).addTo(this.featureGroup)
    } else if (type === 'LineString') {
      this.L.polyline(this.reversePolyLine(feature), { color: 'red' }).addTo(this.featureGroup)
    }
  }
}