ad62739a6e
In addition to using const and let, this also upgrades our linter config and removes lint (mostly whitespace).
75 lines
1.7 KiB
JavaScript
75 lines
1.7 KiB
JavaScript
import Map from '../src/ol/Map.js';
|
|
import View from '../src/ol/View.js';
|
|
import Draw from '../src/ol/interaction/Draw.js';
|
|
import Modify from '../src/ol/interaction/Modify.js';
|
|
import Snap from '../src/ol/interaction/Snap.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 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';
|
|
|
|
const raster = new TileLayer({
|
|
source: new OSM()
|
|
});
|
|
|
|
const source = new VectorSource();
|
|
const vector = new VectorLayer({
|
|
source: source,
|
|
style: new Style({
|
|
fill: new Fill({
|
|
color: 'rgba(255, 255, 255, 0.2)'
|
|
}),
|
|
stroke: new Stroke({
|
|
color: '#ffcc33',
|
|
width: 2
|
|
}),
|
|
image: new CircleStyle({
|
|
radius: 7,
|
|
fill: new Fill({
|
|
color: '#ffcc33'
|
|
})
|
|
})
|
|
})
|
|
});
|
|
|
|
const map = new Map({
|
|
layers: [raster, vector],
|
|
target: 'map',
|
|
view: new View({
|
|
center: [-11000000, 4600000],
|
|
zoom: 4
|
|
})
|
|
});
|
|
|
|
const modify = new Modify({source: source});
|
|
map.addInteraction(modify);
|
|
|
|
let draw, snap; // global so we can remove them later
|
|
const typeSelect = document.getElementById('type');
|
|
|
|
function addInteractions() {
|
|
draw = new Draw({
|
|
source: source,
|
|
type: typeSelect.value
|
|
});
|
|
map.addInteraction(draw);
|
|
snap = new Snap({source: source});
|
|
map.addInteraction(snap);
|
|
|
|
}
|
|
|
|
/**
|
|
* Handle change event.
|
|
*/
|
|
typeSelect.onchange = function() {
|
|
map.removeInteraction(draw);
|
|
map.removeInteraction(snap);
|
|
addInteractions();
|
|
};
|
|
|
|
addInteractions();
|