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

时间:2017-12-27 09:52:25

标签: mapbox mapbox-gl-js

我使用mapbox gl js渲染彩色(即填充)多边形,其源是geojson特征集合。我想根据用户操作在客户端上动态更改多边形颜色。以下限制适用/尝试过的事情:

  1. 我正在使用Mapbox GL JS - 而不是Leaflet等。
  2. 我想将所有多边形添加到单个图层(即每个地图框图层的要素集合),因为为每个多边形添加新图层会对性能产生灾难性影响(我有几千个多边形,每个有几千个坐标)和
  3. 应该可以通过ID识别单个多边形;这也是我努力的地方:我不确定如何在以特征集合的形式将多边形添加到图层后识别它们。失败了 - 如果没有ID,他们怎么能被识别?
  4. 请提供一个工作示例,显示至少有两个多边形被添加到单个图层,并且它们的颜色在添加后会被更改(随机颜色很好,我对原理感兴趣)

    不幸的是,SO问题hereherehere并不是我需要的。 This question非常接近,但没有说明如何实际应用更改。它简单地提到了setStyle(): - (

    感谢您的帮助!

2 个答案:

答案 0 :(得分:0)

您希望使用数据驱动样式,这样您可以根据该图层中每个要素的属性使用单个图层但不同的样式。请参阅enter image description here

上的示例

答案 1 :(得分:0)

听起来你想做一个" choropleth" - 多边形由某些数据属性进行颜色编码。

  

我不确定如何以特征集的形式将所有多边形添加到图层后识别它们。

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

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

你基本上有两种方法可以着色:

  1. 单独存储数据,并生成一个大数据驱动属性,将id映射到所需的颜色。
  2. 将数据存储在要素上,并使用将数据转换为颜色的小型数据驱动属性。
  3. 我建议您使用API​​文档尽可能接近,并在遇到困难时询问具体问题,而不是请求一个有效的示例。