在单层中更改任何多边形的颜色

Change any polygon's colour in a single layer

我正在使用 mapbox gl js 渲染彩色(即填充)多边形,其来源是 geojson 要素集合。我想根据用户操作在客户端上动态更改多边形颜色。已尝试以下约束 apply/things:

  1. 我使用的是 Mapbox GL JS——不是 Leaflet 等
  2. 我想将所有多边形添加到一个图层(即每个 mapbox 图层的要素集合),因为为每个多边形添加一个新图层似乎会对性能产生灾难性影响(我有几千个具有几千个坐标的多边形每个),以及
  3. 应该可以通过 ID 识别各个多边形;这也是我挣扎的地方:我不确定在以要素集合的形式将所有多边形添加到图层后如何识别它们。否则 - 如果不是通过 ID,如何识别它们?

请提供一个工作示例,显示至少两个多边形被添加到一个图层中,并且添加后它们的颜色会发生变化(随机颜色可以,我对原理感兴趣)

不幸的是,SO 问题 , here, and aren't quite what I need. This question 非常接近,但没有说明如何实际应用更改。它只是提到 setStyle() :-(

感谢您的帮助!

您想要使用数据驱动的样式,它允许您使用单个图层但根据该图层中每个要素的属性使用不同的样式。请参阅 https://www.mapbox.com/mapbox-gl-js/example/data-driven-circle-colors/

中的示例

听起来你想制作一个 "choropleth" - 由一些数据 属性.

颜色编码的多边形

I am not sure how to identify all the polygons after they have been added to the layer in the form of a feature collection.

确保每个多边形都有一个 ID 属性。在 GeoJSON 中,这将是这样的:

"properties": {
    "id": 451,
    "myvalue": 0.8
}

基本上有两种着色方法:

  1. 单独存储数据,并生成一个大数据驱动属性,将 id 映射到其所需的颜色。
  2. 将数据存储在特征上,并使用小型数据驱动 属性 将数据转换为颜色。

我建议您使用 API 文档尽可能接近,并在遇到困难时提出具体问题,而不是请求一个有效的示例。