派生自 wuyushui/SewerAndRainNetwork

seatonwan9
2021-05-21 4d265afb3419bd5cedc6f31ab78d570f6917b520
src/components/LayerController/service/WmsLayerService.js
@@ -1,8 +1,5 @@
import AjaxUtils from '../../../utils/AjaxUtils'
import { WMS_URL } from '../../../conf/Constants'
import Popup from '@views/popup/Popup'
import WmsLayerList from '../dataset/WmsLayerList'
import { highlight } from '../../helpers/LocateHelper'
/**
 * todo 得考虑一个图层配置了多个 wmsLayers的情况
@@ -22,6 +19,7 @@
      INFO_FORMAT: 'application/json',
      TRANSPARENT: true,
      FEATURE_COUNT: 50,
      maxZoom: 21,
      SRS: 'EPSG:4326',
      EXCEPTIONS: 'application/vnd.ogc.se_inimage'
    }
@@ -40,26 +38,49 @@
  }
  init () {
    this.clickListener()
  }
  addAll (configs) {
    for (let i = 0; i < configs.length; i++) {
      const config = configs[i]
      const layers = config.layers
      if (layers) {
        this.addAll(layers)
      }
      this.wmsLayerList.addConfig(config)
    }
    this.reload()
  }
  add (config) {
    this.wmsLayerList.addConfig(config)
    this.reload()
  }
  removeAll (configs) {
    for (let i = 0; i < configs.length; i++) {
      const config = configs[i]
      const layers = config.layers
      if (layers) {
        this.removeAll(layers)
      }
      this.wmsLayerList.remove(config.typeName, config.filter)
    }
    this.reload()
  }
  remove (config) {
    this.wmsLayerList.remove(config.typeName, config.filter)
    this.reload()
  }
  reload () {
    const layers = this.wmsLayerList.getLayers() || ''
    const filter = this.wmsLayerList.getFilters() || ''
    const params = {}
    params.cql_filter = filter
    params.layers = layers
    this.wmsLayer.setParams(params)
  }
  remove (config) {
    this.wmsLayerList.remove(config.typeName, config.filter)
    const layers = this.wmsLayerList.getLayers() || ''
    const filter = this.wmsLayerList.getFilters() || ''
    const params = { layers: layers }
    params.cql_filter = filter
    this.wmsLayer.setParams(params)
    this.wmsLayer.setParams(params, false)
  }
  load () {
@@ -68,6 +89,7 @@
    const params = {
      format: 'image/png', // 返回的数据格式
      transparent: true,
      maxZoom: 21,
      BBOX: this.map.getBounds().toBBoxString()
    }
    if (layers) {
@@ -77,91 +99,6 @@
      params.cql_filter = filter
    }
    this.wmsLayer = this.L.tileLayer.wms(WMS_URL, params).addTo(this.map)
  }
  clickListener () {
    window.map.on('click', (e) => {
      // console.log(e)
      window.mapManager.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()
      const filter = this.wmsLayerList.getFilters()
      if (layers.length > 0) {
        const params = Object.assign({
          LAYERS: layers,
          QUERY_LAYERS: layers,
          WIDTH: size.x,
          HEIGHT: size.y,
          X: Math.round(point.x),
          Y: Math.round(point.y),
          BBOX: this.map.getBounds().toBBoxString()
        }, this.params)
        if (filter.length > 0) {
          params.cql_filter = filter
        }
        AjaxUtils.get4JsonDataByUrl(WMS_URL, params, (res) => {
          const features = res.data.features
          /**
           * {
           *     title: 'New Tab',
           *     name: newTabName,
           *     content: 'New Tab content'
           * }
           * @type {*[]}
           */
          const popupDatas = []
          if (features) {
            for (var i = 0; i < features.length; i++) {
              const feature = features[i]
              const properties = feature.properties
              highlight(feature)
              // const coordinates = feature.geometry.coordinates
              popupDatas.push({
                title: properties.wellname || properties.devicename || properties.name || properties.pipename,
                name: feature.id,
                content: properties
              })
            }
          }
          if (popupDatas.length > 0) {
            var myIcon = this.L.divIcon({ className: 'my-div-icon' })
            this.L.marker(e.latlng, {
              icon: myIcon
            }).addTo(this.featureGroup)/*
              .bindPopup((layer) => {
                this.popupComp.setDatas(popupDatas)
                this.popupComp.setShow()
                return this.popupComp.$el
              }, {
                className: 's-map-popup',
                minWidth: 300,
                closeButton: false,
                autoClose: false
              })
              .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()
          }
        })
      }
    })
  }
}