点击功能的传单

Question

因此，我正在尝试使用传单 w/geojson 作为坐标来绘制公交路线图。我在一个方面遇到了困难，在点击时，公交线路被加粗，理想情况下，最后一次点击功能 returns 为默认样式。

到目前为止我有什么

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

使用 resetStyle() 似乎是一个更简单的解决方案...只需在将新样式应用到要素之前重置图层的样式。这只需要将一行代码添加到您的原始函数中：

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
        };
        busFeature.resetStyle();
        $layer.bringToFront();
        $layer.setStyle(highlightStyle);
    }
}); 
}

Answer 3

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

.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);
}

点击功能的传单

Leaflet clicking on features

javascript

css

jquery

geojson

leaflet

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