ad62739a6e
In addition to using const and let, this also upgrades our linter config and removes lint (mostly whitespace).
96 lines
2.5 KiB
JavaScript
96 lines
2.5 KiB
JavaScript
import Feature from '../src/ol/Feature.js';
|
|
import Map from '../src/ol/Map.js';
|
|
import Observable from '../src/ol/Observable.js';
|
|
import View from '../src/ol/View.js';
|
|
import {defaults as defaultControls} from '../src/ol/control.js';
|
|
import {easeOut} from '../src/ol/easing.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 {fromLonLat} from '../src/ol/proj.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 Stroke from '../src/ol/style/Stroke.js';
|
|
import Style from '../src/ol/style/Style.js';
|
|
|
|
|
|
const map = new Map({
|
|
layers: [
|
|
new TileLayer({
|
|
source: new OSM({
|
|
wrapX: false
|
|
})
|
|
})
|
|
],
|
|
controls: defaultControls({
|
|
attributionOptions: {
|
|
collapsible: false
|
|
}
|
|
}),
|
|
target: 'map',
|
|
view: new View({
|
|
center: [0, 0],
|
|
zoom: 1
|
|
})
|
|
});
|
|
|
|
const source = new VectorSource({
|
|
wrapX: false
|
|
});
|
|
const vector = new VectorLayer({
|
|
source: source
|
|
});
|
|
map.addLayer(vector);
|
|
|
|
function addRandomFeature() {
|
|
const x = Math.random() * 360 - 180;
|
|
const y = Math.random() * 180 - 90;
|
|
const geom = new Point(fromLonLat([x, y]));
|
|
const feature = new Feature(geom);
|
|
source.addFeature(feature);
|
|
}
|
|
|
|
const duration = 3000;
|
|
function flash(feature) {
|
|
const start = new Date().getTime();
|
|
const listenerKey = map.on('postcompose', animate);
|
|
|
|
function animate(event) {
|
|
const vectorContext = event.vectorContext;
|
|
const frameState = event.frameState;
|
|
const flashGeom = feature.getGeometry().clone();
|
|
const elapsed = frameState.time - start;
|
|
const elapsedRatio = elapsed / duration;
|
|
// radius will be 5 at start and 30 at end.
|
|
const radius = easeOut(elapsedRatio) * 25 + 5;
|
|
const opacity = easeOut(1 - elapsedRatio);
|
|
|
|
const style = new Style({
|
|
image: new CircleStyle({
|
|
radius: radius,
|
|
snapToPixel: false,
|
|
stroke: new Stroke({
|
|
color: 'rgba(255, 0, 0, ' + opacity + ')',
|
|
width: 0.25 + opacity
|
|
})
|
|
})
|
|
});
|
|
|
|
vectorContext.setStyle(style);
|
|
vectorContext.drawGeometry(flashGeom);
|
|
if (elapsed > duration) {
|
|
Observable.unByKey(listenerKey);
|
|
return;
|
|
}
|
|
// tell OpenLayers to continue postcompose animation
|
|
map.render();
|
|
}
|
|
}
|
|
|
|
source.on('addfeature', function(e) {
|
|
flash(e.feature);
|
|
});
|
|
|
|
window.setInterval(addRandomFeature, 1000);
|