68 lines
1.7 KiB
JavaScript
68 lines
1.7 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 TileJSON from '../src/ol/source/TileJSON.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 {Modify} from '../src/ol/interaction.js';
|
|
import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
|
|
|
|
const iconFeature = new Feature({
|
|
geometry: new Point([0, 0]),
|
|
name: 'Null Island',
|
|
population: 4000,
|
|
rainfall: 500,
|
|
});
|
|
|
|
const iconStyle = new Style({
|
|
image: new Icon({
|
|
anchor: [0.5, 46],
|
|
anchorXUnits: 'fraction',
|
|
anchorYUnits: 'pixels',
|
|
src: 'data/icon.png',
|
|
}),
|
|
});
|
|
|
|
iconFeature.setStyle(iconStyle);
|
|
|
|
const vectorSource = new VectorSource({
|
|
features: [iconFeature],
|
|
});
|
|
|
|
const vectorLayer = new VectorLayer({
|
|
source: vectorSource,
|
|
});
|
|
|
|
const rasterLayer = new TileLayer({
|
|
source: new TileJSON({
|
|
url: 'https://a.tiles.mapbox.com/v3/aj.1x1-degrees.json?secure=1',
|
|
crossOrigin: '',
|
|
}),
|
|
});
|
|
|
|
const target = document.getElementById('map');
|
|
const map = new Map({
|
|
layers: [rasterLayer, vectorLayer],
|
|
target: target,
|
|
view: new View({
|
|
center: [0, 0],
|
|
zoom: 3,
|
|
}),
|
|
});
|
|
|
|
const modify = new Modify({
|
|
layer: vectorLayer,
|
|
style: function () {}, // do not render the modification vertex
|
|
});
|
|
modify.on(['modifystart', 'modifyend'], function (evt) {
|
|
target.style.cursor = evt.type === 'modifystart' ? 'grabbing' : 'pointer';
|
|
});
|
|
map.on('pointermove', function (evt) {
|
|
if (!evt.dragging) {
|
|
target.style.cursor = map.hasFeatureAtPixel(evt.pixel) ? 'pointer' : '';
|
|
}
|
|
});
|
|
|
|
map.addInteraction(modify);
|