054af09032
This updates ESLint and our shared eslint-config-openlayers to use Prettier. Most formatting changes were automatically applied with this:
npm run lint -- --fix
A few manual changes were required:
* In `examples/offscreen-canvas.js`, the `//eslint-disable-line` comment needed to be moved to the appropriate line to disable the error about the `'worker-loader!./offscreen-canvas.worker.js'` import.
* In `examples/webpack/exapmle-builder.js`, spaces could not be added after a couple `function`s for some reason. While editing this, I reworked `ExampleBuilder` to be a class.
* In `src/ol/format/WMSGetFeatureInfo.js`, the `// @ts-ignore` comment needed to be moved down one line so it applied to the `parsersNS` argument.
73 lines
2.1 KiB
JavaScript
73 lines
2.1 KiB
JavaScript
import Feature from '../src/ol/Feature.js';
|
|
import Map from '../src/ol/Map.js';
|
|
import Point from '../src/ol/geom/Point.js';
|
|
import Select from '../src/ol/interaction/Select.js';
|
|
import Stamen from '../src/ol/source/Stamen.js';
|
|
import VectorSource from '../src/ol/source/Vector.js';
|
|
import View from '../src/ol/View.js';
|
|
import {Icon, Style} from '../src/ol/style.js';
|
|
import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
|
|
|
|
function createStyle(src, img) {
|
|
return new Style({
|
|
image: new Icon({
|
|
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'
|
|
: '';
|
|
});
|