Mapbox GL JS：在大型 GeoJSON 中為單個特征着色

Question

我有一張州地圖，每個區域都作為 Mapbox 中的一個單獨特征。 我想根據政黨選票之間的差異更改每個選區的顏色。 這是我正在努力實現的目標與我現在擁有的目標的示例。

我嘗試使用 map.setPaintProperty，但是設置一個功能會強制您更改與 ID 不匹配的所有其他功能。

map.setPaintProperty("wisconsin", "fill-color", 
    ["match",["get", "id"],
       features[i].properties["OBJECTID"],
       color, "#ffffff"
    ]
);

我該如何解決這個問題，或者還有其他方法嗎？

Answer 1

所以，你想做數據驅動的樣式。 基本上有三種方法。

表達式映射屬性到顏色

如果您要可視化的屬性在數據中（即，您在每個要素上都有一個.population屬性），您可以使用如下表達式：

'fill-color': ['interpolate-hcl', ['linear'], ['get', 'population'], 0, 'red', 1e6, 'blue']

請參閱https://docs.mapbox.com/help/glossary/data-driven-styling/

將每個 ID 映射到特定顏色的表達式

如果您的屬性不包含在您的數據源中，您可以以編程方式生成一個巨大的表達式，如下所示：

'fill-color': ['match', ['get', 'id'],
  1020, 'red',
  1033, 'green',
  1038, 'red',
  1049, 'white',
  // ...

使用功能狀態在運行時添加屬性

最后，通過調用setFeatureState在運行時實際添加您想要的屬性，您可以獲得比前一種情況更好的渲染性能，盡管有一些額外的復雜性。

你的風格是這樣的：

'fill-color': ['interpolate-hcl', ['linear'], ['feature-state', 'population'], 0, 'red', 1e6, 'blue']

然后遍歷視口中的每個要素以實際添加該屬性：

for (const district of districts) {
  map.setFeatureState({ source: 'mysource', sourceLayer: 'mysourcelayer', id: district.id }, { population: district.population});
}

請參閱https://docs.mapbox.com/mapbox-gl-js/api/map/#map#setfeaturestate 。