修改图层控制

徐旺旺

2021-02-23 239a629af8c75b80d5c0e50fcd27b932655b7b04

 src/components/helpers/ServiceLayerHelper.js

@@ -3,6 +3,7 @@
 * 创建图层相关的类
 */
import AjaxUtils from '@/utils/AjaxUtils'
import { GEOM_TYPE } from '../../conf/Constants'

class ServiceLayerHelper {
  constructor (options) {
@@ -27,7 +28,7 @@
     */
  initServiceLayers (layerConfig) {
    this.layerConfig = layerConfig
    this._loadLayers(layerConfig.mapConfig.Layers.LayerSewersLine)
    this.loadLayers(layerConfig.mapConfig.Layers.LayerSewersLine)
  }

  /**
@@ -35,7 +36,7 @@
     * @param {*} mapConfig
     * @param {*} isAddToMap
     */
  _loadLayers (layerConfig, isAddToMap = true) {
  loadLayers (layerConfig, isAddToMap = true) {
    console.debug('ServiceLayerHelper加载参数：', layerConfig)
    for (let i = 0, len = layerConfig.length; i < len; ++i) {
      const opt = layerConfig[i]
@@ -64,35 +65,78 @@
      var layer = layers[i]
      var matchValue = layer[matches[1]]
      var checked = layer.checked
      var geomtype = layer.geomtype
      if (!checked) {
        continue
      }
      var newUrl = url.replace(this.regex, matchValue)
      var that = this
      AjaxUtils.GetDataAsynByUrl(newUrl, {}, function (res) {
        // let geojsondata =    L.geoJSON(test.features,{
        that.L.geoJSON(res.features, {
          style: function (feature) {
            return {
              fill: true,
              weight: 2,
              fillColor: '#06cccc',
              color: '#06cccc',
              fillOpacity: 0.2,
              opacity: 0.8,
              dashArray: '10,4',
              dashSpeed: -10
            }
          },
          minZoom: 10
        }).bindPopup(function (layer) {
          // return layer.feature.properties.linenumber
        }).addTo(that.map)
        switch (geomtype) {
          case GEOM_TYPE.POINT :
            that.loadPointGeojson(res)
            break
          case GEOM_TYPE.LINE :
            that.loadLineGeojson(res)
            break
          case GEOM_TYPE.POLYGON :
            break
          default:
            that.loadLineGeojson(res)
            break
        }
      })
    }
  }

  /**
   * 加载点数据
   * @param res
   */
  loadPointGeojson (res) {
    this.L.geoJSON(res.features, {
      pointToLayer: function (geoJsonPoint, latlng) {
        return this.L.canvasMarker(latlng,
          {
            radius: 20,
            prevLatlng: this.L.latLng(51.503, -0.09), // previous point
            img: {
              url: './images/beng.png',
              size: [20, 20],
              rotate: 90
            }
          })
      }
    }).bindPopup(function (layer) {
      // return layer.feature.properties.linenumber
    }).addTo(this.map)
  }

  /**
   * 加载线数据
   * @param res
   */
  loadLineGeojson (res) {
    this.L.geoJSON(res.features, {
      style: function (feature) {
        return {
          fill: true,
          weight: 2,
          fillColor: '#06cccc',
          color: '#06cccc',
          fillOpacity: 0.2,
          opacity: 0.8,
          dashArray: '10,4',
          dashSpeed: -10
        }
      },
      minZoom: 10
    }).bindPopup(function (layer) {
      // return layer.feature.properties.linenumber
    }).addTo(this.map)
  }

  /**
     * 往地图中加入一个WMTS服务
     * @param {}} options
     * @param {*} isAddToMap