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

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 是保存在 javascript 变量中的 geojson 对象。 style 只是返回具有一些样式属性的对象的函数。 highlightFeature / resetHighlight 是根据鼠标输入/输出事件更改这些样式的函数。

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

更新

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

Answer 1

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

如果你使用Canvas，那么会有问题，因为canvas溺水不支持DOM样式和内容绘制。

所以你不能使用不同实现的样式和更好的使用样式。

Answer 2

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

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

但是，如果您想在创建时仅使用传单添加它们，请尝试在 style(feature) 方法中返回它们，如下所示：

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

这对我来说非常有效。

Answer 3

扩展@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);

编辑： 与往常一样，如果您决定投反对票，我很乐意为您提供解释，以便我对其进行改进。这是迄今为止唯一的答案，它详细描述了如何动态添加一个类，我看不出它有什么问题。

Answer 4

您可以向样式对象添加“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 5

使用 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 设置类属性。

Answer 6

这样的事情应该可以解决问题。 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);