传单点击功能

Question

因此，我正在尝试使用带有 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