javascript - 更改 Leaflet GeoJSON 层中每个功能的样式

Question

我一直在研究Leaflet Chloropleth example .

在我的 Leaflet 应用程序中，我有一个 jQuery 下拉列表，当它被选中时，会触发一个函数，该函数将状态名称作为参数。我想使用该州名称来更新 Chloropleth map 。

更改 Leaflet GeoJSON 图层样式的模式是什么？我应该重新创建我用 L.geoJson() 创建的层吗？看起来好像这些层是通过这种方法在彼此之上绘制的。

如果需要，我可以提供 Fiddle。

Answer 1

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

这里有一些代码演示了我从 Mapbox example page 上发布的代码中提取和简化的策略。由 @tmcw 引用。我的代码示例根据每个要素实例上指定属性的值更改了 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');