时间戳

首页 > 解决方案 > 分类数据的 Mapbox 数据驱动样式 - 如何将表达式与数组输入匹配？

javascript - 分类数据的 Mapbox 数据驱动样式 - 如何将表达式与数组输入匹配？

问题描述

我有一个将多边形动态添加到 Mapbox 图层的应用程序。我正在使用匹配表达式来设置多边形填充的样式，但是在使用数组输入来确定表达式的语法时遇到了问题。

这是我正在尝试做的一个简单示例：https ://stackblitz.com/edit/angular-bpuswd?file=src%2Fapp%2Fapp.component.ts

我有一个具有 feature 属性的图层states。根据数据驱动样式的官方地图框示例，我想将每个状态与不同的填充颜色相关联：

// want to match New York to color #F0F and Pennsylvania to color #FF0
const states = ['New York', 'Pennsylvania'];
const colors = ['#F0F', '#FF0'];
const statesAndColors = ['New York', '#F0F', 'Pennsylvania', '#FF0'];

this.map.addLayer({
  id: 'states',
  type: 'fill',
   source: {
      type: 'geojson',
      data: POLYGONS,
   },
   paint: {
     // doesn't work
     'fill-color': ['match', ['string', ['get', 'state']], states, colors, '#AAAAAA']

     // also doesn't work
     // 'fill-color': ['match', ['string', ['get', 'state']], statesAndColors, '#AAAAAA']

     // below example works
     // 'fill-color': ['match', ['string', ['get', 'state']], 'New York', '#F0F', 'Pennsylvania', '#FF0', '#AAAAAA']
    }
});

mapbox表达式匹配文档指出您可以使用 ' 字面值​​数组，其值必须是全字符串或全数字（例如 [100, 101] 或 ["c", "b"]）。如果数组中的任何值匹配，则输入匹配，类似于不推荐使用的“in”运算符。

但是我上面的例子并没有像我预期的那样工作。如何格式化表达式以将这些样式读取为数组？（注意：这个示例应用程序可以很好地使用直接匹配，因为纽约和宾夕法尼亚值是硬编码的，但我的实际应用程序动态上传了多边形，因此它们在运行时是未知的。）

标签： javascripttypescriptmapboxmapbox-gl-jsmapbox-gl

解决方案

您的问题只是 Javascript 语法问题。statesAndColors是一个数组，而您需要传入数组的各个值。您可以使用扩展运算符 ( ...) 来执行此操作。

所以，改变这个：

'fill-color': ['match', ['string', ['get', 'state']], statesAndColors, '#AAAAAA']

对此：

'fill-color': ['match', ['string', ['get', 'state']], ...statesAndColors, '#AAAAAA']

（来源：我实际上在您引用的文档中写了这句话:)）

推荐阅读