1 // 添加多个点图
2 function addMorePoint(data){
3 if(mapboxMap.map.getSource('iconImageCircle')){
4 mapboxMap.map.removeLayer('iconCircle')
5 // mapboxMap.map.removeLayer('lineSources')
6 mapboxMap.map.removeSource('iconImageCircle')
7 mapboxMap.map.removeImage('first')
8 mapboxMap.map.removeImage('second')
9 mapboxMap.map.removeImage('third')
10 }
11 let features = []
12 for (let index = 0; index < data.length; index++){
13 let arrData =JSON.parse(data[index].points).features
14 arrData.forEach(item=>{
15 features.push(item)
16 })
17 // features.push({
18 // "type": "Feature",
19 // geometry:JSON.parse(data[index].points),
20 // properties: {
21 // ...data[index],
22 // channelTypeA: data[index].channelType,
23 // title:data[index].names
24 // }
25 // })
26 }
27 for (const marker of features) {
28 var el1 = document.createElement('div');
29 new mapboxgl.Marker(el1)
30 .setLngLat(marker.geometry.coordinates)
31 }
32
33 //加载img
34 mapboxMap.map.loadImage(require(`../assets/img/circle0.png`), function (error, image) {
35 if (error) throw error
36 mapboxMap.map.addImage('first', image, { sdf: false })
37 })
38 mapboxMap.map.loadImage(require(`../assets/img/circle1.png`), function (error, image) {
39 if (error) throw error
40 mapboxMap.map.addImage('second', image, { sdf: false })
41 })
42 mapboxMap.map.loadImage(require(`../assets/img/circle2.png`), function (error, image) {
43 if (error) throw error
44 mapboxMap.map.addImage('third', image, { sdf: false })
45 })
46 mapboxMap.map.loadImage(require(`../assets/img/point1.png`), function (error, image) {
47 if (error) throw error
48 mapboxMap.map.addImage('fourth', image, { sdf: false })
49 })
50 mapboxMap.map.loadImage(require(`../assets/img/point2.png`), function (error, image) {
51 if (error) throw error
52 mapboxMap.map.addImage('fifth', image, { sdf: false })
53 })
54 mapboxMap.map.addSource('iconImageCircle', {
55 type: 'geojson',
56 data: {
57 type: 'FeatureCollection',
58 features:features
59 }
60 });
61 mapboxMap.map.addLayer({
62 id: "iconCircle",
63 type: "symbol",
64 source: 'iconImageCircle', // 对应addSource第一个参数名字
65 layout: {
66 "icon-image": [
67 "case",
68 ['==', ['get', 'channelTypeA'], '51'],
69 'first',
70 ['==', ['get', 'channelTypeA'], '52'],
71 'second',
72 ['==', ['get', 'channelTypeA'], '53'],
73 'third',
74 ['==', ['get', 'channelTypeA'], '54'],
75 'fourth',
76 ['==', ['get', 'channelTypeA'], '55'],
77 'fifth',
78 "buming",
79 ], // 对应addImage()第一个参数名字
80 'text-field': ['get', 'title'],
81 "icon-allow-overlap": true,//如果设置为true，图标依旧显示，即使和已绘制的其他要素有碰撞
82 "icon-ignore-placement": true,//如果设置成true，即使其他要素有碰撞的情况下，依然可以显示
83 "text-allow-overlap": true,//是否允许文本重叠（可选，默认值为 false。当值为 true 时，文本即使和其他符号触碰也会显示）
84 "icon-size": 0.8,//图标的大小
85 "text-size": 12,
86 },
87 })
88 }
