43 lines
1.1 KiB
JavaScript
43 lines
1.1 KiB
JavaScript
import Map from '../src/ol/Map.js';
|
|
import OSM from '../src/ol/source/OSM.js';
|
|
import TileLayer from '../src/ol/layer/WebGLTile.js';
|
|
import View from '../src/ol/View.js';
|
|
import XYZ from '../src/ol/source/XYZ.js';
|
|
|
|
const key = 'get_your_own_D6rA4zTHduk6KOKTXzGB';
|
|
|
|
const imagery = new TileLayer({
|
|
className: 'ol-layer-imagery',
|
|
source: new XYZ({
|
|
attributions:
|
|
'<a href="https://www.maptiler.com/copyright/" target="_blank">© MapTiler</a> ',
|
|
url: 'https://api.maptiler.com/tiles/satellite/{z}/{x}/{y}.jpg?key=' + key,
|
|
maxZoom: 20,
|
|
crossOrigin: '',
|
|
}),
|
|
});
|
|
|
|
const osm = new TileLayer({
|
|
source: new OSM(),
|
|
});
|
|
|
|
const map = new Map({
|
|
layers: [imagery, osm],
|
|
target: 'map',
|
|
view: new View({
|
|
center: [0, 0],
|
|
zoom: 2,
|
|
}),
|
|
});
|
|
|
|
const opacityInput = document.getElementById('opacity-input');
|
|
const opacityOutput = document.getElementById('opacity-output');
|
|
function update() {
|
|
const opacity = parseFloat(opacityInput.value);
|
|
osm.setOpacity(opacity);
|
|
opacityOutput.innerText = opacity.toFixed(2);
|
|
}
|
|
opacityInput.addEventListener('input', update);
|
|
opacityInput.addEventListener('change', update);
|
|
update();
|