Question

好吧标题说明了一切，但这里有一些代码，所以你明白我的意思。

function eachFeature(feature, layer) {
     layer.on({
         mouseover: highlightFeature,
         mouseout: resetHighlight,
     });
}
geojson = L.geoJson(geojson_raw, { style: style, onEachFeature: eachFeature });
geojson.addTo(map);

geojson_raw是geojson对象，它保存在javascript变量中。 style只是返回具有某些样式属性的对象的函数。 highlightFeature / resetHighlight是根据mousein / out事件更改这些样式的函数。

所以这段代码有效，我已经知道如何通过对用户事件做出反应来改变样式。但是如何在从我的geojson数据创建的路径上设置实际的css-classname？稍后在我的代码中，我想按特定的类名选择路径。

更新

2年后，我再次偶然发现了这个问题。我花了2个小时来解开这个谜团。下面接受的答案确实有效，但有一个问题。只有在您在图层上调用addTo(map) 之前设置cssClass 时，它才有效。最后在源代码中进行了深入研究后，很明显传单只在每个路径初始化时设置了cssClass。

Answer 1

下面的代码将允许您在使用D3的geoJosn方法创建路径后添加类。

var svg = d3.select(map.getPanes().overlayPane).append("svg"),
g = svg.append("g").attr("class", "your_class");

但是，如果您只想使用传单在创建时添加它们，请尝试使用样式（feature）方法返回它们，如下所示：

function style(feature) {
        return {
          weight: 1,
          opacity: .5,
          fillOpacity: 0.7,
          className: feature.properties.name_of_node
        };
}

这对我来说非常好。

Answer 2

您可以在样式对象中添加“className”属性，或者像以后一样添加该类：

function eachFeature(feature, layer) {
     layer.on({
         mouseover: highlightFeature,
         mouseout: resetHighlight,
     });
}
geojson = L.geoJson(geojson_raw, { style: style, onEachFeature: eachFeature });
geojson.setStyle({'className': 'map-path'}); //will add the required class
geojson.addTo(map);

Answer 3

使用Leaflet 1.x，这是一种稍微不同的方法 - 在我的例子中，地图已经初始化，因此上面提到的className样式不起作用。

function eachFeature(feature, layer) {
     layer.on({
         mouseover: function(e) {$(e.target.getElement()).addClass("active");},
         mouseout: function(e) {$(e.target.getElement()).removeClass("active");}
     });
}

如果您不使用jQuery，也可以使用e.target.getElement（）上的setAttribute直接设置class属性。

Answer 4

这样的事情应该可以解决问题。 feature._container公开底层DOM元素，因此您可以在其上使用常规DOM操作（例如现代浏览器上的classList，或旧浏览器中的setAttribute（'class'，'someClass'）。

function eachFeature(feature, layer) {
     // Need to use setTimeout hack so the DOM container will be
     // available.  WARNING: may cause race condition issues,
     // maybe tie into some other timing event?
     window.setTimeout(function() {
         feature._container && feature._container.classList.add('someClass');
     }, 0);
}
geojson = L.geoJson(geojson_raw, { onEachFeature: eachFeature });
geojson.addTo(map);

Answer 5

如果您使用SVG，那么您可以将容器作为this._container获取并更新它。

如果你使用Canvas，那么就会出现问题，因为canvas drowning不支持DOM样式和带内容的绘图。

因此，您无法使用具有不同实现的样式并更好地使用样式。

Answer 6

扩展@tbicr的答案，你应该能够做到这样的事情：

function onEachFeature(feature, path) {
  path.on('click', addClass);
}

function addClass(e){
    var path = e.target;
    var container = path._container;
    $(container).attr('class', 'test');
}

geojson = L.geoJson(geojson_raw, { style: style, onEachFeature: eachFeature });
geojson.addTo(map);

编辑：与往常一样，如果您决定投票，我会很高兴为您解释，所以我可以改进它。这是到目前为止唯一的答案，它描述了如何动态地添加一个类，我看不出它有什么问题。

传单路径：如何设置css类？

6 个答案: