添加图标光环作为图像周围的边框上传为Mapbox图标
添加图标光环作为图像周围的边框上传为Mapbox图标
提问于 2021-02-19 06:31:37
我有一个贴有自定义咖啡杯图标的mapbox地图(不是maki图标)。我想根据每个点的数据字段有条件地给图标一个光环。这是可行的，但由于图标上传为一个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"这是我现在使用的咖啡杯图标：
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-02-20 06:35:34
根据Mapbox文档，两种样式属性只能应用于SDF启用图像，其中之一也是“图标-光环宽度”。
上面写着：
四种样式规格属性只能用于支持SDF的图像:图标-颜色，图标-晕-颜色，图标-晕宽度和图标-晕-模糊。
我下载了一个演示png的“商店-15.png”从这个链接，并应用图标-光环宽度到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图像？
这里是我把几项研究结合在一起的链接。
谢谢!
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/66272759
复制相关文章
相似问题
腾讯云开发者
