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 },
标签：map,展示,数据,bigData,geojson,data,let,type From： https://www.cnblogs.com/guwufeiyang/p/18334773