marker cluster by tile
npm install maptalks.tileclusterlayerhtml
`
* by npm
`sh
npm i maptalks
npm i maptalks-gl
npm i maptalks.tileclusterlayer
`
* demo online
* tileSize 512
* set infowindow
* dispersion-event
* million markers cluster
`js
function getClusterMarkerSymbol(count, features) {
const symbol = {
markerType: "ellipse",
markerWidth: 65,
markerHeight: 65,
markerFill: "#fff",
markerLineWidth: 0,
markerFillOpacity: 1,
markerOpacity: 1,
textSize: 15,
textName: count,
textHaloFill: "#000",
textHaloRadius: 1.2,
textFill: "#fff",
};
if (count > 5000) {
symbol.markerFill = "red";
} else if (count > 1000) {
symbol.markerFill = "yellow";
}
return symbol;
}
const tileClusterLayer = new maptalks.TileClusterLayer("tileClusterLayer", {
tileSize: 256, // 256/512
maxClusterZoom: 18,
minClusterCount: 5,
//when cluster marker click will show children markers
clusterDispersion: true,
// show cluster marker children max count
dispersionCount: 500,
//get cluster marker symbol
clusterMarkerSymbol: getClusterMarkerSymbol,
// cluster marker,marker events
markerEvents: {
click: function(e) {
console.log(e);
if (e.target.getProperties().isCluster) {
console.log('is cluster marker');
}
},
},
});
tileClusterLayer.addTo(map);
tileClusterLayer.on('clusterstart clusterend dispersionstart dispersionend', e => {
console.log(e);
});
const geojson = {
type: 'FeatureCollection',
features: [
...
]
};
tileClusterLayer.setData(geojson);
//use in ESM
import * as maptalks from 'maptalks';
import {
TileClusterLayer
} from 'maptalks.tileclusterlayer';
const tileClusterLayer = new TileClusterLayer("tileClusterLayer", {
...
});
``