61 lines
No EOL
2.2 KiB
Text
61 lines
No EOL
2.2 KiB
Text
<script>
|
||
// ... codice precedente ...
|
||
|
||
map.on('load', () => {
|
||
// 1) Sorgente DEM per la MESH 3D (terrain)
|
||
map.addSource('terrain-dem', {
|
||
type: 'raster-dem',
|
||
// Se stai usando il tuo PMTiles Terrarium:
|
||
// url: 'pmtiles://' + `${origin}/data/terrain_terrarium.pmtiles`,
|
||
// encoding: 'terrarium',
|
||
// tileSize: 256, // oppure 512 se il tuo tileset lo usa
|
||
|
||
// ESEMPIO DEM DI TEST (Terrarium pubblico):
|
||
url: 'https://demotiles.maplibre.org/terrain-tiles/tiles.json',
|
||
tileSize: 256
|
||
});
|
||
|
||
// 2) Sorgente DEM *separata* per l'HILLSHADE (stesso dataset, ID diverso)
|
||
map.addSource('hillshade-dem', {
|
||
type: 'raster-dem',
|
||
// Se usi lo stesso PMTiles Terrarium, ripeti gli stessi parametri qui
|
||
// url: 'pmtiles://' + `${origin}/data/terrain_terrarium.pmtiles`,
|
||
// encoding: 'terrarium',
|
||
// tileSize: 256,
|
||
|
||
// DEM di test identico all’esempio sopra
|
||
url: 'https://demotiles.maplibre.org/terrain-tiles/tiles.json',
|
||
tileSize: 256
|
||
});
|
||
|
||
// 3) Attiva il terrain 3D sulla sola source 'terrain-dem'
|
||
let exag = 1.6;
|
||
map.setTerrain({ source: 'terrain-dem', exaggeration: exag });
|
||
|
||
// 4) Inserisci l’hillshade usando la source 'hillshade-dem'
|
||
const labelLayerId = map.getStyle().layers.find(l => l.type === 'symbol')?.id;
|
||
map.addLayer({
|
||
id: 'hillshade',
|
||
type: 'hillshade',
|
||
source: 'hillshade-dem',
|
||
paint: {
|
||
'hillshade-exaggeration': 0.5,
|
||
'hillshade-illumination-direction': 315
|
||
// (opzionale) 'hillshade-illumination-anchor': 'map'
|
||
// ancora ‘map’ può aiutare con il terrain attivo
|
||
}
|
||
}, labelLayerId);
|
||
|
||
// 5) Slider per cambiare l’exaggeration (non ricrea le sorgenti)
|
||
const exIn = document.getElementById('exag');
|
||
const exSp = document.getElementById('exagv');
|
||
const setExag = (v) => {
|
||
exSp.textContent = v.toFixed(1);
|
||
map.setTerrain({ source: 'terrain-dem', exaggeration: v });
|
||
// ← ora NON vedrai più il warning, perché l’hillshade usa un’altra source
|
||
};
|
||
exIn?.addEventListener('input', e => setExag(parseFloat(e.target.value)));
|
||
});
|
||
|
||
// ... codice successivo ...
|
||
</script> |