统计表,指标,预报警表格弹框公共修改,管线分析功能

ChenZeping

2021-04-29 c56e506fd34c58209240e97fc29043639fae5d19

 src/components/LayerController/service/WfsLayerService.js

@@ -1,9 +1,9 @@
/**
 * 加载业务数据图层
 */

import styles from '../../../conf/Styles'
import { STYLES } from '../../../conf/Constants'
import AjaxUtils from '../../../utils/AjaxUtils'
import { setZIndex } from '../../../utils/utils'

class WfsLayerService {
  constructor (config) {
@@ -11,8 +11,8 @@
    this.params = {
      version: '1.0.0',
      REQUEST: 'getfeature',
      OUTPUTFORMAT: 'json',
      maxFeatures: 20000
      OUTPUTFORMAT: 'json'
      // maxFeatures: 20000
    }
    this.popupComp = window.popupComp
    this.L = window.L
@@ -21,60 +21,78 @@
  }

  init (layer) {
    this.layer = layer
    const wfsUrl = this.config.wfs
    if (wfsUrl) {
      AjaxUtils.get4JsonDataByUrl(wfsUrl, this.params, (res) => this.draw(layer, res.data.features))
      this.loadData(wfsUrl)
    }
  }

  draw (layer, features) {
    const icon = this.config.icon
    const geojson = this.L.geoJSON(features, {
      style: function (feature) {
        return {
          fill: styles.defaultLineStyle.fill,
          weight: styles.defaultLineStyle.weight,
          fillColor: styles.defaultLineStyle.fillColor,
          color: styles.defaultLineStyle.color,
          fillOpacity: styles.defaultLineStyle.fillOpacity,
          opacity: styles.defaultLineStyle.opacity,
          dashArray: styles.defaultLineStyle.dashArray,
          dashSpeed: styles.defaultLineStyle.dashSpeed
        }
      },
      pointToLayer: (geoJsonPoint, latlng) => {
        return this.L.canvasMarker(latlng,
          {
            img: {
              // url: 'assets/images/map/marker-icon.png',
              url: '/assets/images/map/' + icon,
              size: styles.defaultLineStyle.size
            }
  loadData (wfsUrl) {
    AjaxUtils.get4JsonDataByUrl(wfsUrl, this.params, (res) => {
      this.draw(res.data.features)
    })
  }

  draw (features) {
    if (features && features.length > 0) {
      const icon = this.config.icon
      const styles = this.config.styles
      Object.assign(STYLES, styles)
      const geojsonLayer = this.L.geoJSON(features, {
        style: function (feature) {
          return {
            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
          }
        },
        pointToLayer: (geoJsonPoint, latlng) => {
          return this.L.canvasMarker(latlng,
            {
              img: {
                // url: 'assets/images/map/marker-icon.png',
                url: '/assets/images/map/' + icon,
                size: STYLES.ICON_SIZE
              }
            })
        },
        onEachFeature: (feature, layer) => {
          /* layer.bindPopup((layer) => {
            this.popupComp.setDatas(layer)
            this.popupComp.setShow()
            return this.popupComp.$el
          }, {
            className: 's-map-popup',
            minWidth: 300,
            closeButton: false,
            autoClose: false
          }) */
          layer.bindTooltip((layer) => this.tooltipListener(layer), {
            direction: 'bottom',
            offset: [0, 15],
            sticky: true
          })
      },
      onEachFeature: (feature, layer) => {
        layer.bindPopup((layer) => {
          this.popupComp.setDatas(layer)
          this.popupComp.setShow()
          return this.popupComp.$el
        }, {
          className: 's-map-popup',
          minWidth: 300,
          closeButton: false,
          autoClose: false
        })
          .bindTooltip((layer) => this.tooltipListener(layer), { direction: 'bottom', offset: [0, 15], sticky: true })
          .on('mouseover', (e) => this.mouseOverListener(e, layer)).on('mouseout', (e) => this.mouseOutListener(e, layer))
      }
    }).addTo(layer)
    return geojson
            .on('mouseover', (e) => this.mouseOverListener(e, layer)).on('mouseout', (e) => this.mouseOutListener(e, layer))
        }
      }).addTo(this.layer)
      setZIndex(geojsonLayer)
    }
  }

  mouseOverListener (e, layer) {
    const icon = this.config.icon
    const type = e.target.feature.geometry.type
    if (type === 'LineString' || type === 'MultiLineString') {
      layer.setStyle({ weight: 8, color: '#00ffff' })
      layer.setStyle({
        weight: 8,
        color: '#00ffff'
      })
    } else if (type === 'Point' || type === 'MultiPoint') {
      layer.setStyle({
        img: {
@@ -90,13 +108,16 @@
    const icon = this.config.icon
    const type = e.target.feature.geometry.type
    if (type === 'LineString' || type === 'MultiLineString') {
      layer.setStyle({ weight: styles.defaultLineStyle.weight, color: styles.defaultLineStyle.color })
      layer.setStyle({
        weight: STYLES.WEIGHT,
        color: STYLES.COLOR
      })
    }
    if (type === 'Point' || type === 'MultiPoint') {
      layer.setStyle({
        img: {
          url: '/assets/images/map/' + icon,
          size: styles.defaultLineStyle.size
          size: STYLES.ICON_SIZE
        }
      })
    }
@@ -116,4 +137,5 @@
    return name
  }
}

export default WfsLayerService