ad62739a6e
In addition to using const and let, this also upgrades our linter config and removes lint (mostly whitespace).
67 lines
1.5 KiB
JavaScript
67 lines
1.5 KiB
JavaScript
import Map from '../src/ol/Map.js';
|
|
import View from '../src/ol/View.js';
|
|
import Point from '../src/ol/geom/Point.js';
|
|
import Draw from '../src/ol/interaction/Draw.js';
|
|
import TileLayer from '../src/ol/layer/Tile.js';
|
|
import VectorLayer from '../src/ol/layer/Vector.js';
|
|
import OSM from '../src/ol/source/OSM.js';
|
|
import VectorSource from '../src/ol/source/Vector.js';
|
|
import Icon from '../src/ol/style/Icon.js';
|
|
import Stroke from '../src/ol/style/Stroke.js';
|
|
import Style from '../src/ol/style/Style.js';
|
|
|
|
const raster = new TileLayer({
|
|
source: new OSM()
|
|
});
|
|
|
|
const source = new VectorSource();
|
|
|
|
const styleFunction = function(feature) {
|
|
const geometry = feature.getGeometry();
|
|
const styles = [
|
|
// linestring
|
|
new Style({
|
|
stroke: new Stroke({
|
|
color: '#ffcc33',
|
|
width: 2
|
|
})
|
|
})
|
|
];
|
|
|
|
geometry.forEachSegment(function(start, end) {
|
|
const dx = end[0] - start[0];
|
|
const dy = end[1] - start[1];
|
|
const rotation = Math.atan2(dy, dx);
|
|
// arrows
|
|
styles.push(new Style({
|
|
geometry: new Point(end),
|
|
image: new Icon({
|
|
src: 'data/arrow.png',
|
|
anchor: [0.75, 0.5],
|
|
rotateWithView: true,
|
|
rotation: -rotation
|
|
})
|
|
}));
|
|
});
|
|
|
|
return styles;
|
|
};
|
|
const vector = new VectorLayer({
|
|
source: source,
|
|
style: styleFunction
|
|
});
|
|
|
|
const map = new Map({
|
|
layers: [raster, vector],
|
|
target: 'map',
|
|
view: new View({
|
|
center: [-11000000, 4600000],
|
|
zoom: 4
|
|
})
|
|
});
|
|
|
|
map.addInteraction(new Draw({
|
|
source: source,
|
|
type: 'LineString'
|
|
}));
|