ad62739a6e
In addition to using const and let, this also upgrades our linter config and removes lint (mostly whitespace).
75 lines
2.2 KiB
JavaScript
75 lines
2.2 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 Select from '../src/ol/interaction/Select.js';
|
|
import TileLayer from '../src/ol/layer/Tile.js';
|
|
import VectorLayer from '../src/ol/layer/Vector.js';
|
|
import Stamen from '../src/ol/source/Stamen.js';
|
|
import VectorSource from '../src/ol/source/Vector.js';
|
|
import Icon from '../src/ol/style/Icon.js';
|
|
import Style from '../src/ol/style/Style.js';
|
|
|
|
|
|
function createStyle(src, img) {
|
|
return new Style({
|
|
image: new Icon(/** @type {olx.style.IconOptions} */ ({
|
|
anchor: [0.5, 0.96],
|
|
crossOrigin: 'anonymous',
|
|
src: src,
|
|
img: img,
|
|
imgSize: img ? [img.width, img.height] : undefined
|
|
}))
|
|
});
|
|
}
|
|
|
|
const iconFeature = new Feature(new Point([0, 0]));
|
|
iconFeature.set('style', createStyle('data/icon.png', undefined));
|
|
|
|
const map = new Map({
|
|
layers: [
|
|
new TileLayer({
|
|
source: new Stamen({layer: 'watercolor'})
|
|
}),
|
|
new VectorLayer({
|
|
style: function(feature) {
|
|
return feature.get('style');
|
|
},
|
|
source: new VectorSource({features: [iconFeature]})
|
|
})
|
|
],
|
|
target: document.getElementById('map'),
|
|
view: new View({
|
|
center: [0, 0],
|
|
zoom: 3
|
|
})
|
|
});
|
|
|
|
const selectStyle = {};
|
|
const select = new Select({
|
|
style: function(feature) {
|
|
const image = feature.get('style').getImage().getImage();
|
|
if (!selectStyle[image.src]) {
|
|
const canvas = document.createElement('canvas');
|
|
const context = canvas.getContext('2d');
|
|
canvas.width = image.width;
|
|
canvas.height = image.height;
|
|
context.drawImage(image, 0, 0, image.width, image.height);
|
|
const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
|
|
const data = imageData.data;
|
|
for (let i = 0, ii = data.length; i < ii; i = i + (i % 4 == 2 ? 2 : 1)) {
|
|
data[i] = 255 - data[i];
|
|
}
|
|
context.putImageData(imageData, 0, 0);
|
|
selectStyle[image.src] = createStyle(undefined, canvas);
|
|
}
|
|
return selectStyle[image.src];
|
|
}
|
|
});
|
|
map.addInteraction(select);
|
|
|
|
map.on('pointermove', function(evt) {
|
|
map.getTargetElement().style.cursor =
|
|
map.hasFeatureAtPixel(evt.pixel) ? 'pointer' : '';
|
|
});
|