如何在Leaflet中根据社区名称动态修改GeoJSON多边形的颜色

• 遍历逻辑错误：你定义的neighborhoods是顶层对象，所有社区数据都存在它的features数组属性下，原代码直接遍历neighborhoods对象本身，无法正确获取单个社区的属性数据
• DOM操作对象错误：你代码里$(this).css()中的this指向的是遍历到的GeoJSON属性，不是页面上已经渲染的社区多边形DOM元素，修改自然不生效
• 实现思路不合理：不需要先渲染所有图层再遍历修改样式，直接通过Leaflet提供的GeoJSON渲染配置项，在渲染阶段就可以按社区属性设置对应样式，效率更高也更稳定

把你原来添加GeoJSON图层和后续遍历修改的代码全部替换为以下代码即可：

L.geoJson(neighborhoods, {
  // 每个要素渲染时都会触发这个style回调，返回对应样式
  style: function(feature) {
    // 默认样式和你CSS里的保持一致
    let baseStyle = {
      strokeWidth: 1,
      stroke: "#848484",
      fillOpacity: 0.7,
      cursor: "default"
    }
    // 判断社区名称，修改填充色
    if (feature.properties.hood === "Strip District") {
      baseStyle.fill = "#ffffff"
    } else {
      baseStyle.fill = "#DCDCDC"
    }
    return baseStyle
  }
}).addTo(mymap)

注意：如果需要同时修改多个社区的颜色，只需要在style回调里加更多判断分支即可，比如判断hood等于其他社区名对应返回不同的填充色。建议你把原来CSS中path.leaflet-interactive里的fill属性注释掉，避免CSS优先级覆盖JS设置的样式。

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