Skip to content

Commit 0b2a357

Browse files
deyihudeyihu
committed
add minClusterCount config
1 parent ac4fc1b commit 0b2a357

4 files changed

Lines changed: 58 additions & 69 deletions

File tree

‎README.md‎

Lines changed: 53 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -4,92 +4,85 @@
44

55
## how to use?
66

7-
- by cdn
7+
* by cdn
88

99
```html
10-
<link
11-
rel="stylesheet"
12-
href="https://cdn.jsdelivr.net/npm/maptalks/dist/maptalks.css"
13-
/>
14-
<script
15-
type="text/javascript"
16-
src="https://cdn.jsdelivr.net/npm/maptalks/dist/maptalks.min.js"
17-
></script>
18-
<script
19-
type="text/javascript"
20-
src="https://cdn.jsdelivr.net/npm/maptalks.tileclusterlayer@latest/dist/maptalks.tileclusterlayer.min.js"
21-
></script>
10+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/maptalks/dist/maptalks.css" />
11+
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/maptalks/dist/maptalks.min.js"></script>
12+
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/maptalks.tileclusterlayer@latest/dist/maptalks.tileclusterlayer.min.js"></script>
2213
```
2314

24-
- by npm
15+
* by npm
2516

2617
```sh
2718
npm i maptalks.tileclusterlayer
2819
# or
2920
yarn add maptalks.tileclusterlayer
3021
```
3122

32-
- [demo online](https://deyihu.github.io/maptalks.tileclusterlayer/test/ "demo online")
33-
- [million markers cluster](https://deyihu.github.io/maptalks.tileclusterlayer/test/perf.html "million markers cluster")
23+
* [demo online](https://deyihu.github.io/maptalks.tileclusterlayer/test/ "demo online")
24+
* [million markers cluster](https://deyihu.github.io/maptalks.tileclusterlayer/test/perf.html "million markers cluster")
3425

3526
```js
36-
function getClusterMarkerSymbol(count,features) {
37-
const symbol = {
38-
markerType: "ellipse",
39-
markerWidth: 65,
40-
markerHeight: 65,
41-
markerFill: "#fff",
42-
markerLineWidth: 0,
43-
markerFillOpacity: 1,
44-
markerOpacity: 1,
45-
textSize: 15,
46-
textName: count,
47-
textHaloFill: "#000",
48-
textHaloRadius: 1.2,
49-
textFill: "#fff",
50-
};
51-
if (count > 5000) {
52-
symbol.markerFill = "red";
53-
} else if (count > 1000) {
54-
symbol.markerFill = "yellow";
55-
}
56-
return symbol;
27+
function getClusterMarkerSymbol(count, features) {
28+
const symbol = {
29+
markerType: "ellipse",
30+
markerWidth: 65,
31+
markerHeight: 65,
32+
markerFill: "#fff",
33+
markerLineWidth: 0,
34+
markerFillOpacity: 1,
35+
markerOpacity: 1,
36+
textSize: 15,
37+
textName: count,
38+
textHaloFill: "#000",
39+
textHaloRadius: 1.2,
40+
textFill: "#fff",
41+
};
42+
if (count > 5000) {
43+
symbol.markerFill = "red";
44+
} else if (count > 1000) {
45+
symbol.markerFill = "yellow";
46+
}
47+
return symbol;
5748
}
5849

5950
const tileClusterLayer = new maptalks.TileClusterLayer("tileClusterLayer", {
60-
maxClusterZoom: 18,
61-
//when cluster marker mouseover will show children markers
62-
clusterDispersion: true,
63-
// show cluster marker children max count
64-
dispersionCount: 500,
65-
//get cluster marker symbol
66-
clusterMarkerSymbol: getClusterMarkerSymbol,
67-
// cluster marker,marker events
68-
markerEvents: {
69-
click: function (e) {
70-
console.log(e);
71-
if(e.target.getProperties().isCluster){
72-
console.log('is cluster marker');
73-
}
51+
maxClusterZoom: 18,
52+
minClusterCount: 5,
53+
//when cluster marker click will show children markers
54+
clusterDispersion: true,
55+
// show cluster marker children max count
56+
dispersionCount: 500,
57+
//get cluster marker symbol
58+
clusterMarkerSymbol: getClusterMarkerSymbol,
59+
// cluster marker,marker events
60+
markerEvents: {
61+
click: function(e) {
62+
console.log(e);
63+
if (e.target.getProperties().isCluster) {
64+
console.log('is cluster marker');
65+
}
66+
},
7467
},
75-
},
7668
});
7769
tileClusterLayer.addTo(map);
7870

79-
const geojson={
80-
type: 'FeatureCollection',
71+
const geojson = {
72+
type: 'FeatureCollection',
8173
features: [
82-
...
83-
]
74+
...
75+
]
8476
};
8577
tileClusterLayer.setData(geojson);
8678

8779
//use in ESM
8880

8981
import * as maptalks from 'maptalks';
90-
import {TileClusterLayer} from 'maptalks.tileclusterlayer';
91-
const tileClusterLayer = new TileClusterLayer("tileClusterLayer",{
92-
...
82+
import {
83+
TileClusterLayer
84+
} from 'maptalks.tileclusterlayer';
85+
const tileClusterLayer = new TileClusterLayer("tileClusterLayer", {
86+
...
9387
});
94-
9588
```

‎index.js‎

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import TileCover from '@mapbox/tile-cover';
55

66
const options = {
77
maxClusterZoom: 18,
8+
minClusterCount: 5,
89
clusterMarkerSymbol: null,
910
markerEvents: {},
1011
clusterDispersion: false,
@@ -249,13 +250,7 @@ export class TileClusterLayer extends maptalks.VectorLayer {
249250
if (ids.length) {
250251
const { x, y, points, features } = this._getClusterResult(globalPoints, ids);
251252
tileCache[key].coordinates = [x, y];
252-
if (ids.length === 1) {
253-
const feature = globalFeatures[ids[0]];
254-
tileCache[key].markers = [new maptalks.Marker(tileCache[key].coordinates, {
255-
symbol: feature.symbol,
256-
properties: feature.properties || {}
257-
})];
258-
} else if (zoom > maxZoom) {
253+
if (zoom > maxZoom || ids.length < this.options.minClusterCount) {
259254
tileCache[key].markers = ids.map(id => {
260255
const feature = globalFeatures[id];
261256
return new maptalks.Marker(globalPoints[id], {

‎test/index.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
</style>
2020
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/maptalks/dist/maptalks.css">
2121
<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>
22+
<script type="text/javascript" src="https://unpkg.com/maptalks.tileclusterlayer/dist/maptalks.tileclusterlayer.js"></script>
2323
<script type="text/javascript" src="https://maptalks.org/maptalks.markercluster/demo/realworld.50000.1.js"></script>
2424
<script type="text/javascript" src="https://maptalks.org/maptalks.markercluster/demo/realworld.50000.2.js"></script>
2525
<script type="text/javascript" src="https://unpkg.com/turf@7.0.0-alpha.1/dist/turf.js"></script>
@@ -96,6 +96,7 @@
9696

9797
const tileClusterLayer = new maptalks.TileClusterLayer('layer', {
9898
maxClusterZoom: 18,
99+
minClusterCount: 10,
99100
clusterDispersion: true,
100101
dispersionCount: 500,
101102
dispersionDuration: 300,

‎test/perf.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
</style>
2020
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/maptalks/dist/maptalks.css">
2121
<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>
22+
<script type="text/javascript" src="https://unpkg.com/maptalks.tileclusterlayer/dist/maptalks.tileclusterlayer.js"></script>
2323
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script>
2424

2525
<body>

0 commit comments

Comments
 (0)