Skip to content

Commit ac4fc1b

Browse files
deyihudeyihu
committed
update demos
1 parent 27a1337 commit ac4fc1b

5 files changed

Lines changed: 198 additions & 23 deletions

File tree

‎test/index.html‎

Lines changed: 82 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -13,14 +13,16 @@
1313

1414
.container {
1515
width: 100%;
16-
height: 100%
16+
height: 100%;
17+
background-color: black;
1718
}
1819
</style>
1920
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/maptalks/dist/maptalks.css">
2021
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/maptalks/dist/maptalks.min.js"></script>
21-
<script type="text/javascript" src="./../dist/maptalks.tileclusterlayer.js"></script>
22+
<script type="text/javascript" src="https://unpkg.com/maptalks.tileclusterlayer@0.0.9/dist/maptalks.tileclusterlayer.js"></script>
2223
<script type="text/javascript" src="https://maptalks.org/maptalks.markercluster/demo/realworld.50000.1.js"></script>
2324
<script type="text/javascript" src="https://maptalks.org/maptalks.markercluster/demo/realworld.50000.2.js"></script>
25+
<script type="text/javascript" src="https://unpkg.com/turf@7.0.0-alpha.1/dist/turf.js"></script>
2426

2527
<body>
2628

@@ -60,25 +62,34 @@
6062
map.setBaseLayer(tdt);
6163
}
6264

65+
const layer = new maptalks.VectorLayer('templayer').addTo(map);
66+
67+
map.on('viewchange', () => {
68+
layer.clear();
69+
currentClusterMarker = null;
70+
})
71+
6372
function getClusterMarkerSymbol(count) {
6473
const symbol = {
65-
markerType: 'ellipse',
66-
markerWidth: 65,
67-
markerHeight: 65,
68-
markerFill: '#fff',
69-
markerLineWidth: 0,
70-
markerFillOpacity: 1,
71-
markerOpacity: 1,
74+
// markerType: 'ellipse',
75+
// markerWidth: 65,
76+
// markerHeight: 65,
77+
// markerFill: '#fff',
78+
// markerLineWidth: 0,
79+
// markerFillOpacity: 1,
80+
// markerOpacity: 1,
81+
markerFile: './marker-case-clusterer1.png',
82+
markerVerticalAlignment: 'middle',
7283
textSize: 15,
7384
textName: count,
7485
textHaloFill: '#000',
7586
textHaloRadius: 1.2,
7687
textFill: '#fff'
7788
};
7889
if (count > 5000) {
79-
symbol.markerFill = 'red';
90+
symbol.markerFile = './marker-case-clusterer3.png';
8091
} else if (count > 1000) {
81-
symbol.markerFill = 'yellow';
92+
symbol.markerFile = './marker-case-clusterer2.png';
8293
};
8394
return symbol;
8495
}
@@ -90,13 +101,61 @@
90101
dispersionDuration: 300,
91102
clusterMarkerSymbol: getClusterMarkerSymbol,
92103
markerEvents: {
93-
'click': function (e) {
94-
console.log(e);
95-
}
104+
'click': mouseClick,
105+
'mouseover': mouseOver,
106+
'mouseout': mouseOut
96107
}
97108
});
98109
tileClusterLayer.addTo(map);
99110

111+
function isClusterMarker(e) {
112+
return (e.target.getProperties() || {}).isCluster;
113+
}
114+
115+
function mouseClick(e) {
116+
if (!isClusterMarker(e)) {
117+
return;
118+
}
119+
// map.setCenter(e.target.getCenter());
120+
// map.zoomIn();
121+
}
122+
123+
let currentClusterMarker;
124+
function mouseOver(e) {
125+
if (!isClusterMarker(e)) {
126+
return;
127+
}
128+
if (currentClusterMarker === e.target) {
129+
return;
130+
}
131+
const features = e.target.getProperties().features || [];
132+
if (features.length > e.target.getLayer().options.dispersionCount) {
133+
return;
134+
}
135+
const points = features.map(f => {
136+
return f;
137+
});
138+
const result = turf.concave(turf.featureCollection(points));
139+
if (!result) {
140+
return;
141+
}
142+
layer.clear();
143+
const polygons = maptalks.GeoJSON.toGeometry(result);
144+
polygons.forEach(p => {
145+
p.setSymbol({
146+
lineColor: 'yellow',
147+
lineWidth: 1.5
148+
})
149+
})
150+
layer.addGeometry(polygons);
151+
currentClusterMarker = e.target;
152+
}
153+
154+
function mouseOut(e) {
155+
layer.clear();
156+
currentClusterMarker = null;
157+
}
158+
100159
var geojson = {
101160
type: 'FeatureCollection',
102161
features: []
@@ -124,15 +183,15 @@
124183
});
125184
}
126185
geojson.features.forEach(f => {
127-
// f.symbol = {
128-
// markerType: 'ellipse',
129-
// markerWidth: 15,
130-
// markerHeight: 15,
131-
// markerFill: '#fff',
132-
// markerLineWidth: 1,
133-
// markerFillOpacity: 1,
134-
// markerOpacity: 1,
135-
// }
186+
f.symbol = {
187+
markerType: 'ellipse',
188+
markerWidth: 15,
189+
markerHeight: 15,
190+
markerFill: '#fff',
191+
markerLineWidth: 1,
192+
markerFillOpacity: 1,
193+
markerOpacity: 1,
194+
}
136195
});
137196
tileClusterLayer.setData(geojson);
138197

‎test/marker-case-clusterer1.png‎

1.41 KB
Loading

‎test/marker-case-clusterer2.png‎

1.86 KB
Loading

‎test/marker-case-clusterer3.png‎

2.46 KB
Loading

‎test/perf.html‎

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<meta charset="UTF-8">
4+
<meta name="viewport" content="width=device-width, initial-scale=1">
5+
<title>million marker cluster</title>
6+
<style type="text/css">
7+
html,
8+
body {
9+
margin: 0px;
10+
height: 100%;
11+
width: 100%
12+
}
13+
14+
.container {
15+
width: 100%;
16+
height: 100%;
17+
background-color: black;
18+
}
19+
</style>
20+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/maptalks/dist/maptalks.css">
21+
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/maptalks/dist/maptalks.min.js"></script>
22+
<script type="text/javascript" src="https://unpkg.com/maptalks.tileclusterlayer@0.0.9/dist/maptalks.tileclusterlayer.js"></script>
23+
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script>
24+
25+
<body>
26+
27+
<div id="map" class="container"></div>
28+
29+
<script>
30+
var map = new maptalks.Map('map', {
31+
center: [121.41102587594469, 31.210361851592126],
32+
zoomControl: true,
33+
zoom: 8,
34+
minZoom: 3,
35+
seamlessZoom: false,
36+
// maxExtent: [-100, -55, 170, 55],
37+
baseLayer: new maptalks.TileLayer('base', {
38+
// debug: true,
39+
repeatWorld: false,
40+
urlTemplate: 'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png',
41+
subdomains: ['a', 'b', 'c', 'd'],
42+
attribution: '&copy; <a href="http://osm.org">OpenStreetMap</a> contributors, &copy; <a href="https://carto.com/">CARTO</a>'
43+
})
44+
});
45+
46+
function getClusterMarkerSymbol(count) {
47+
const symbol = {
48+
markerType: 'ellipse',
49+
markerWidth: 65,
50+
markerHeight: 65,
51+
markerFill: '#fff',
52+
markerLineWidth: 0,
53+
markerFillOpacity: 1,
54+
markerOpacity: 1,
55+
textSize: 15,
56+
textName: count,
57+
textHaloFill: '#000',
58+
textHaloRadius: 1.2,
59+
textFill: '#fff'
60+
};
61+
if (count > 10000) {
62+
symbol.markerFill = 'red';
63+
} else if (count > 5000) {
64+
symbol.markerFill = 'yellow';
65+
};
66+
return symbol;
67+
}
68+
69+
const tileClusterLayer = new maptalks.TileClusterLayer('layer', {
70+
maxClusterZoom: 18,
71+
clusterDispersion: true,
72+
dispersionCount: 500,
73+
clusterMarkerSymbol: getClusterMarkerSymbol,
74+
markerEvents: {
75+
'click': function (e) {
76+
console.log(e);
77+
}
78+
}
79+
});
80+
tileClusterLayer.addTo(map);
81+
82+
var geojson = {
83+
type: 'FeatureCollection',
84+
features: []
85+
}
86+
// data from https://l7.antv.vision/zh/examples/gallery
87+
d3.csv('https://gw.alipayobjects.com/os/rmsportal/BElVQFEFvpAKzddxFZxJ.txt', (error, response) => {
88+
for (let i = 0, len = response.length; i < len; i++) {
89+
let lng = response[i].lng, lat = response[i].lat;
90+
lng = parseFloat(lng);
91+
lat = parseFloat(lat);
92+
geojson.features.push({
93+
geometry: {
94+
type: 'Point',
95+
coordinates: [lng, lat]
96+
}
97+
})
98+
}
99+
tileClusterLayer.setData(geojson);
100+
});
101+
// geojson.features.forEach(f => {
102+
// // f.symbol = {
103+
// // markerType: 'ellipse',
104+
// // markerWidth: 15,
105+
// // markerHeight: 15,
106+
// // markerFill: '#fff',
107+
// // markerLineWidth: 1,
108+
// // markerFillOpacity: 1,
109+
// // markerOpacity: 1,
110+
// // }
111+
// });
112+
113+
</script>
114+
</body>
115+
116+
</html>

0 commit comments

Comments
 (0)