Merge remote-tracking branch 'origin/master'

YANGDL

2021-02-25 6cdcf30b52502fa2b7db21064c40b7193bf7e25f

 src/components/helpers/ServiceLayerHelper.js

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

class ServiceLayerHelper {
  constructor (options) {
@@ -12,7 +14,9 @@
    this.tileLayersWMTSArray = [] // 初始的WMTS集
    this.tileLayersTileArray = [] // 初始的Tile集
    this.tileLayersWMSArray = [] // 初始的WMS集
    this.mapConfig = {}
    this.geojsonArray = [] // 初始的geojson集
    this.layerConfig = {}
    this.regex = /\{(.+?)\}/g // 匹配{}
  }

  getTileLayer (code) {
@@ -22,9 +26,9 @@
  /**
     * 根据配置文件初始化业务底图
     */
  initServiceLayers (mapConfig) {
    this.mapConfig = mapConfig
    this._loadLayers(mapConfig)
  initServiceLayers (layerConfig) {
    this.layerConfig = layerConfig
    this.loadLayers(layerConfig.mapConfig.Layers.LayerSewersLine)
  }

  /**
@@ -32,30 +36,104 @@
     * @param {*} mapConfig
     * @param {*} isAddToMap
     */
  _loadLayers (mapConfig, isAddToMap = true) {
    console.debug('ServiceLayerHelper加载参数：', mapConfig)
    for (let i = 0, len = mapConfig.mapConfig.ServiceLayers.length; i < len; ++i) {
      const opt = mapConfig.mapConfig.ServiceLayers[i]
      this.setArray(opt)
      if (opt.type === 'wmts') {
        opt.checked && this.loadWmtsLayer(opt, isAddToMap, mapConfig.mapConfig.ServiceLayers[i])
      } else if (opt.type === 'wms') {
        opt.checked && this.loadWmsLayer(opt, isAddToMap, mapConfig.mapConfig.ServiceLayers[i])
      } else if (opt.type === 'tile') {
        opt.checked && this.loadTileLayer(opt, isAddToMap, mapConfig.mapConfig.ServiceLayers[i])
  loadLayers (layerConfig, isAddToMap = true) {
    console.debug('ServiceLayerHelper加载参数：', layerConfig)
    for (let i = 0, len = layerConfig.length; i < len; ++i) {
      const opt = layerConfig[i]
      if (opt.checked) {
        if (opt.type === 'wmts') {
          this.loadWmtsLayer(opt, isAddToMap)
          this.tileLayersWMTSArray.push(opt)
        } else if (opt.type === 'wms') {
          this.loadWmsLayer(opt, isAddToMap)
          this.tileLayersWMSArray.push(opt)
        } else if (opt.type === 'tile') {
          this.loadTileLayer(opt, isAddToMap)
          this.tileLayersTileArray.push(opt)
        } else if (opt.type === 'geojson') {
          this.loadGeojson(opt)
        }
      }
    }
  }

  setArray (opt) {
    var type = opt.type
    if (type === 'wmts') {
      this.tileLayersWMTSArray.push(opt)
    } else if (type === 'wms') {
      this.tileLayersWMSArray.push(opt)
    } else if (type === 'tile') {
      this.tileLayersTileArray.push(opt)
  loadGeojson (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
      }
      var newUrl = url.replace(this.regex, matchValue)
      var that = this
      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
        }
      })
    }
  }

  /**
   * 加载点数据
   * @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)
  }

  /**
@@ -63,9 +141,9 @@
     * @param {}} options
     * @param {*} isAddToMap
     */
  loadWmtsLayer (options, isAddToMap = true, config) {
  loadWmtsLayer (options, isAddToMap = true) {
    const layer = this.L.tileLayer(options.url, options.option)
    layer.config = config
    layer.config = options

    if (isAddToMap) {
      layer.addTo(this.map)
@@ -78,9 +156,9 @@
     * @param {}} options
     * @param {*} isAddToMap
     */
  loadWmsLayer (options, isAddToMap = true, config) {
  loadWmsLayer (options, isAddToMap = true) {
    const layer = this.L.tileLayer.wms(options.url, options.option)
    layer.config = config
    layer.config = options

    if (isAddToMap) {
      layer.addTo(this.tileLayerWmslayerGroup)
@@ -93,7 +171,7 @@
     * @param {}} options
     * @param {*} isAddToMap
     */
  loadTileLayer (options, isAddToMap = true, config) {
  loadTileLayer (options, isAddToMap = true) {
    const layer = this.L.tileLayer(options.url, {
      layers: options.layers || 'all', // country
      format: options.format || 'image/png',
@@ -103,7 +181,7 @@
      minZoom: options.minZoom || 1,
      zoomOffset: options.zoomOffset || 0
    })
    layer.config = config
    layer.config = options

    if (isAddToMap) {
      layer.addTo(this.map)
@@ -134,13 +212,12 @@
  }

  /**
   * 得到选中的图层列表
   * @param mapConfig
   * @returns {[]}
   */
  getCheckedLayers (mapConfig) {
     * 得到选中的图层列表
     * @param mapConfig
     * @returns {[]}
     */
  getCheckedLayers (serviceLayers) {
    var checkedLayers = []
    var serviceLayers = mapConfig.ServiceLayers
    for (var i = 0; i < serviceLayers.length; i++) {
      var serviceLayer = serviceLayers[i]
      var layers = serviceLayer.layers
@@ -177,8 +254,8 @@
  }

  /**
   * 根据线的选择，得到点的可选择图层数据
   */
     * 根据线的选择，得到点的可选择图层数据
     */
  getFiltersGroup () {

  }