单击另一层时取消突出显示该层 Leaflet Vuejs答案

【问题标题】：dehighlight the Layer when another layer is clicked Leaflet Vuejs单击另一层时取消突出显示该层 Leaflet Vuejs
【发布时间】：2020-05-13 08:44:10
【问题描述】：

我在 Vuejs 中使用 Leaflet。我在地图上加载 GeoJSON 数据，我想在单击图层（多边形）时突出显示它。这很好用。但是当我点击第二层时，我希望第一层被取消突出显示。当我单击第二层时，第一层的去高光不起作用。这是我突出显示并尝试取消突出显示的功能的一部分：

 makeEditable(feature, layer) {

    var highlight = {
      'color': '#FFFF00',
      'weight': 2,
      'opacity': 1
    };

    var previouscolor = {
      'color': '#5dbcd2',
      'weight': 2,
      'opacity': 1
    };
    var selected
    var previous
    layer.on('click', function (e) {

        e.target.setStyle(highlight);

        if (selected !== null) {
          previous = selected;
        }

        selected = e.target;

      if (previous) {
        layer.setStyle(previouscolor);
        }
    });
  }

这也是我的计算：

 computed: {
  options() {
    return {
      onEachFeature: this.makeEditable,
    }
  }
}

我还定义了一个从 DB 加载 GeoJSON 的方法，在 mount 中调用：

  async loadGeoJSON() {
    try {
      this.geojson = await api.getCurrentZones();
    } catch (error) {
      this.error = error.message;
      this.notifyVue();
    }
  },

关于如何取消突出显示我的图层的任何建议？

【问题讨论】：

标签： vue.js leaflet

【解决方案1】：

用 css 类标记选定的元素更容易，例如与

e.originalEvent.target.classList.add('selected')

（这里需要originalEvent，因为事件被leaflet.js包装，原始DOM事件包含在这个属性中）

css 类 selected 然后可以用普通的 css 定义，尽管您需要记住，leaflet.js 中的多边形是 SVG 中的 path 元素，所以 color 将不起作用。而是像这样使用stroke 和fill：

.selected {
   stroke: #FFFF00;
   fill: #FFFF00;
}

要取消选择之前选择的元素，您可以使用

document.querySelectorAll('.selected').forEach(el => el.classList.remove('selected'))

您应该在设置新选择的元素的类之前这样做。

【讨论】：