// 添加多个点图
function addMorePoint(data){
if(mapboxMap.map.getSource('iconImageCircle')){
mapboxMap.map.removeLayer('iconCircle')
// mapboxMap.map.removeLayer('lineSources')
mapboxMap.map.removeSource('iconImageCircle')
mapboxMap.map.removeImage('first')
mapboxMap.map.removeImage('second')
mapboxMap.map.removeImage('third')
}
let features = []
for (let index = 0; index < data.length; index++){
let arrData =JSON.parse(data[index].points).features
arrData.forEach(item=>{
features.push(item)
})
// features.push({
// "type": "Feature",
// geometry:JSON.parse(data[index].points),
// properties: {
// ...data[index],
// channelTypeA: data[index].channelType,
// title:data[index].names
// }
// })
}
for (const marker of features) {
var el1 = document.createElement('div');
new mapboxgl.Marker(el1)
.setLngLat(marker.geometry.coordinates)
}
//加载img
mapboxMap.map.loadImage(require(`../assets/img/circle0.png`), function (error, image) {
if (error) throw error
mapboxMap.map.addImage('first', image, { sdf: false })
})
mapboxMap.map.loadImage(require(`../assets/img/circle1.png`), function (error, image) {
if (error) throw error
mapboxMap.map.addImage('second', image, { sdf: false })
})
mapboxMap.map.loadImage(require(`../assets/img/circle2.png`), function (error, image) {
if (error) throw error
mapboxMap.map.addImage('third', image, { sdf: false })
})
mapboxMap.map.loadImage(require(`../assets/img/point1.png`), function (error, image) {
if (error) throw error
mapboxMap.map.addImage('fourth', image, { sdf: false })
})
mapboxMap.map.loadImage(require(`../assets/img/point2.png`), function (error, image) {
if (error) throw error
mapboxMap.map.addImage('fifth', image, { sdf: false })
})
mapboxMap.map.addSource('iconImageCircle', {
type: 'geojson',
data: {
type: 'FeatureCollection',
features:features
}
});
mapboxMap.map.addLayer({
id: "iconCircle",
type: "symbol",
source: 'iconImageCircle', // 对应addSource第一个参数名字
layout: {
"icon-image": [
"case",
['==', ['get', 'channelTypeA'], '51'],
'first',
['==', ['get', 'channelTypeA'], '52'],
'second',
['==', ['get', 'channelTypeA'], '53'],
'third',
['==', ['get', 'channelTypeA'], '54'],
'fourth',
['==', ['get', 'channelTypeA'], '55'],
'fifth',
"buming",
], // 对应addImage()第一个参数名字
'text-field': ['get', 'title'],
"icon-allow-overlap": true,//如果设置为true,图标依旧显示,即使和已绘制的其他要素有碰撞
"icon-ignore-placement": true,//如果设置成true,即使其他要素有碰撞的情况下,依然可以显示
"text-allow-overlap": true,//是否允许文本重叠(可选,默认值为 false。当值为 true 时,文本即使和其他符号触碰也会显示)
"icon-size": 0.8,//图标的大小
"text-size": 12,
},
})
}
Mapbox添加多个不同的点图标
最新推荐文章于 2024-07-22 20:33:56 发布