[英]mapbox gl change icon color
有没有办法更改 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"
}
});
我已经尝试了官方文档中列出的所有选项
我找到了答案。 您需要专门为它工作的 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
问题是 MapBox 只允许您为 SDF (有符号距离函数)格式的图标着色。
icon-color 图标的颜色。 这只能与 sdf 图标一起使用。
这是一个关于它的小文档。 就像 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
}
});
});
如果您首先使用map.loadImage()
和map.addImage()
您还可以使用自己的预着色外部图标(或动态生成彩色icon-image
)作为icon-image
。
例子:
如果你想改变 png 的图标颜色,你只需要在添加图像时添加这个额外的输入sdf: true
。
并且还设置了paint属性addlayer
"paint": {
"icon-color": "#00ff00",
"icon-halo-color": "#fff",
"icon-halo-width": 2
}
this.map.addImage("Id", iconUrl, { sdf: true });
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.