搜索面板查询结果bug修复

徐旺旺

2021-03-15 5b9ce5682127d1b7305cd3f2fe2e182de178bb98

 src/components/helpers/ServiceLayerHelper.js

@@ -16,13 +16,27 @@
    this.tileLayersTileArray = [] // 初始的Tile集
    this.tileLayersWMSArray = [] // 初始的WMS集
    this.layerArray = {} // key为配置的code，加载的图层对象，
    this.layerConfig = {}
    this.regex = /\{(.+?)\}/g // 匹配{}
    this.popupComp = null
  }

  getTileLayer (code) {
    return this.loadedLayersMap.get(code)
  }

  getByLayerId (layerId) {
    for (var k in this.layerArray) {
      var layerGroup = this.layerArray[k]
      var layers = layerGroup.getLayers()
      for (var m = 0; m < layers.length; m++) {
        var layer = layers[m]
        var feature = layer.feature
        if (feature.id === layerId) {
          return layer
        }
      }
    }
    return null
  }

  initDisplayZoom (layerConfig) {
@@ -102,18 +116,22 @@
     * @param url
     * @param item
     */
  loadGeojsonLayer (url, item) {
  async loadGeojsonLayer (url, item) {
    var matches = this.regex.exec(url)
    var matchValue = item[matches[1]]
    var code = item.code
    var newUrl = url.replace(this.regex, matchValue)
    var that = this
    if (!that.layerArray[code]) {
      AjaxUtils.GetDataAsynByUrl(newUrl, {}, function (res) {
        store.commit('addSewersDatas', res)
        var layer = that.loadGeojson(res, item)
      const res = await AjaxUtils.GetDataAsynByUrl(newUrl, {})
      if (res.data instanceof Object && Object.prototype.hasOwnProperty.call(res.data, 'features')) {
        store.commit('addSewersDatas', res.data)
        var layer = that.loadGeojson(res.data, item)
        that.layerArray[code] = layer
      })
      }
    } else {
      var _layer = that.layerArray[code].addTo(that.map)
      that.setZIndex(_layer)
    }
  }

@@ -122,10 +140,10 @@
     * @param res
     */
  loadGeojson (res, opt) {
    var that = this
    var icon = opt.icon
    const featureGroup = that.L.featureGroup().addTo(that.map)
    const geojson = that.L.geoJSON(res.features, {
    const featureGroup = this.L.featureGroup()
    const featureList = []
    const geojson = this.L.geoJSON(res.features, {
      style: function (feature) {
        return {
          fill: styles.defaultLineStyle.fill,
@@ -133,13 +151,13 @@
          fillColor: styles.defaultLineStyle.fillColor,
          color: styles.defaultLineStyle.color,
          fillOpacity: styles.defaultLineStyle.fillOpacity,
          opacity: styles.defaultLineStyle.opacity
          // dashArray: styles.defaultLineStyle.dashArray,
          // dashSpeed: styles.defaultLineStyle.dashSpeed
          opacity: styles.defaultLineStyle.opacity,
          dashArray: styles.defaultLineStyle.dashArray,
          dashSpeed: styles.defaultLineStyle.dashSpeed
        }
      },
      pointToLayer: function (geoJsonPoint, latlng) {
        return that.L.canvasMarker(latlng,
      pointToLayer: (geoJsonPoint, latlng) => {
        return this.L.canvasMarker(latlng,
          {
            img: {
              // url: 'assets/images/map/marker-icon.png',
@@ -147,66 +165,85 @@
              size: styles.defaultLineStyle.size
            }
          })
      }
    }).bindPopup(function (layer) {
      that.popupComp.setDatas(layer)
      that.popupComp.setShow()
      return that.popupComp.$el
    }, {
      className: 's-map-popup',
      minWidth: 300,
      closeButton: false,
      autoClose: false
    })
      .bindTooltip(function (layer) {
        const nameId = layer.feature.id
        let name = ''
        if (nameId.indexOf('三通') !== -1 || nameId.indexOf('四通') !== -1) {
          name = layer.feature.properties.pointnumber
        } else {
          name = layer.feature.properties.name
        }
        return name
      }, { direction: 'bottom', offset: [0, 15], sticky: true })
      .on('mouseover', function (e) {
        const layer = e.layer
        const type = e.layer.feature.geometry.type
        if (type === 'LineString' || type === 'MultiLineString') {
          layer.setStyle({ weight: 8, color: '#00ffff' })
        } else if (type === 'Point' || type === 'MultiPoint') {
          layer.setStyle({
            img: {
              url: '/assets/images/map/' + icon,
              size: [25, 25]
      },
      onEachFeature: (feature, layer) => {
        featureList.push(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) => {
            const nameId = layer.feature.id
            let name = ''
            if (nameId.indexOf('三通') !== -1 || nameId.indexOf('四通') !== -1 || nameId.indexOf('窨井') !== -1) {
              name = layer.feature.properties.pointnumber
            } else {
              name = layer.feature.properties.name
            }
          })
            if (name === undefined) {
              name = ''
            }
            return name
          }, { direction: 'bottom', offset: [0, 15], sticky: true })
          .on('mouseover', (e) => {
            const type = e.target.feature.geometry.type
            if (type === 'LineString' || type === 'MultiLineString') {
              layer.setStyle({ weight: 8, color: '#00ffff' })
            } else if (type === 'Point' || type === 'MultiPoint') {
              layer.setStyle({
                img: {
                  url: '/assets/images/map/' + icon,
                  size: [25, 25]
                }
              })

          layer.bringToFront()
        }
      }).on('mouseout', function (e) {
        const layer = e.layer
        const type = e.layer.feature.geometry.type
        if (type === 'LineString' || type === 'MultiLineString') {
          layer.setStyle({ weight: styles.defaultLineStyle.weight, color: styles.defaultLineStyle.color })
        }
        if (type === 'Point' || type === 'MultiPoint') {
          layer.setStyle({
            img: {
              url: '/assets/images/map/' + icon,
              size: styles.defaultLineStyle.size
              layer.bringToFront()
            }
          })
        }
      }).addTo(featureGroup)
          }).on('mouseout', (e) => {
            const type = e.target.feature.geometry.type
            if (type === 'LineString' || type === 'MultiLineString') {
              layer.setStyle({ weight: styles.defaultLineStyle.weight, color: styles.defaultLineStyle.color })
            }
            if (type === 'Point' || type === 'MultiPoint') {
              layer.setStyle({
                img: {
                  url: '/assets/images/map/' + icon,
                  size: styles.defaultLineStyle.size
                }
              })
            }
          }).addTo(featureGroup)
      }
    })
    store.commit('addSewersDatas', geojson)
    if (Object.prototype.hasOwnProperty.call(res, 'features') && res.features.length > 0 && (res.features[0].geometry.type === 'LineString' || res.features[0].geometry.type === 'MultiLineString')) {
      geojson.bringToBack()
    } else {
      geojson.bringToFront()
    }
    featureGroup.addTo(this.map)
    this.setZIndex(featureGroup)
    return featureGroup
  }

  /**
   * 设置index,线在最下面，点在上面
   * @param layerGroup 图层组
   */
  setZIndex (layerGroup) {
    console.log(layerGroup)
    var layers = layerGroup.getLayers()
    if (layers.length > 0) {
      var layer = layers[0]
      if (layer.feature && (layer.feature.geometry.type === 'LineString' || layer.feature.geometry.type === 'MultiLineString')) {
        layerGroup.bringToBack()
      } else {
        layerGroup.bringToFront()
      }
    }
  }

  removeLayer (item) {
    var layer = this.layerArray[item.code]
    layer && this.map.removeLayer(layer)