如何在Leaflet中使用FeatureCollection属性参数为多边形设置样式

该需求可以实现，无需修改原有GeoJSON结构，也无需将FeatureCollection的属性迁移到下属Feature中，核心思路是手动遍历每一个顶层FeatureCollection，为其单独创建Leaflet GeoJSON实例，将所属的name属性直接注入到样式配置中：

实现代码 #

// 原有getColor逻辑保留不变
function getColor(name) {
    return name === "name1" ? "#CF8562" :
            name === "name2" ? "#FFEDA0" :
                                "#000000";
}

// 替换原有L.geoJSON初始化逻辑
myJSON.forEach(featureCollection => {
    // 提前取出当前FeatureCollection的name属性
    const currentName = featureCollection.properties.name;
    // 为单个FeatureCollection创建GeoJSON图层
    L.geoJSON(featureCollection, {
        style: function() {
            return {
                fillColor: getColor(currentName),
                weight: 2,
                opacity: 1,
                color: 'white',
                dashArray: '3',
                fillOpacity: 0.7
            };
        }
    }).addTo(mymap);
});

逻辑说明 #

原生L.geoJSON的style回调仅会传入单个Feature对象，默认不会携带所属FeatureCollection的属性，因此原写法无法读取到上层的name字段。
修改后通过遍历每个顶层FeatureCollection，在循环作用域内捕获当前集合的name属性，该集合下所有Feature都会复用当前注入了name的样式配置，即可实现同一个FeatureCollection下所有要素样式统一的需求。

内容的提问来源于stack exchange，提问作者raylight