如何根据 geoJson 功能对每个集群进行不同的着色？答案

【问题标题】：How can I color each cluster differently based on geoJson feature?如何根据 geoJson 功能对每个集群进行不同的着色？
【发布时间】：2019-08-21 06:09:18
【问题描述】：

我有带有 Voronoi 图的 MapBox，我想根据它所属的集群为每个多边形着色。

这是我的 JSFiddle： https://jsfiddle.net/re12chwa/2/

我尝试使用 Case 但它不起作用。

        "fill-color": [
          "case",
          ['==', ['get', "Cluster"], "31N"], "#00ffff",
          ['==', ['get', "Cluster"], "32"], "#ff00ff",
          ['==', ['get', "Cluster"], "33"], "#0000ff",
          ['==', ['get', "Cluster"], "34"], "#ffff00",
          ['==', ['get', "Cluster"], "35"], "#00ff00",
          '#ea0a8e '
        ]


      {
        type: "Feature",
        properties: {
          Site: "zahod",
          Cluster: "31N",
          "": ""
        },
        geometry: {
          type: "Point",
          coordinates: [16.552992, 43.521409]
        }

任何帮助都会很棒。

【问题讨论】：

标签： javascript html css json mapbox

【解决方案1】：

voronoiPolygons 中没有 ID，因此图层无法识别它们（它会打印默认颜色“#ea0a8e”）。

解决方案是将 ID 添加到 voronoiPolygons 作为点的属性。

for (i = 0; i < voronoiPolygons["features"].length; i++) {
    voronoiPolygons["features"][i].properties = { "id": points["features"][i]["properties"]["Cluster"] }
}

并通过获取 id 来填充颜色。

"fill-color": [
    "case",
    ["==", ["get", "id"], "31N"], "#00ffff",
    ["==", ["get", "id"], "32"], "#ff00ff",
    ["==", ["get", "id"], "33"], "#0000ff",
    ["==", ["get", "id"], "34"], "#ffff00",
    ["==", ["get", "id"], "35"], "#00ff00",
    "#ea0a8e"
]

这是一个工作示例： https://jsfiddle.net/0k7sw9fc/

【讨论】：