Fiume Coscile
🏛️ fiume
San Giorgio Albanese, Italia
Fiume Coscile
')
.addTo(this.map2dInstance);
setTimeout(() => {
if (this.map2dInstance) this.map2dInstance.invalidateSize();
}, 250);
});
},
init3D() {
if (this.map3dInstance) {
this.$nextTick(() => { this.map3dInstance.resize(); });
return;
}
this.isLoading3D = true;
this.loadMapLibre().then(() => {
const container = document.getElementById('maplibre-container-map_6ad2b303b3b04');
if (!container || typeof maplibregl === 'undefined') {
this.isLoading3D = false;
return;
}
try {
this.map3dInstance = new maplibregl.Map({
container: 'maplibre-container-map_6ad2b303b3b04',
style: {
version: 8,
sources: {
'satellite-tiles': {
type: 'raster',
tiles: [
'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}'
],
tileSize: 256,
maxzoom: 18,
attribution: '© Esri World Imagery'
},
'terrainSource': {
type: 'raster-dem',
url: 'https://demotiles.maplibre.org/terrain-tiles/tiles.json',
tileSize: 256
}
},
layers: [
{
id: 'satellite-layer',
type: 'raster',
source: 'satellite-tiles',
minzoom: 0,
maxzoom: 22
},
{
id: 'hillshading',
type: 'hillshade',
source: 'terrainSource',
paint: {
'hillshade-shadow-color': '#0f172a',
'hillshade-exaggeration': 0.6
}
}
],
terrain: {
source: 'terrainSource',
exaggeration: 1.4
},
sky: {}
},
center: [16.46134, 39.59334],
zoom: 16.2,
pitch: 62,
bearing: 25,
maxZoom: 18.2,
minZoom: 4,
maxPitch: 85
});
// Navigation controls (Zoom + Compass 3D)
this.map3dInstance.addControl(new maplibregl.NavigationControl({ visualizePitch: true }), 'bottom-right');
// Marker 3D ad alta visibilità con antenna pulsante
const el = document.createElement('div');
el.className = 'relative flex items-center justify-center cursor-pointer';
el.innerHTML = `
📍
`;
const popup = new maplibregl.Popup({ offset: 25 })
.setHTML('Fiume Coscile
');
new maplibregl.Marker({ element: el })
.setLngLat([16.46134, 39.59334])
.setPopup(popup)
.addTo(this.map3dInstance);
this.map3dInstance.on('load', () => {
this.isLoading3D = false;
this.map3dInstance.resize();
});
this.map3dInstance.on('idle', () => {
this.isLoading3D = false;
});
setTimeout(() => {
this.isLoading3D = false;
if (this.map3dInstance) this.map3dInstance.resize();
}, 1200);
} catch(err) {
console.error('Errore inizializzazione MapLibre 3D:', err);
this.isLoading3D = false;
}
}).catch(e => {
console.error('Errore caricamento script MapLibre:', e);
this.isLoading3D = false;
});
},
toggleRotation() {
this.isRotating = !this.isRotating;
if (!this.map3dInstance) return;
if (this.isRotating) {
const rotateCamera = () => {
if (!this.isRotating || !this.map3dInstance) return;
this.map3dInstance.setBearing((this.map3dInstance.getBearing() + 0.3) % 360);
this.rotationTimer = requestAnimationFrame(rotateCamera);
};
rotateCamera();
} else {
if (this.rotationTimer) cancelAnimationFrame(this.rotationTimer);
}
},
togglePitch() {
if (!this.map3dInstance) return;
const currentPitch = this.map3dInstance.getPitch();
const targetPitch = currentPitch > 30 ? 0 : 62;
this.map3dInstance.easeTo({ pitch: targetPitch, duration: 600 });
},
loadLeaflet() {
return new Promise((resolve) => {
if (window.L) return resolve();
if (!document.getElementById('leaflet-css')) {
const link = document.createElement('link');
link.id = 'leaflet-css';
link.rel = 'stylesheet';
link.href = 'https://unpkg.com/[email protected]/dist/leaflet.css';
document.head.appendChild(link);
}
if (!document.getElementById('leaflet-js')) {
const script = document.createElement('script');
script.id = 'leaflet-js';
script.src = 'https://unpkg.com/[email protected]/dist/leaflet.js';
script.onload = () => resolve();
script.onerror = () => resolve();
document.head.appendChild(script);
} else {
const checkInterval = setInterval(() => {
if (window.L) {
clearInterval(checkInterval);
resolve();
}
}, 50);
}
});
},
loadMapLibre() {
return new Promise((resolve, reject) => {
if (window.maplibregl) return resolve();
if (!document.getElementById('maplibre-css')) {
const link = document.createElement('link');
link.id = 'maplibre-css';
link.rel = 'stylesheet';
link.href = 'https://unpkg.com/[email protected]/dist/maplibre-gl.css';
document.head.appendChild(link);
}
if (!document.getElementById('maplibre-js')) {
const script = document.createElement('script');
script.id = 'maplibre-js';
script.src = 'https://unpkg.com/[email protected]/dist/maplibre-gl.js';
script.onload = () => resolve();
script.onerror = reject;
document.head.appendChild(script);
} else {
const checkInterval = setInterval(() => {
if (window.maplibregl) {
clearInterval(checkInterval);
resolve();
}
}, 50);
}
});
}
}"
class="relative w-full rounded-2xl md:rounded-3xl overflow-hidden shadow-lg border border-slate-200/80 bg-slate-900 text-slate-800 transition-all duration-300"
:style="`min-height: ${isFullscreen ? '100vh' : '100%'}; height: ${isFullscreen ? '100vh' : '100%'};`">
Generazione Terreno 3D in corso...
