diff --git a/examples/cluster.js b/examples/cluster.js index 944e1116b2..48e1d0493c 100644 --- a/examples/cluster.js +++ b/examples/cluster.js @@ -11,6 +11,7 @@ import { } from '../src/ol/style.js'; import {Cluster, OSM, Vector as VectorSource} from '../src/ol/source.js'; import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; +import {boundingExtent} from '../src/ol/extent.js'; const distance = document.getElementById('distance'); @@ -77,3 +78,18 @@ const map = new Map({ distance.addEventListener('input', function () { clusterSource.setDistance(parseInt(distance.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]}); + } + } + }); +});