ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Add a minimum distance config to the cluster source

Browse Source
This commit is contained in:
Maximilian Krög
2020-01-14 22:50:04 +01:00
parent c9ec2083d3
commit 1c4f525ca9
4 changed files with 144 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
examples/cluster.css Normal file
View File

@@ -0,0 +1,15 @@
.info {
min-width: 3em;
text-align: right;
}
form {
display: table;
}
form > div {
display: table-row;
}
form > div > * {
display: table-cell;
white-space: nowrap;
padding-right: 5px;
}

20
examples/cluster.html
View File

@@ -8,6 +8,22 @@ tags: "cluster, vector"
---
<div id="map" class="map"></div>
<form>
<label for="distance">cluster distance</label>
<input id="distance" type="range" min="0" max="100" step="1" value="40"/>
<div>
<label for="distance" cellspan>Cluster distance: </label>
<span id="distance-info" class="info"></span>
<span>px</span>
<input id="distance" type="range" min="0" max="200" step="1" value="40"/>
</div>
<div>
<label for="min-distance">Min distance:</label>
<span id="min-distance-info" class="info"></span>
<span>px</span>
<input id="min-distance" type="range" min="0" max="200" step="1" value="20"/>
</div>
<div>
<span>Clusters:</span>
<span id ="num-clusters" class="info"></span>
<span></span>
<span></span>
</div>
</form>

24
examples/cluster.js
View File

@@ -13,7 +13,11 @@ 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');
const distanceInput = document.getElementById('distance');
const distanceNode = document.getElementById('distance-info');
const minDistanceInput = document.getElementById('min-distance');
const minDistanceNode = document.getElementById('min-distance-info');
const numClustersNode = document.getElementById('num-clusters');
const count = 20000;
const features = new Array(count);
@@ -28,9 +32,15 @@ const source = new VectorSource({
});
const clusterSource = new Cluster({
distance: parseInt(distance.value, 10),
distance: parseInt(distanceInput.value, 10),
minDistance: parseInt(minDistanceInput.value, 10),
source: source,
});
clusterSource.on('change', function (evt) {
numClustersNode.innerText = evt.target.features.length;
});
distanceNode.innerText = clusterSource.getDistance();
minDistanceNode.innerText = clusterSource.getMinDistance();
const styleCache = {};
const clusters = new VectorLayer({
@@ -75,8 +85,14 @@ const map = new Map({
}),
});
distance.addEventListener('input', function () {
clusterSource.setDistance(parseInt(distance.value, 10));
distanceInput.addEventListener('input', function () {
distanceNode.innerText = distanceInput.value;
clusterSource.setDistance(parseInt(distanceInput.value, 10));
});
minDistanceInput.addEventListener('input', function () {
minDistanceNode.innerText = minDistanceInput.value;
clusterSource.setMinDistance(parseInt(minDistanceInput.value, 10));
});
map.on('click', (e) => {