[英]Setting the Icons for circles
I'm Michael.我是迈克尔。 I would like to set the icons(image data with URL) instead of circles.
我想设置图标(带有 URL 的图像数据)而不是圆圈。 My current code is below.
我当前的代码如下。
map.addSource('on0120-2k8v9e', {
type: 'vector',
url: 'mapbox://michael.5z4bp1z2'
});
map.addLayer({
'id': 'on0120-2k8v9e',
'type': 'circle',
'source': 'on0120-2k8v9e',
'layout': {
// Make the layer visible by default.
'visibility': 'visible'
},
'paint': {
'circle-radius': 8,
'circle-color': 'rgba(55,148,179,1)'
},
'source-layer': 'on0120-2k8v9e'
});
map.addSource('ot0123-cwuarc', {
type: 'vector',
url: 'mapbox://michael.25j63pdx'
});
map.addLayer({
'id': 'ot0123-cwuarc',
'type': 'circle',
'source': 'ot0123-cwuarc',
'layout': {
// Make the layer visible by default.
'visibility': 'visible'
},
'paint': {
'circle-radius': 8,
'circle-color': 'rgba(55,148,179,1)'
},
'source-layer': 'ot0123-cwuarc'
});
If anyone knows how to set icons (image data with URL) instead circles in this code, please teach us...如果有人知道如何在此代码中设置图标(带有 URL 的图像数据)而不是圆圈,请教我们...
Thank you.谢谢你。 Michael
迈克尔
Take a look at the ICON
layer of the mapbox.看一下 mapbox 的
ICON
层。 You should be able to import any image using the map.loadImage()
function and use it in the layer.您应该能够使用
map.loadImage()
function 导入任何图像并在图层中使用它。
https://docs.mapbox.com/mapbox-gl-js/example/add-image/ https://docs.mapbox.com/mapbox-gl-js/example/add-image/
For your example it should be as follows:对于您的示例,它应如下所示:
map.loadImage(imgSrc, (error, res) => {
map.addImage(imgKey, res);
map.addLayer({
'id': 'on0120-2k8v9e',
'type': 'symbol', // Notice the type here
'source': 'on0120-2k8v9e',
'layout': {
// You can add more properties to change icon properties
'icon-size': 10
},
'source-layer': 'on0120-2k8v9e'
});
})
Notice the nested part of loadImage
, the add layer should happen after the icon is loaded.注意
loadImage
的嵌套部分,添加层应该在图标加载之后发生。
Feel free to create a jsbin or fiddle and I can help you further随意创建一个 jsbin 或小提琴,我可以进一步帮助你
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.