添加图标光环作为上传为 Mapbox 图标的图像的边框答案

【问题标题】：Add icon halo as border around image uploaded as a Mapbox icon添加图标光环作为上传为 Mapbox 图标的图像的边框
【发布时间】：2021-02-19 06:31:37
【问题描述】：

我有一个带有自定义咖啡杯图标（不是 maki 图标）的 mapbox 地图。我想根据每个点的数据字段有条件地给图标一个光环。这可行，但由于图标是作为 png 上传的，因此它被视为一个矩形，即使图像是一个大部分是圆形的咖啡杯。因此，当您添加光环时，它会添加到图标边界矩形的周边。这是其中两个图标的图片，一个有光环，因为它符合“条件”，另一个没有。

如何让这个光环环绕咖啡杯图标的边框，就像 maki 图标一样？这是我的样式定义的相关部分：

layout: {
  'icon-image': 'cafe-icon'
},
paint: {
  "icon-color": "#1a7a08",
  "icon-halo-color": "#e4be8b",
  "icon-halo-width": ['case', ['==', ['get', 'CONDITION'], true], 4, 0]
}

另外，这是我的 package.json 文件中的 mapbox 依赖项：

"@mapbox/mapbox-sdk": "^0.12.1",
"mapbox-gl": "^2.1.1",
"@mapbox/mapbox-gl-geocoder": "^4.7.0"

这是我现在使用的咖啡杯图标：

【问题讨论】：

您使用的是哪个 Mapbox-gl 版本？另外，您能否在说明中附上您的备用虚拟 png 文件，以便我们在本地检查？
@Dolly 谢谢，我更新了问题。
我认为这里的主要问题之一是我没有在图像中的杯子图标周围留下足够的空白空间。在地图上的较小尺寸渲染中，我分配给光晕的像素数超过了这个空间，导致图像的整个框一直被光晕颜色填充到角落。

标签： mapbox mapbox-gl-js

【解决方案1】：

根据 Mapbox-gl-js 文档，几个样式属性只能应用于SDF Enabled Images，其中之一也是“icon-halo-width”。

READ HERE

上面写着：

四种样式规范属性只能用于启用 SDF 的图像：icon-color、icon-halo-color、icon-halo-width 和 icon-halo-blur。

我从此链接下载了“shop-15.png”的演示 png，并将 icon-halo-width 应用到 10 并应用了样式。

代码：

//downloaded 
var accessible = "http://localhost:3000/shop-15.png";

map.loadImage(accessible, function (error, image) {
                if (error) throw error;
                map.addImage('accessible', image, { sdf: true });
                map.addLayer({
                    "id": "iconLayer",
                    "type": "symbol",
                    "source": 'maine',
                    "layout": {
                        'icon-allow-overlap': true,
                        "icon-image": "accessible",
                        "icon-size": 3,
                    },
                    "paint": {
                        "icon-color": "white",
                        "icon-halo-color": "red",
                        "icon-halo-width": 10
                    }
                });
            });

截图：

如何创建 SDF 图像？

HERE 是我结合少量研究的链接。

谢谢！

【讨论】：