Mapbox添加多个不同的点图标 

 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 }

 

posted @ 2024-07-30 17:58  鼓舞飞扬  阅读(191)  评论(0)    收藏  举报