图层控制

徐旺旺

2021-03-25 236e6b13a0959c69afe40ab8e503c0ed01899f30

 src/components/helpers/ServiceLayerHelper.js

@@ -26,11 +26,11 @@

  getByLayerId (layerId) {
    for (var k in this.layerArray) {
      var layer = this.layerArray[k]
      var geojson = layer.toGeoJSON()
      var features = geojson.features
      for (var j = 0; j < features.length; j++) {
        var feature = features[j]
      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
        }
@@ -39,6 +39,10 @@
    return null
  }

  /**
   * 控制显示的级别
   * @param layerConfig
   */
  initDisplayZoom (layerConfig) {
    var that = this
    that.map.on('zoomend ', function (e) {
@@ -140,11 +144,10 @@
     * @param res
     */
  loadGeojson (res, opt) {
    var that = this
    var icon = opt.icon
    const featureGroup = that.L.featureGroup()
    const featureGroup = this.L.featureGroup()
    const featureList = []
    const geojson = that.L.geoJSON(res.features, {
    const geojson = this.L.geoJSON(res.features, {
      style: function (feature) {
        return {
          fill: styles.defaultLineStyle.fill,
@@ -157,8 +160,8 @@
          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',
@@ -167,21 +170,19 @@
            }
          })
      },
      onEachFeature: function (feature, layer) {
        console.log(feature)
        console.log(layer)
      onEachFeature: (feature, layer) => {
        featureList.push(layer)
        layer.bindPopup(function (layer) {
          that.popupComp.setDatas(layer)
          that.popupComp.setShow()
          return that.popupComp.$el
        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(function (layer) {
          .bindTooltip((layer) => {
            const nameId = layer.feature.id
            let name = ''
            if (nameId.indexOf('三通') !== -1 || nameId.indexOf('四通') !== -1 || nameId.indexOf('窨井') !== -1) {
@@ -194,7 +195,7 @@
            }
            return name
          }, { direction: 'bottom', offset: [0, 15], sticky: true })
          .on('mouseover', function (e) {
          .on('mouseover', (e) => {
            const type = e.target.feature.geometry.type
            if (type === 'LineString' || type === 'MultiLineString') {
              layer.setStyle({ weight: 8, color: '#00ffff' })
@@ -208,7 +209,7 @@

              layer.bringToFront()
            }
          }).on('mouseout', function (e) {
          }).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 })
@@ -225,8 +226,8 @@
      }
    })
    store.commit('addSewersDatas', geojson)
    featureGroup.addTo(that.map)
    that.setZIndex(featureGroup)
    featureGroup.addTo(this.map)
    this.setZIndex(featureGroup)
    return featureGroup
  }

@@ -235,7 +236,6 @@
   * @param layerGroup 图层组
   */
  setZIndex (layerGroup) {
    console.log(layerGroup)
    var layers = layerGroup.getLayers()
    if (layers.length > 0) {
      var layer = layers[0]