在作为 Mapbox 图标上传的图像周围添加图标光环作为边框

Question

我有一个带有自定义咖啡杯图标（不是 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"

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

Answer 1

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

READ HERE

其中说：

Four style specification properties can only be used with SDF-enabled images: icon-color, icon-halo-color, icon-halo-width, and icon-halo-blur.

我从这个 link 下载了“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图像？

是 link 我结合了一些研究的地方。

谢谢！

在作为 Mapbox 图标上传的图像周围添加图标光环作为边框

Add icon halo as border around image uploaded as a Mapbox icon

mapbox

mapbox-gl-js