113 lines
No EOL
3.8 KiB
HTML
113 lines
No EOL
3.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="it">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>Basemap Protomaps + PMTiles (locale)</title>
|
|
<!-- CSS MapLibre -->
|
|
<link rel="stylesheet" href="/assets/maplibre/maplibre-gl.css">
|
|
<style>
|
|
html,body,#map{height:100%;margin:0}
|
|
.ctrl{position:absolute;z-index:10;top:8px;left:8px;background:rgba(255,255,255,.85);
|
|
padding:6px 8px;border-radius:6px;font:13px/1.2 system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
|
|
.ctrl label{display:inline-flex;gap:.4rem;align-items:center;cursor:pointer}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="map"></div>
|
|
<div class="ctrl">
|
|
<label title="Amplificazione verticale del terreno">
|
|
Exaggeration: <input id="exag" type="range" min="0.8" max="2.5" step="0.1" value="1.6">
|
|
<span id="exagv">1.6</span>x
|
|
</label>
|
|
</div>
|
|
|
|
<!-- Librerie locali -->
|
|
<script src="/assets/maplibre/maplibre-gl.js"></script>
|
|
<script src="/assets/pmtiles/pmtiles.js"></script>
|
|
<script src="/assets/basemaps/basemaps.js" crossorigin="anonymous"></script>
|
|
|
|
<script>
|
|
// 1) PMTiles protocol
|
|
const protocol = new pmtiles.Protocol({ metadata: true });
|
|
maplibregl.addProtocol("pmtiles", protocol.tile);
|
|
|
|
// 2) Basemap vettoriale (MVT) in PMTiles sotto /tiles
|
|
const PMTILES_URL = "tiles/planet.pmtiles"; // basemap MVT
|
|
protocol.add(new pmtiles.PMTiles(PMTILES_URL));
|
|
|
|
// 3) Asset locali
|
|
const origin = window.location.origin;
|
|
const spriteUrl = `${origin}/assets/sprites/v4/light`; // base sprite (senza estensione)
|
|
const glyphsUrl = `${origin}/assets/fonts/{fontstack}/{range}.pbf`; // {fontstack}/{range} letterali
|
|
const terrainDEM = `${origin}/data/terrain.pmtiles`; // DEM Terrarium PNG
|
|
|
|
// 4) Mappa
|
|
const map = window.map = new maplibregl.Map({
|
|
container: "map",
|
|
style: {
|
|
version: 8,
|
|
glyphs: glyphsUrl,
|
|
sprite: spriteUrl,
|
|
sources: {
|
|
protomaps: {
|
|
type: "vector",
|
|
url: "pmtiles://" + PMTILES_URL,
|
|
attribution: 'Protomaps © OpenStreetMap'
|
|
}
|
|
},
|
|
layers: basemaps.layers("protomaps", basemaps.namedFlavor("light"), { lang: "en" })
|
|
},
|
|
center: [12.05, 44.22],
|
|
zoom: 8,
|
|
pitch: 60,
|
|
maxPitch: 85
|
|
});
|
|
|
|
map.on('styledata', () => {
|
|
console.log('glyphs URL =', map.getStyle().glyphs);
|
|
});
|
|
|
|
// 5) Terreno 3D (DEM Terrarium) + hillshade dinamico
|
|
map.on('load', () => {
|
|
// Sorgente DEM (Terrarium => encoding 'terrarium')
|
|
map.addSource('terrain-dem', {
|
|
type: 'raster-dem',
|
|
url: 'pmtiles://' + terrainDEM,
|
|
encoding: 'terrarium', // usa 'mapbox' se il tuo DEM fosse Mapbox Terrain RGB
|
|
tileSize: 256
|
|
});
|
|
|
|
map.addSource('hillshade-dem', {
|
|
type: 'raster-dem',
|
|
url: 'pmtiles://' + terrainDEM,
|
|
encoding: 'terrarium',
|
|
tileSize: 256,
|
|
});
|
|
|
|
// Attiva 3D
|
|
let exag = 1.6;
|
|
map.setTerrain({ source: 'terrain-dem', exaggeration: exag }); // terreno 3D
|
|
// Hillshade dinamico dal DEM (sotto le etichette)
|
|
const labelLayerId = map.getStyle().layers.find(l => l.type === 'symbol')?.id;
|
|
map.addLayer({
|
|
id: 'hillshade',
|
|
type: 'hillshade',
|
|
source: 'terrain-dem',
|
|
paint: {
|
|
'hillshade-exaggeration': 0.5,
|
|
'hillshade-illumination-direction': 315
|
|
}
|
|
}, labelLayerId);
|
|
|
|
// Slider per cambiare l'amplificazione
|
|
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 }); };
|
|
exIn.addEventListener('input', e => setExag(parseFloat(e.target.value)));
|
|
});
|
|
|
|
// 6) Controlli
|
|
map.addControl(new maplibregl.NavigationControl({ visualizePitch: true }), "top-right");
|
|
</script>
|
|
</body>
|
|
</html> |