OpenLayers OpenLayers Example of using ol/source/Cluster.
This example shows how to do clustering on point features.
import Feature from 'ol/Feature.js'; import Map from 'ol/Map.js'; import View from 'ol/View.js'; import {boundingExtent} from 'ol/extent.js'; import Point from 'ol/geom/Point.js'; import TileLayer from 'ol/layer/Tile.js'; import VectorLayer from 'ol/layer/Vector.js'; import Cluster from 'ol/source/Cluster.js'; import OSM from 'ol/source/OSM.js'; import VectorSource from 'ol/source/Vector.js'; import CircleStyle from 'ol/style/Circle.js'; import Fill from 'ol/style/Fill.js'; import Stroke from 'ol/style/Stroke.js'; import Style from 'ol/style/Style.js'; import Text from 'ol/style/Text.js'; const distanceInput = document.getElementById('distance'); const minDistanceInput = document.getElementById('min-distance'); const count = 20000; const features = new Array(count); const e = 4500000; for (let i = 0; i < count; ++i) { const coordinates = [2 * e * Math.random() - e, 2 * e * Math.random() - e]; features[i] = new Feature(new Point(coordinates)); } const source = new VectorSource({ features: features, }); const clusterSource = new Cluster({ distance: parseInt(distanceInput.value, 10), minDistance: parseInt(minDistanceInput.value, 10), source: source, }); const styleCache = {}; const clusters = new VectorLayer({ source: clusterSource, style: function (feature) { const size = feature.get('features').length; let style = styleCache[size]; if (!style) { style = new Style({ image: new CircleStyle({ radius: 10, stroke: new Stroke({ color: '#fff', }), fill: new Fill({ color: '#3399CC', }), }), text: new Text({ text: size.toString(), fill: new Fill({ color: '#fff', }), }), }); styleCache[size] = style; } return style; }, }); const raster = new TileLayer({ source: new OSM(), }); const map = new Map({ layers: [raster, clusters], target: 'map', view: new View({ center: [0, 0], zoom: 2, }), }); distanceInput.addEventListener('input', function () { clusterSource.setDistance(parseInt(distanceInput.value, 10)); }); minDistanceInput.addEventListener('input', function () { clusterSource.setMinDistance(parseInt(minDistanceInput.value, 10)); }); map.on('click', (e) => { clusters.getFeatures(e.pixel).then((clickedFeatures) => { if (clickedFeatures.length) { // Get clustered Coordinates const features = clickedFeatures[0].get('features'); if (features.length > 1) { const extent = boundingExtent( features.map((r) => r.getGeometry().getCoordinates()), ); map.getView().fit(extent, {duration: 1000, padding: [50, 50, 50, 50]}); } } }); }); <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Clustered Features</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"> <link rel="stylesheet" href="node_modules/ol/ol.css"> <style> .map { width: 100%; height: 400px; } </style> </head> <body> <div id="map" class="map"></div> <form> <div class="form-group"> <label for="distance" class="col-form-label pb-0">Cluster distance</label> <input id="distance" class="form-range" type="range" min="0" max="200" step="1" value="40"/> <small class="form-text text-muted"> The distance within which features will be clustered together. </small> </div> <div class="form-group"> <label for="min-distance" class="col-form-label pb-0">Minimum distance</label> <input id="min-distance" class="form-range" type="range" min="0" max="200" step="1" value="20"/> <small class="form-text text-muted"> The minimum distance between clusters. Can't be larger than the configured distance. </small> </div> </form> <script type="module" src="main.js"></script> </body> </html>{ "name": "cluster", "dependencies": { "ol": "10.7.0" }, "devDependencies": { "vite": "^3.2.3" }, "scripts": { "start": "vite", "build": "vite build" } }