Move layers up and down in the map.
import StadiaMaps from 'ol/source/StadiaMaps.js';
import Extent from '@giro3d/giro3d/core/geographic/Extent.js';
import Instance from '@giro3d/giro3d/core/Instance.js';
import ColorLayer from '@giro3d/giro3d/core/layer/ColorLayer.js';
import Map from '@giro3d/giro3d/entities/Map.js';
import Inspector from '@giro3d/giro3d/gui/Inspector.js';
import TiledImageSource from '@giro3d/giro3d/sources/TiledImageSource.js';
import StatusBar from './widgets/StatusBar.js';
const crs = 'EPSG:3857';
const mapExtent = Extent.fromCenterAndSize(crs, { x: 256227, y: 5882214 }, 2000000, 2000000);
const viewerDiv = document.getElementById('viewerDiv');
// Creates a giro3d instance
const instance = new Instance(viewerDiv, { crs });
// Instanciates camera
instance.camera.camera3D.position.set(256227, 5882214, 4000000);
const map = new Map('planar', { extent: mapExtent, backgroundOpacity: 0 });
instance.add(map);
const layerSize = 1000000;
const watercolor = new ColorLayer(
'watercolor',
{
extent: Extent.fromCenterAndSize(crs, { x: -100000, y: 6169226 }, layerSize, layerSize),
source: new TiledImageSource({ source: new StadiaMaps({ layer: 'stamen_watercolor', wrapX: false }) }),
},
);
const toner = new ColorLayer(
'toner',
{
extent: Extent.fromCenterAndSize(crs, { x: 500000, y: 5669226 }, layerSize, layerSize),
source: new TiledImageSource({ source: new StadiaMaps({ layer: 'stamen_toner', wrapX: false }) }),
},
);
const terrain = new ColorLayer(
'terrain',
{
extent: Extent.fromCenterAndSize(crs, { x: 900000, y: 5169226 }, layerSize, layerSize),
source: new TiledImageSource({ source: new StadiaMaps({ layer: 'stamen_terrain', wrapX: false }) }),
},
);
map.addLayer(watercolor);
map.addLayer(toner);
map.addLayer(terrain);
Inspector.attach(document.getElementById('panelDiv'), instance);
StatusBar.bind(instance);
const layers = {
watercolor,
toner,
terrain,
};
function bindUI(layer) {
const id = layer.id;
const btnUp = document.getElementById(`btn-${id}-up`);
const btnDown = document.getElementById(`btn-${id}-down`);
const layerElt = document.getElementById(`${id}`);
layerElt.layer = layer;
const container = layerElt.parentNode;
function reorder() {
[...container.children]
.sort((a, b) => (map.getIndex(layers[a.id]) > map.getIndex(layers[b.id]) ? -1 : 1))
.forEach(node => container.appendChild(node));
}
btnUp.onclick = () => { map.moveLayerUp(layer); reorder(); };
btnDown.onclick = () => { map.moveLayerDown(layer); reorder(); };
reorder();
}
bindUI(watercolor);
bindUI(toner);
bindUI(terrain);