更改Leaflet GeoJSON图层中每个要素的样式

Question

我一直在研究Leaflet Chloropleth example。

在我的Leaflet应用程序中，我有一个jQuery下拉框，选中该下拉框时，将触发一个函数，该函数以州的名称作为参数。我想用这个州的名字来更新Chloropleth地图。

更改Leaflet GeoJSON层的样式的模式是什么？我应该第二次重新创建我用L.geoJson()创建的层吗？似乎这些层都是用这种方法在彼此之上绘制的。

如果需要，我可以提供一个小提琴。

Answer 1

这里是an example of changing a choropleth to classify on different properties -诀窍是用不同的值再次调用setStyle。

Answer 2

要通过@tmcw扩展answer，策略是将一个函数传递给geojsonLayer.eachLayer()，该函数更改geojsonLayer中每个特性实例的样式。

以下是我从@tmcw引用的Mapbox example page上发布的代码中提取并简化的一些代码，它们演示了这一策略。我的代码示例根据每个特性实例上指定的属性的值来更改geojsonLayer中每个特性实例的样式。

var geojsonLayer = L.geoJson(...); // a GeoJSON layer declared in the outer scope

function restyleLayer(propertyName) {

    geojsonLayer.eachLayer(function(featureInstanceLayer) {
        propertyValue = featureInstanceLayer.feature.properties[propertyName];

        // Your function that determines a fill color for a particular
        // property name and value.
        var myFillColor = getColor(propertyName, propertyValue);

        featureInstanceLayer.setStyle({
            fillColor: myFillColor,
            fillOpacity: 0.8,
            weight: 0.5
        });
    });
}

restyleLayer('myProperty');

Answer 3

宣传单的官方文件解释说：

https://leafletjs.com/examples/geojson/

可以使用style选项以两种不同的方式设置要素的样式。首先，我们可以传递一个简单的对象，它以相同的方式设置所有路径(折线和多边形)的样式。或者，我们可以传递一个函数，该函数根据各个要素的属性设置其样式。在下面的示例中，我们检查"party“属性，并相应地设置多边形的样式。

L.geoJSON(states, {
    style: function(feature) {
        switch (feature.properties.party) {
            case 'Republican': return {color: "#ff0000"};
            case 'Democrat':   return {color: "#0000ff"};
        }
    }
}).addTo(map);

不幸的是，样式的名称不等于css样式名称。例如，使用'color‘而不是’and‘，使用’weight‘而不是’and width‘：

https://leafletjs.com/reference-1.6.0.html#path-option