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"
    }
});

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

- jordi

---

同样的问题我也搞不清楚，或许可以在 GitHub 上创建一个工单？ - Gert Cuykens

哈哈，我刚意识到你这么做了。 - Gert Cuykens

Answer 1

问题在于MapBox只允许您为SDF格式的图标着色。

引用框中显示的文档说明了 icon-color，即图标的颜色。此选项仅适用于sdf图标。 这里 有一份有关此问题的文档。正如 GitHub 帖子所说，此项功能仅受到单个颜色的限制。在MapBox中，从png文件中获取SDF文件非常容易。 addImage 函数的文档告诉您可以添加可选的 options 参数，其中包含 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
                }
            });
        });

- Ribisl

Answer 2

我找到了一个答案。你需要专门使用sdf图标才能使其正常工作。

https://github.com/mapbox/mapbox-gl-js/issues/1594

很遗憾，我们没有生成sdf图标的一站式解决方案，但是您可以在maki项目中看到如何完成的示例。

https://github.com/mapbox/maki/blob/mb-pages/sdf-render.js

由 @yurik 更新： 上述链接已不再有效，可能指的是 https://github.com/mapbox/maki/blob/b0060646e28507037e71edf049a17fab470a0080/sdf-render.js

https://github.com/mapbox/mapbox-gl-js/issues/161

- Gert Cuykens

Answer 3

您也可以使用自己预先着色的外部图标（或即时生成着色图标），作为icon-image，如果您先使用map.loadImage()和map.addImage()。

示例：

在地图上添加图标

添加生成的图标到地图上

- Mike Davlantes

Answer 4

如果您想更改 PNG 图标的颜色，只需在添加图像时添加此附加输入 sdf: true。

并且设置 paint 属性 addlayer。

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

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

- Mahendra Panchal