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

Question

我想通过设置className设置geojson功能的样式。 如果直接放在这样的功能上，这种方法非常好：

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>}); 除了 className 之外 ，在任何一种情况下都可以使用其他每个L.path选项，例如color ， fillOpacity ， weight等。

例如

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-类所需的逻辑看起来像是一个黑客。 我认为setClassName()或add / removeClass API更合适。