Mapbox GL JS：为大型 GeoJSON 中的单个特征着色

Question

我在 Mapbox 中有一张州地图，每个选区都是一个单独的特征。我想根据政党投票之间的差异来改变每个选区的颜色。 Here's an example of what I'm trying to achieve 与 what I have right now。

我尝试使用 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',
  // ...

在运行时使用 feature-state 添加属性

最后，您可以通过调用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。