大資料展示

鼓舞飞扬發表於2024-07-31
大資料
 1  // 大資料展示
 2     dataShow() {
 3       this.isLoad = true;
 4       this.removeClusterMarkerLayer();
 5 
 6       // if (this.map.getSource("bigData")) {
 7       //   this.map.removeSource("bigData");
 8       //   this.map.removeImage('路燈')
 9       // }
10 
11       const data = {
12         Token: 'fdasfn8934r5nt9785o43mo#4K9',
13         ObjectName: '路燈',
14         Ucs: 'WGS84',
15       };
16       const options = {
17         method: "POST",
18         headers: { "content-type": "application/json" },
19         data: data,
20         url: `${BASE_CONFIG.BASE_API3}/get`
21       };
22         axios(options)
23           .then((response) => {
24             let data = response.data.data;
25             this.isLoad = false;
26             let geojson = {
27               type: 'FeatureCollection',
28               features: []
29             };
30             for (let i = 0; i < data.length; i++) {
31               let item = data[i];
32               // 上萬條資料
33               let feature = {
34                   type: 'feature',
35                   geometry: {
36                       type: 'Point',
37                       coordinates: []
38                   },
39                   properties: {
40                     name: item.ObjectName
41                   }
42               };
43               feature.geometry.coordinates = [item.lnglat[0], item.lnglat[1]];
44               geojson.features.push(feature);
45             };
46 
47             // 擷取前100條資料用於測試
48             geojson.features = geojson.features.slice(0, 60);
49 
50             this.map.loadImage(require('./image/map/路燈.png'), (error, image) => {
51               this.map.addImage('路燈', image)
52             })
53 
54             console.log('350---geojson', geojson);
55 
56 
57             // 載入聚合圖
58             this.map.addSource('bigData', {
59               type: 'geojson',
60               data: geojson,
61               // cluster: true,
62               // clusterMaxZoom: 14,
63               // clusterRadius: 50
64             });
65             let bbox = this.$turf.bbox(geojson);
66             this.map.fitBounds(bbox, {
67               padding: {top: 20, right: 300, bottom: 20, left: 20}
68             });
69 
70             this.map.addLayer({
71               id: 'bigData',
72               type: 'symbol',
73               source: 'bigData',
74               filter: ['has', 'name'],
75               layout: {
76                 'icon-allow-overlap': true,
77                 'icon-image': ['get', 'name'],
78                 "icon-size": 1.5,
79               },
80               'paint': {
81                 'icon-color': [
82                   'match',
83                   ['get', 'name'],
84                   '路燈',
85                   '#FF8C00',
86                   '#FF0000' // any other store type
87                 ]
88               }
89             });
90           })
91           .catch(error => {
92             console.log(error);
93           });
94     },

相關文章