ad62739a6e
In addition to using const and let, this also upgrades our linter config and removes lint (mostly whitespace).
82 lines
2.0 KiB
JavaScript
82 lines
2.0 KiB
JavaScript
import Feature from '../src/ol/Feature.js';
|
|
import Map from '../src/ol/Map.js';
|
|
import View from '../src/ol/View.js';
|
|
import Point from '../src/ol/geom/Point.js';
|
|
import TileLayer from '../src/ol/layer/Tile.js';
|
|
import VectorLayer from '../src/ol/layer/Vector.js';
|
|
import Cluster from '../src/ol/source/Cluster.js';
|
|
import OSM from '../src/ol/source/OSM.js';
|
|
import VectorSource from '../src/ol/source/Vector.js';
|
|
import CircleStyle from '../src/ol/style/Circle.js';
|
|
import Fill from '../src/ol/style/Fill.js';
|
|
import Stroke from '../src/ol/style/Stroke.js';
|
|
import Style from '../src/ol/style/Style.js';
|
|
import Text from '../src/ol/style/Text.js';
|
|
|
|
|
|
const distance = document.getElementById('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(distance.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
|
|
})
|
|
});
|
|
|
|
distance.addEventListener('input', function() {
|
|
clusterSource.setDistance(parseInt(distance.value, 10));
|
|
});
|