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
38 lines
977 B
JavaScript
38 lines
977 B
JavaScript
import Map from 'ol/Map';
|
|
import View from 'ol/View';
|
|
import {getCenter} from 'ol/extent';
|
|
import ImageLayer from 'ol/layer/Image';
|
|
import Projection from 'ol/proj/Projection';
|
|
import Static from 'ol/source/ImageStatic';
|
|
|
|
|
|
// Map views always need a projection. Here we just want to map image
|
|
// coordinates directly to map coordinates, so we create a projection that uses
|
|
// the image extent in pixels.
|
|
const extent = [0, 0, 1024, 968];
|
|
const projection = new Projection({
|
|
code: 'xkcd-image',
|
|
units: 'pixels',
|
|
extent: extent
|
|
});
|
|
|
|
const map = new Map({
|
|
layers: [
|
|
new ImageLayer({
|
|
source: new Static({
|
|
attributions: '© <a href="http://xkcd.com/license.html">xkcd</a>',
|
|
url: 'https://imgs.xkcd.com/comics/online_communities.png',
|
|
projection: projection,
|
|
imageExtent: extent
|
|
})
|
|
})
|
|
],
|
|
target: 'map',
|
|
view: new View({
|
|
projection: projection,
|
|
center: getCenter(extent),
|
|
zoom: 2,
|
|
maxZoom: 8
|
|
})
|
|
});
|