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

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

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

geojson\u raw

是保存在javascript变量中的geojson对象。

style

只是返回具有某些样式属性的对象的函数。

highlightFeature

/

resetHighlight

是根据鼠标输入/输出事件更改这些样式的函数

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

更新

---

两年后，我又一次在这个问题上绊倒了。我花了两个小时才解开这个谜。下面公认的答案确实有效，但有一个陷阱。只有在调用层上的

addTo（map）

之前设置cssClass，它才有效。最后在源代码中挖掘出来后，很明显，传单仅在初始化每个路径时设置cssClass。

如果使用SVG，则可以将容器作为

this.\u container

并更新它的类

如果使用Canvas，则会出现问题，因为Canvas淹没不支持DOM样式和带内容的绘图

---

因此，您不能将样式用于不同的实现，也不能更好地使用样式。

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

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

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

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

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

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

---

这对我来说非常有效。

在@tbicr的答案上展开，您应该能够做如下操作：

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

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

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

编辑：和往常一样，如果你决定否决投票，我很乐意给你一个解释，这样我就可以改进它了。这是目前为止唯一的答案，它详细描述了如何动态添加类，我看不出有什么问题。

您可以向样式对象添加“className”属性，或者以后像这样添加类：

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

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

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

---

使用传单1.x，这里有一种稍微不同的方法来实现这一点——在我的例子中，映射已经初始化，所以上面提到的类名样式不起作用

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属性。

类似的方法应该可以做到这一点。特性。_容器公开底层DOM元素，因此您可以对其使用常规DOM操作（例如，现代浏览器上的classList，或旧浏览器中的setAttribute（'class'，'someClass'））

功能每个特征（特征、层）{
//需要使用setTimeout hack，以便DOM容器
//可用。警告：可能导致争用条件问题，
//也许会和其他的计时活动联系起来？
setTimeout（函数（）{
feature._container&&feature._container.classList.add（'someClass'）；
}, 0);
}
geojson=L.geojson（geojson_raw，{onEachFeature:eachFeature}）；
geojson.addTo（map）；

传单中肯定缺少一项功能！这也使得圆和其他路径元素的CSS样式几乎不可能。是的，但具体如何？我也在尝试做同样的事情，因为这个问题已经被问过了-我不会重复。问题是关于用传单设置css类-不是d3。明白，但是如果传单有一些限制阻碍了这种方法。一个人可以使用另一个像D3这样的库来这样做吗？我目前正在尝试做一些类似的事情，并使用传单和D3。似乎按照你的要求去做。但是，如果只是想用传单来定一个班，那么我的建议是没有用的。让我知道，我将删除我的帖子。只是想帮助和学习。你是在地图上分层一个choropleth，并试图在g:path元素中添加一个类吗？像这个例子？事实上，我不记得我想对css类做什么，问题已经6个月了。。。但我始终希望尽可能地将样式和逻辑分开。因此，与其直接在javascript/应用程序逻辑中声明样式，我只想在一行/rect/circle/path上设置一个css类，并将该元素的正确样式留给样式表。

className:SOME_class

回答了这个问题。

path

需要像

path.on（'click'，addClass）

，对吗？@maackle:看起来更干净，但它也应该与对象符号配合使用。谢谢，我没意识到。如果您的答案包括调用OP的代码中的

onEachFeature

，我将取消我的否决票。这不起作用，在删除功能后无法更改类名。