在添加下一个之前删除上一个突出显示：

Question

所以，我正在尝试使用传单w / geojson为坐标映射公交路线。我在一个方面遇到困难，只需点击一下，总线就会加粗，理想情况下，最后点击的功能会返回默认样式。

到目前为止我有什么

function $onEachFeature(feature, layer) {
   layer.on({
    click: function(e) {
        //calls up the feature clicked on
        var $layer = e.target;

        var highlightStyle = {
            opacity: 1,
            weight: 5
        };

        $layer.bringToFront();
        $layer.setStyle(highlightStyle);
    }
 }); 
}

//imagine all the leaflet map tile code here

//this is where the features get added in and the $oneachfeature function
var busFeature = L.geoJson(busRoutes, {
     style: defaultBusRouteColor,
     onEachFeature : $onEachFeature
});

busFeature.addTo(map);

上面，我现在成功地将功能的样式更改为highlightStyle中的内容。但是，单击其他功能时，样式仍然存在。如何删除先前单击的要素的样式，以便一次只有一个要素具有样式highlightStyle？

我已经尝试过的东西：使用addClass / removeClass来实现jQuery方法，使用传单的layer.resetStyle()以及一些仍然无效的其他东西。注意：这将理想地用于移动版本，因为桌面版本使用强调功能的悬停功能，没有问题。这样：

function $oneachfeature(feature, layer){
   layer.on({
      mouseover: function (e){makes feature bold}
 });
   layer.on({
      mouseout: function (e){makes feature normal again}
 });
}

有什么建议吗？

Answer 1

存储对突出显示的图层的引用，以便稍后在其上调用resetStyle：

// Variable to store selected
var selected

// Create new geojson layer
new L.GeoJSON(collection, {
  // Set default style
  'style': function () {
    return {
      'color': 'yellow',
    }
  }
}).on('click', function (e) {
  // Check for selected
  if (selected) {
    // Reset selected to default style
    e.target.resetStyle(selected)
  }
  // Assign new selected
  selected = e.layer
  // Bring selected to front
  selected.bringToFront()
  // Style selected
  selected.setStyle({
    'color': 'red'
  })
}).addTo(map)

示例：http://embed.plnkr.co/RnQO1s/preview
参考：http://leafletjs.com/reference.html#geojson-resetstyle

Answer 2

在添加下一个之前删除上一个突出显示：

.removeLayer() 用于使用 .addTo()

删除先前设置的 geoJSON 选择

theMap = yourMap.Map
geoJson = yourMap.geoJSON();

onclick() {
    const highlightedFeature = {
      'color': '#12FF38',
      'fillColor': '#30D8E0',
      'fillOpacity': 0.3
    };

    this.theMap.removeLayer(this.geoJson);

    this.geoJson = yourMap.geoJSON( Feature, {
       style: highlightedFeature
    });
        
    this.geoJson.addTo(this.theMap);
}

宣传单击功能

2 个答案:

在添加下一个之前删除上一个突出显示：