79c8afdba8
To have the same path (starting with `ol/`, without `.js`) as in the documentation. The support was added in the webpack config in #8928
73 lines
2.1 KiB
JavaScript
73 lines
2.1 KiB
JavaScript
import Feature from 'ol/Feature';
|
|
import Map from 'ol/Map';
|
|
import View from 'ol/View';
|
|
import Point from 'ol/geom/Point';
|
|
import Select from 'ol/interaction/Select';
|
|
import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer';
|
|
import Stamen from 'ol/source/Stamen';
|
|
import VectorSource from 'ol/source/Vector';
|
|
import {Icon, Style} from 'ol/style';
|
|
|
|
|
|
function createStyle(src, img) {
|
|
return new Style({
|
|
image: new Icon(/** @type {module:ol/style/Icon~Options} */ ({
|
|
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' : '';
|
|
});
|