Leaflet 1.6.0中如何正确对GeoJSON图层使用setStyle修改样式？

问题原因 #

Leaflet 的 setStyle 方法仅修改 GeoJSON 图层内每个矢量要素的实际渲染样式，不会更新图层实例 options 中存储的初始样式配置，因此你每次读取 obj.options.style.color 拿到的都是初始化时的固定值，无法触发状态切换。另外你原代码中存在笔误：else 分支里的 fillColor: "back" 应为 fillColor: "black"，否则填充色会失效。

解决方法 #

推荐两种可行方案，第二种更加简洁易维护：

方案1：手动同步实例样式配置

每次调用 setStyle 后主动更新 options.style 的值，保证读取的状态和实际渲染一致：

geo_json = L.geoJSON(geo, {
    style: {
        stroke: true,
        color: "black",
        fillColor: "blue"
    }
}).addTo(map);

function high(obj) {
    const current_color = obj.options.style.color
    if (current_color == "black") {
        const newStyle = {
            color: "blue",
            fillColor: "yellow",
            stroke: true
        }
        obj.setStyle(newStyle)
        // 同步更新配置
        obj.options.style = newStyle
    } else {
        const newStyle = {
            color: "black",
            fillColor: "black",
            stroke: true
        }
        obj.setStyle(newStyle)
        obj.options.style = newStyle
    }
}
// 建议把间隔调整为1000ms，100ms切换过快人眼难以分辨
var inter = setInterval(high, 1000, geo_json)

方案2：独立变量维护切换状态（推荐）

不用依赖图层实例的内部配置，单独用变量存储当前样式状态，逻辑更清晰，也不会修改实例原有配置：

geo_json = L.geoJSON(geo, {
    style: {
        stroke: true,
        color: "black",
        fillColor: "blue"
    }
}).addTo(map);

// 单独维护状态标识
let isBlackStyle = true
function high() {
    if (isBlackStyle) {
        geo_json.setStyle({
            color: "blue",
            fillColor: "yellow",
            stroke: true
        })
    } else {
        geo_json.setStyle({
            color: "black",
            fillColor: "black",
            stroke: true
        })
    }
    // 翻转状态
    isBlackStyle = !isBlackStyle
}

var inter = setInterval(high, 1000)

内容的提问来源于stack exchange，提问作者Itération 122442