在 Leaflet 的事件回调中设置图层类名

Question

我希望通过设置 geojson 功能的className. 如果直接放在功能上，效果非常好，如下所示：

L.geoJson(geojson, {
    onEachFeature: function (feature, layer) {
        layer.setStyle({className: 'grid-cell'});
    }
}).addTo(map);

使用 .css 文件中定义的样式

path.grid-cell{
  stroke-opacity: 1;
  stroke: #444;
  fill: #aaa;
}

但是，如果添加到功能的事件回调中，它将不起作用：

L.geoJson(geojson, {
    onEachFeature: function (feature, layer) {
        layer.on('click', function(e){
          this.setStyle({className: 'grid-cell'});
          this.bringToFront();
        });
    }
}).addTo(map);

令人惊讶的是，除了、 例如、、等之外，setStyle({<style_options>});这两种情况都适用于所有其他L.path选项。 classNamecolorfillOpacityweight

例如

L.geoJson(geojson, {
    onEachFeature: function (feature, layer) {
        // this works
        layer.setStyle({color: '#faa', fillOpacity: 0.4, weight: 1});

        // this works too
        layer.setStyle({className: 'grid-cell'});

        layer.on('click', function(e){
          // and this works
          layer.setStyle({color: '#afa', fillOpacity: 0.4, weight: 2});

          // BUT THIS DOES NOT WORK
          this.setStyle({className: 'grid-cell'});
          this.bringToFront();
        });
    }
}).addTo(map);

知道这里发生了什么吗？ 这是一个说明这个问题的笨蛋。

Answer 1

有关此问题的讨论，请参见此处： https: //github.com/Leaflet/Leaflet/issues/2662。评论之一：

我认为 setStyle 实际上不应该更改 className。该类并不是真正的样式属性，并且处理leaflet-类所需的逻辑看起来像是一个 hack。我认为setClassName()or add/ removeClassAPI 会更合适。