替换wms服务初步

徐旺旺

2021-04-29 150a37f948214be4bd183b30f3f2865a6f1c519f

 src/components/LayerController/service/WfsLayerService.js

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

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
@@ -30,51 +30,55 @@

  loadData (wfsUrl) {
    AjaxUtils.get4JsonDataByUrl(wfsUrl, this.params, (res) => {
      console.log(res)
      this.draw(res.data.features)
    })
  }

  draw (features) {
    const icon = this.config.icon
    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)
            .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) {