javascript - 点击功能的传单

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() 和 leaflet，以及其他一些仍然不起作用的事情。注意:这最好用在移动版本中，因为桌面版本使用强调功能的悬停功能，没有问题。这个:

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