mapbox - 添加图标光环作为上传为 Mapbox 图标的图像的边框

问题描述

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

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

标签： mapboxmapbox-gl-js

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

在这里阅读

其中说：

四个样式规范属性只能用于启用 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 图像？

这是我结合了我的一些研究的链接。

谢谢！

mapbox - 添加图标光环作为上传为 Mapbox 图标的图像的边框

问题描述

解决方案

推荐阅读