mapbox gl 数据驱动样式（等值线图）

Question

我正在尝试使用 mapbox-gl 创建等值线图。在示例等值线地图中，看起来他们根据要素的属性设置了要素的油漆填充颜色。有没有办法通过访问地图来设置颜色？

即。在名为 id 的功能属性中，我有每个瓦片都有一个唯一的 id。我还有一个 json，它将每个 id 映射到一个值，并想访问这些值来设置颜色。

这可能吗？还是我只能访问功能属性中的值？

Answer 1

我不确定我是否正确理解了你的问题。但我认为你想要实现的目标可以用 expressions:

来完成

const geojson = {
  type: 'FeatureCollection',
  features: [
    {
      type: 'Feature',
      properties: {
        id: 'foo'
      },
      geometry: {
        /* */
      }
    }
  ]
};

const values = {
  foo: 'green',
  bar: 'red',
  baz: 'blue'
};

map.addLayer({
  // ...
  paint: {
    'fill-color': [
      [
        'get',
        // get the id property and use it as a key into "values"
        ['get', 'id'],
        values
      ]
    ]
  }
});

参见 get 表达式：https://www.mapbox.com/mapbox-gl-js/style-spec#expressions-get

Answer 2

2018 年 4 月更新：由于某些时刻的结构，例如

 [
    'get',
    // get the id property and use it as a key into "values"
    ['get', 'id'],
    values
  ]

停止工作。发生以下异常：'Bare objects invalid. Use ["literal", {...}]'。现在需要使用类型表达式，像这样：

[
 'get',
 ['string', ['get', 'id'],
 ['literal', values]
]

参考this and this。

mapbox gl 数据驱动样式（等值线图）

mapbox gl data driven styles (choropleth maps)

mapbox-gl-js