Skip to content

Commit a46bfd0

Browse files
author
潘卓然Y7000P
committed
【站点】【新增】【新增Mapbox4326坐标下的聚类显示】
1 parent 4822987 commit a46bfd0

2 files changed

Lines changed: 64 additions & 16 deletions

File tree

‎website/public/static/demo/mapboxgl/example/client-view/common/cluster.htm‎

Lines changed: 64 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<head>
44
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
55
<title>聚类显示</title>
6-
<script include="jquery" src="./static/libs/include-lib-local.js"></script>
6+
<script include="jquery,papaparse" src="./static/libs/include-lib-local.js"></script>
77
<script include="" src="./static/libs/include-mapboxgl-local.js"></script>
88
<style>
99
body {
@@ -26,6 +26,7 @@
2626
var tiandituKey = 'f5347cab4b28410a6e8ba5143e3d5a35';
2727
var map = new mapboxgl.Map({
2828
container: 'map',
29+
crs: 'EPSG:4326',
2930
style: {
3031
version: 8,
3132
sources: {
@@ -36,8 +37,8 @@
3637
//来源请求地址，请求天地图提供的全球矢量地图WMTS服务
3738
'http://t' +
3839
Math.round(Math.random() * 7) +
39-
'.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0' +
40-
'&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles' +
40+
'.tianditu.gov.cn/vec_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0' +
41+
'&LAYER=vec&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles' +
4142
'&TILECOL={x}&TILEROW={y}&TILEMATRIX={z}' +
4243
'&tk=' +
4344
tiandituKey
@@ -62,14 +63,48 @@
6263
});
6364

6465
map.on('load', () => {
65-
$.get('./../static/data/geojson/china-city.geojson', (data) => {
66-
addCluster(data);
66+
$.get('../../static/data/geojson/chinaEarthquake.csv', function (response) {
67+
var dataObj = Papa.parse(response, {
68+
skipEmptyLines: true,
69+
header: true
70+
});
71+
72+
var data = dataObj.data;
73+
74+
var geojson = {
75+
type: 'FeatureCollection',
76+
features: []
77+
};
78+
79+
for (var i = 0; i < data.length; i++) {
80+
var item = data[i];
81+
var date = new Date(item.date);
82+
var year = date.getFullYear();
83+
84+
//2w+地震数据
85+
if (year > 2000 && year < 2015) {
86+
var feature = {
87+
type: 'feature',
88+
geometry: {
89+
type: 'Point',
90+
coordinates: []
91+
},
92+
properties: {
93+
value: parseFloat(item.level)
94+
}
95+
};
96+
feature.geometry.coordinates = [parseFloat(item.X), parseFloat(item.Y)];
97+
98+
geojson.features.push(feature);
99+
}
100+
}
101+
addCluster(geojson);
67102
});
68103
});
69104

70105
function addCluster(geojson) {
71106
// map.add
72-
map.addSource('clusterdata', {
107+
map.addSource('earthquakes', {
73108
type: 'geojson',
74109
data: geojson,
75110
cluster: true,
@@ -78,29 +113,42 @@
78113
});
79114

80115
map.addLayer({
81-
id: `clusters-layer`,
116+
id: 'clusters',
82117
type: 'circle',
83-
source: 'clusterdata',
84-
filter: ['has', 'name'],
118+
source: 'earthquakes',
119+
filter: ['has', 'point_count'],
85120
paint: {
86-
'circle-color': '#51bbd6',
87-
'circle-radius': 20,
88-
'circle-stroke-width': 5, //轮廓线宽度
89-
'circle-stroke-color': '#FFFFFF' //轮廓线颜色
121+
'circle-color': ['step', ['get', 'point_count'], '#51bbd6', 100, '#f1f075', 750, '#f28cb1'],
122+
'circle-radius': ['step', ['get', 'point_count'], 20, 100, 30, 750, 40],
123+
'circle-stroke-color': '#FFFFFF',
124+
'circle-stroke-width': 5
90125
}
91126
});
92127

93128
map.addLayer({
94129
id: 'cluster-count',
95130
type: 'symbol',
96-
source: 'clusterdata',
97-
filter: ['has', 'name'],
131+
source: 'earthquakes',
132+
filter: ['has', 'point_count'],
98133
layout: {
99-
'text-field': '{name}',
134+
'text-field': '{point_count_abbreviated}',
100135
'text-font': ['宋体', '宋体'],
101136
'text-size': 12
102137
}
103138
});
139+
140+
map.addLayer({
141+
id: 'unclustered-point',
142+
type: 'circle',
143+
source: 'earthquakes',
144+
filter: ['!', ['has', 'point_count']],
145+
paint: {
146+
'circle-color': '#11b4da',
147+
'circle-radius': 4,
148+
'circle-stroke-width': 1,
149+
'circle-stroke-color': '#fff'
150+
}
151+
});
104152
}
105153
</script>
106154
</body>

‎website/public/static/demo/mapboxgl/gallery/client-view/common/cluster.png‎

85.1 KB
Loading

0 commit comments

Comments
 (0)