mapbox gl改变图标颜色

Posted 2023-02-16

【中文标题】mapbox gl改变图标颜色

【英文标题】：mapbox gl change icon color

【发布时间】：2016-02-23 15:44:58

【问题描述】：

有没有办法改变 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"
    
);

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

【问题讨论】：

同样的问题也想不通，也许在github上创建一张票？

大声笑我才意识到你做到了哈哈

【参考方案1】：

我找到了答案。您需要专门为它工作的 sdf 图标。

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

Unfortunately we don't have a turnkey solution for generating sdf icons but you can see an example of how its done in the maki project

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

【参考方案2】：

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

例子：

Add an icon to the map

Add a generated icon to the map

【参考方案3】：

问题是 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
                
            );
        );

【参考方案4】：

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

还有设置 绘制属性添加层

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

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