17

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

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是根据 mousein/out 事件更改这些样式的函数。

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

更新

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

4

7 回答 7

12

下面的代码将允许您在使用 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
        };
}

这对我来说真的很好。

于 2014-02-07T21:22:51.777 回答
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);
于 2015-10-11T07:35:57.890 回答
0

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

于 2016-11-19T17:39:34.113 回答
0

像这样的东西应该可以解决问题。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);
于 2017-06-17T00:34:50.967 回答
0

如果 GeoJSON 图层已添加到地图中，则以下解决方案对我有用：

leafletGeoJSONLayer.eachLayer(function (layer) {
  let container = layer._path;
  container.classList.add("your-css-class");    
});

如果 css 标识符已被传单（例如光标）使用，则应将 !important 添加到 css 键值对。

于 2022-02-16T08:16:43.903 回答
-1

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

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

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

于 2013-06-24T06:54:20.400 回答
-1

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

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

于 2014-03-09T19:37:36.840 回答