如何使用 Mapbox 将 JavaScript 变量引用为表达式中的值？

Question

mapbox 的新手，很享受到目前为止的旅程。

我很好奇是否有办法在表达式中引用 javascript 变量。

我试图从本质上引用一些动态的颜色值，但是我没有运气。我浏览了 MB 文档，但无法找到符合我的难题的信息或选项。谢谢大家的指点。

const mbFillColorExpressionValue = Object.keys(fills)
   .map(fips => {
      return `"${fips}","${fills[fips].fill}"`;
   })
   .concat('"white"')
   .toString();

(mbFillColorExpressionValue returns a string "18089","#839EBE","18091","#839EBE","18127","#839EBE","white")


  this.map.setPaintProperty('counties-towns', 'fill-color', [
     'match',
     ['get', 'GEOID'],
     geoids,
     mbFillColorExpressionValue
   ]);

Answer 1

看完docs of Mapbox后，我认为最终结果应该类似于下面的代码。每个 GEOID 都与其对应的 fill 配对。颜色 white 作为最后一行的后备。

this.map.setPaintProperty('counties-towns', 'fill-color', [
  'match',
   ['get', 'GEOID'],
   '18089', '#839EBE',
   '18091', '#839EBE',
   '18127', '#839EBE',
   'white'
]);

要获得该结果，我们首先必须将 map 方法更改为 flatMap。这是因为在数组上映射时我们不能添加任何键，但我们可以 return 每个项目的数组并将其展平以将整个事物变成一个数组。

const mbFillColorExpressionValue = Object.keys(fills).flatMap(fips => [fips, fills[fips].fill]);
mbFillColorExpressionValue.push('white');

从这里我们可以使用 spread syntax ... 将 mbFillColorExpressionValue 数组的内容放入表达式中。

this.map.setPaintProperty('counties-towns', 'fill-color', [
  'match',
   ['get', 'GEOID'],
   ...mbFillColorExpressionValue
]);

如何使用 Mapbox 将 JavaScript 变量引用为表达式中的值？

How can I reference a JavaScript variable as a value in an expression with Mapbox?

javascript

mapbox