Mapbox gl js 使用mapbox动态图标/符号着色

我第一次使用mapbox gl js。我需要能够定义一个“模板”图标/符号（比如一个约16X16的三角形），然后在图层上使用该图标/符号，但能够使用“绘制”部分中的“图标颜色”属性，以便能够设置样式中图标/符号的颜色

我已经创建了一个三角形

svg

文件。然后，我使用cli实用程序将svg转换为sdf（我将其命名为

triangle16_sdf.png

），并将其上传到我的aws公共存储桶中。

sdf

是单色的。我正试图在以下样式片段中定义的样式中使用它：

{"type":"symbol","icons":{"triangle-16":"https://my_aws_url/icons/triangle16_sdf.png"},"paint":{"icon-color":"#00ff00"},"layout":{"symbol-placement":"point","icon-image":"triangle-16","icon-ignore-placement":true,"icon-allow-overlap":true}}

这将显示图标，但仅显示模板。它不会使用适当的颜色为图标上色

---

这里是否有我做得不正确的地方，或者是否有另一种方法，我可以使用一个图标/符号，我可以用一种样式改变颜色？

我不确定您是否可以使用

样式来告诉mapbox gl图标应该被视为“sdf”图标。但是使用
addImage
方法，您可以执行以下操作：

const image = new Image();

image.onload = () => {
  map.addImage('icon-name', image, {sdf: true});
};

image.src = 'your-image-url';