管线分析

ChenZeping

2021-04-29 dc1884bc0afc8c4547a056c7ff0b9e78467b5dfc

 src/components/LayerController/service/WfsLayerService.js

@@ -1,8 +1,9 @@
/**
 * 加载业务数据图层
 * 加载wfs服务图层
 */
import { STYLES } from '../../../conf/Constants'
import AjaxUtils from '../../../utils/AjaxUtils'
import { setZIndex } from '../../../utils/utils'

class WfsLayerService {
  constructor (config) {
@@ -10,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
@@ -34,53 +35,64 @@
  }

  draw (features) {
    const icon = this.config.icon
    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
            }
    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
          })
      },
      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(this.layer)
    window.layerFactory.setZIndex(geojsonLayer)
          layer.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(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: {
@@ -96,7 +108,10 @@
    const icon = this.config.icon
    const type = e.target.feature.geometry.type
    if (type === 'LineString' || type === 'MultiLineString') {
      layer.setStyle({ weight: STYLES.WEIGHT, color: STYLES.COLOR })
      layer.setStyle({
        weight: STYLES.WEIGHT,
        color: STYLES.COLOR
      })
    }
    if (type === 'Point' || type === 'MultiPoint') {
      layer.setStyle({
@@ -122,4 +137,5 @@
    return name
  }
}

export default WfsLayerService