修改图层控制

徐旺旺

2021-02-25 4627fc484c1697ca7e9f05f9e5d2d85341b526fe

 src/components/helpers/ServiceLayerHelper.js

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

class ServiceLayerHelper {
  constructor (options) {
@@ -14,7 +14,7 @@
    this.tileLayersWMTSArray = [] // 初始的WMTS集
    this.tileLayersTileArray = [] // 初始的Tile集
    this.tileLayersWMSArray = [] // 初始的WMS集
    this.geojsonArray = [] // 初始的geojson集
    this.geojsonArray = {} // 初始的geojson集
    this.layerConfig = {}
    this.regex = /\{(.+?)\}/g // 匹配{}
  }
@@ -51,73 +51,49 @@
          this.loadTileLayer(opt, isAddToMap)
          this.tileLayersTileArray.push(opt)
        } else if (opt.type === 'geojson') {
          this.loadGeojson(opt)
          this.loadGeojsonLayers(opt)
        }
      }
    }
  }

  loadGeojson (options) {
  loadGeojsonLayers (options) {
    var url = options.url
    var layers = options.layers
    var matches = this.regex.exec(url)
    for (var i = 0; i < layers.length; i++) {
      var layer = layers[i]
      var matchValue = layer[matches[1]]
      var checked = layer.checked
      var geomtype = layer.geomtype
      if (!checked) {
        continue
      if (checked) {
        this.loadGeojsonLayer(url, layer)
      }
      var newUrl = url.replace(this.regex, matchValue)
      var that = this
    }
  }

  loadGeojsonLayer (url, layer) {
    var matches = this.regex.exec(url)
    var matchValue = layer[matches[1]]
    var code = layer.code
    var newUrl = url.replace(this.regex, matchValue)
    var that = this
    if (!that.geojsonArray[code]) {
      AjaxUtils.GetDataAsynByUrl(newUrl, {}, function (res) {
        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
        }
        store.commit('setMapObj', res)
        var layer = that.loadGeojson(res)
        that.geojsonArray[code] = layer
      })
    }
  }

  /**
   * 加载点数据
   * @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, {
     * 加载点数据
     * @param res
     */
  loadGeojson (res) {
    var that = this
    const featureGroup = that.L.featureGroup([], {
      attribution: { id: '123' }
    }).addTo(that.map)
    that.L.geoJSON(res.features, {
      style: function (feature) {
        return {
          fill: true,
@@ -130,10 +106,30 @@
          dashSpeed: -10
        }
      },
      minZoom: 10
      pointToLayer: function (geoJsonPoint, latlng) {
        return that.L.canvasMarker(latlng,
          {
            radius: 20,
            img: {
              url: 'assets/images/map/marker-icon.png',
              size: [20, 20]
            }
          })
      }
    }).bindPopup(function (layer) {
      // return layer.feature.properties.linenumber
    }).addTo(this.map)
    }).addTo(featureGroup)
    featureGroup.bringToBack()
    return featureGroup
  }

  removeLayer (item) {
    var code = item.code
    var layer = this.geojsonArray[code]
    if (layer) {
      this.map.removeLayer(layer)
      delete this.geojsonArray[code]
    }
  }

  /**