mapbox gl更改图标颜色

Question

有没有办法改变mapbox-gl-js图标-图像的颜色？

取自https://www.mapbox.com/mapbox-gl-js/example/geojson-markers/的代码不会将标记颜色更改为红色

map.addLayer({
    "id": "markers",
    "type": "symbol",
    "source": "markers",
    "layout": {
        "icon-image": "{marker-symbol}-15",
        "text-field": "{title}",
        "text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"],
        "text-offset": [0, 0.6],
        "text-anchor": "top"
    },
    "paint": {
        "text-size": 12,
        "icon-color" : "#ff0000"
    }
});

我已经尝试了官方文档中列出的所有选项

Answer 1

问题是MapBox只允许你给SDF (带符号距离函数)格式的图标着色。

icon-color图标的颜色。这只能与sdf图标一起使用。

Here是一个关于它的小文档。就像GitHub的帖子所说的那样，它仅限于单色。在MapBox中，从png文件中获取sdf文件非常简单。

addImage函数的文档告诉您，您可以添加一个可选的选项参数，其中可以包含sdf和pixelRatio。

所以你所要做的就是这样：

        map.loadImage(imageURL, function(error0, image0) {
            if (error0) throw error0;
            map.addImage("image", image0, {
                "sdf": "true"
            });

            map.addLayer({
                "id": "Layer1",
                "type": "symbol",
                "source": "places",
                "layout": {
                    "icon-image": "image",
                    "icon-allow-overlap": true,
                },
                "paint": {
                    "icon-color": "#00ff00",
                    "icon-halo-color": "#fff",
                    "icon-halo-width": 2
                }
            });
        });

Answer 2

如果您首先使用map.loadImage()和map.addImage()，您还可以使用您自己的预着色外部图标(或动态生成彩色图标)作为icon-image。

示例：

Add an icon to the map

Add a generated icon to the map

Answer 3

如果你想改变png的图标颜色，你只需在添加图像时添加这个额外的输入sdf: true即可。

并设置画图属性addlayer

"paint": {
   "icon-color": "#00ff00",
   "icon-halo-color": "#fff",
   "icon-halo-width": 2
   }

this.map.addImage("Id", iconUrl, { sdf: true });