ad62739a6e
In addition to using const and let, this also upgrades our linter config and removes lint (mostly whitespace).
96 lines
2.3 KiB
JavaScript
96 lines
2.3 KiB
JavaScript
import Map from '../src/ol/Map.js';
|
|
import View from '../src/ol/View.js';
|
|
import GPX from '../src/ol/format/GPX.js';
|
|
import TileLayer from '../src/ol/layer/Tile.js';
|
|
import VectorLayer from '../src/ol/layer/Vector.js';
|
|
import BingMaps from '../src/ol/source/BingMaps.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 BingMaps({
|
|
imagerySet: 'Aerial',
|
|
key: 'As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5'
|
|
})
|
|
});
|
|
|
|
const style = {
|
|
'Point': new Style({
|
|
image: new CircleStyle({
|
|
fill: new Fill({
|
|
color: 'rgba(255,255,0,0.4)'
|
|
}),
|
|
radius: 5,
|
|
stroke: new Stroke({
|
|
color: '#ff0',
|
|
width: 1
|
|
})
|
|
})
|
|
}),
|
|
'LineString': new Style({
|
|
stroke: new Stroke({
|
|
color: '#f00',
|
|
width: 3
|
|
})
|
|
}),
|
|
'MultiLineString': new Style({
|
|
stroke: new Stroke({
|
|
color: '#0f0',
|
|
width: 3
|
|
})
|
|
})
|
|
};
|
|
|
|
const vector = new VectorLayer({
|
|
source: new VectorSource({
|
|
url: 'data/gpx/fells_loop.gpx',
|
|
format: new GPX()
|
|
}),
|
|
style: function(feature) {
|
|
return style[feature.getGeometry().getType()];
|
|
}
|
|
});
|
|
|
|
const map = new Map({
|
|
layers: [raster, vector],
|
|
target: document.getElementById('map'),
|
|
view: new View({
|
|
center: [-7916041.528716288, 5228379.045749711],
|
|
zoom: 12
|
|
})
|
|
});
|
|
|
|
const displayFeatureInfo = function(pixel) {
|
|
const features = [];
|
|
map.forEachFeatureAtPixel(pixel, function(feature) {
|
|
features.push(feature);
|
|
});
|
|
if (features.length > 0) {
|
|
const info = [];
|
|
let i, ii;
|
|
for (i = 0, ii = features.length; i < ii; ++i) {
|
|
info.push(features[i].get('desc'));
|
|
}
|
|
document.getElementById('info').innerHTML = info.join(', ') || '(unknown)';
|
|
map.getTarget().style.cursor = 'pointer';
|
|
} else {
|
|
document.getElementById('info').innerHTML = ' ';
|
|
map.getTarget().style.cursor = '';
|
|
}
|
|
};
|
|
|
|
map.on('pointermove', function(evt) {
|
|
if (evt.dragging) {
|
|
return;
|
|
}
|
|
const pixel = map.getEventPixel(evt.originalEvent);
|
|
displayFeatureInfo(pixel);
|
|
});
|
|
|
|
map.on('click', function(evt) {
|
|
displayFeatureInfo(evt.pixel);
|
|
});
|