mapbox-gl-js - mapbox gl 数据驱动样式(等值线图)

Question

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

即。我在称为 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