I riquadri 3D fotorealistici sono nel formato glTF standard OGC, quindi puoi utilizzare qualsiasi renderer che supporti la specifica OGC 3D Tiles per creare le tue visualizzazioni 3D. Ad esempio, Cesium è una libreria open source di base per il rendering di visualizzazioni 3D.
Lavorare con CesiumJS
CesiumJS è una libreria JavaScript open source per la visualizzazione 3D sul web. Per ulteriori informazioni sull'utilizzo di CesiumJS, consulta Scopri di più su CesiumJS.
Controlli utente
Il renderer dei riquadri CesiumJS dispone di un set standard di controlli utente.
| Azione | Descrizione |
|---|---|
| Visualizzazione panoramica | Clic con il tasto sinistro e trascina |
| Visualizzazione zoom | Fai clic con il tasto destro del mouse e trascina o fai scorrere la rotellina del mouse |
| Ruota visualizzazione | Ctrl + clic con il tasto sinistro/destro e trascina, o clic con il pulsante centrale del mouse e trascinamento |
Best practice
Esistono diversi approcci per ridurre i tempi di caricamento di CesiumJS 3D. Ad esempio:
Abilita le richieste simultanee aggiungendo la seguente istruzione all'HTML di rendering:
Cesium.RequestScheduler.requestsByServer["tile.googleapis.com:443"] = <REQUEST_COUNT>Più alto è il valore
REQUEST_COUNT, più rapidamente vengono caricati i riquadri. Tuttavia, durante il caricamento in un browser Chrome conREQUEST_COUNTmaggiore di 10 e la cache disattivata, potresti riscontrare un problema di Chrome noto. Per la maggior parte dei casi d'uso, consigliamo un valoreREQUEST_COUNTpari a 18 per prestazioni ottimali.Attiva l'opzione per ignorare i livelli di dettaglio. Per ulteriori informazioni, consulta questo problema di Cesium.
Assicurati di visualizzare correttamente le attribuzioni dei dati attivando showCreditsOnScreen: true. Per maggiori informazioni, consulta la sezione Norme.
Metriche di rendering
Per trovare la frequenza fotogrammi, osserva quante volte al secondo viene chiamato il metodo requestAnimationFrame.
Per vedere come viene calcolata la latenza di frame, dai un'occhiata alla classe PerformanceDisplay.
Esempi di renderer CesiumJS
Puoi utilizzare il renderer CesiumJS con i riquadri 3D dell'API Map Tiles semplicemente fornendo l'URL principale del set di riquadri.
Esempio semplice
L'esempio seguente inizializza il renderer CesiumJS, quindi carica il set di riquadri radice.
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>CesiumJS 3D Tiles Simple Demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/cesiumjs/1.105/Build/Cesium/Cesium.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/cesiumjs/1.105/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
</head>
<body>
<div id="cesiumContainer"></div>
<script>
// Enable simultaneous requests.
Cesium.RequestScheduler.requestsByServer["tile.googleapis.com:443"] = 18;
// Create the viewer.
const viewer = new Cesium.Viewer('cesiumContainer', {
imageryProvider: false,
baseLayerPicker: false,
geocoder: false,
globe: false,
// https://cesium.com/blog/2018/01/24/cesium-scene-rendering-performance/#enabling-request-render-mode
requestRenderMode: true,
});
// Add 3D Tiles tileset.
const tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
url: "https://tile.googleapis.com/v1/3dtiles/root.json?key=YOUR_API_KEY",
// This property is needed to appropriately display attributions
// as required.
showCreditsOnScreen: true,
}));
</script>
</body>
Per informazioni su requestRenderMode, consulta
Attivazione della modalità di rendering delle richieste.
La pagina HTML viene visualizzata come mostrato qui.
Integrazione dell'API Places
Puoi utilizzare CesiumJS con l'API Places per recuperare ulteriori informazioni. Puoi utilizzare il widget di completamento automatico per raggiungere in volo la visualizzazione di Luoghi. Questo esempio utilizza l'API Places Autocomplete, che viene attivata seguendo queste istruzioni, e l'API Maps JavaScript, che viene attivata seguendo queste istruzioni.
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>CesiumJS 3D Tiles Places API Integration Demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/cesiumjs/1.105/Build/Cesium/Cesium.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/cesiumjs/1.105/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
</head>
<body>
<label for="pacViewPlace">Go to a place: </label>
<input
type="text"
id="pacViewPlace"
name="pacViewPlace"
placeholder="Enter a location..."
style="width: 300px"
/>
<div id="cesiumContainer"></div>
<script>
// Enable simultaneous requests.
Cesium.RequestScheduler.requestsByServer["tile.googleapis.com:443"] = 18;
// Create the viewer.
const viewer = new Cesium.Viewer("cesiumContainer", {
imageryProvider: false,
baseLayerPicker: false,
requestRenderMode: true,
geocoder: false,
globe: false,
});
// Add 3D Tiles tileset.
const tileset = viewer.scene.primitives.add(
new Cesium.Cesium3DTileset({
url: "https://tile.googleapis.com/v1/3dtiles/root.json?key=YOUR_API_KEY",
// This property is required to display attributions as required.
showCreditsOnScreen: true,
})
);
const zoomToViewport = (viewport) => {
viewer.entities.add({
polyline: {
positions: Cesium.Cartesian3.fromDegreesArray([
viewport.getNorthEast().lng(), viewport.getNorthEast().lat(),
viewport.getSouthWest().lng(), viewport.getNorthEast().lat(),
viewport.getSouthWest().lng(), viewport.getSouthWest().lat(),
viewport.getNorthEast().lng(), viewport.getSouthWest().lat(),
viewport.getNorthEast().lng(), viewport.getNorthEast().lat(),
]),
width: 10,
clampToGround: true,
material: Cesium.Color.RED,
},
});
viewer.flyTo(viewer.entities);
};
function initAutocomplete() {
const autocomplete = new google.maps.places.Autocomplete(
document.getElementById("pacViewPlace"),
{
fields: [
"geometry",
"name",
],
}
);
autocomplete.addListener("place_changed", () => {
viewer.entities.removeAll();
const place = autocomplete.getPlace();
if (!place.geometry || !place.geometry.viewport) {
window.alert("No viewport for input: " + place.name);
return;
}
zoomToViewport(place.geometry.viewport);
});
}
</script>
<script
async=""
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initAutocomplete"
></script>
</body>
Vista rotante del drone
Puoi controllare la videocamera per animare il set di riquadri. Se combinata con l'API Places e l'API Elevation, questa animazione simula un cavalcavia interattivo di un drone di qualsiasi punto d'interesse.
Questo esempio di codice mostra il luogo selezionato nel widget di completamento automatico.
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>CesiumJS 3D Tiles Rotating Drone View Demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/cesiumjs/1.105/Build/Cesium/Cesium.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/cesiumjs/1.105/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
</head>
<body>
<label for="pacViewPlace">Go to a place: </label>
<input type="text" id="pacViewPlace" name="pacViewPlace" placeholder="Enter a location..." style="width: 300px" />
<div id="cesiumContainer"></div>
<script>
// Enable simultaneous requests.
Cesium.RequestScheduler.requestsByServer["tile.googleapis.com:443"] = 18;
// Create the viewer and remove unneeded options.
const viewer = new Cesium.Viewer("cesiumContainer", {
imageryProvider: false,
baseLayerPicker: false,
homeButton: false,
fullscreenButton: false,
navigationHelpButton: false,
vrButton: false,
sceneModePicker: false,
geocoder: false,
globe: false,
infobox: false,
selectionIndicator: false,
timeline: false,
projectionPicker: false,
clockViewModel: null,
animation: false,
requestRenderMode: true,
});
// Add 3D Tile set.
const tileset = viewer.scene.primitives.add(
new Cesium.Cesium3DTileset({
url: "https://tile.googleapis.com/v1/3dtiles/root.json?key=YOUR_API_KEY",
// This property is required to display attributions.
showCreditsOnScreen: true,
})
);
// Point the camera at a location and elevation, at a viewport-appropriate distance.
function pointCameraAt(location, viewport, elevation) {
const distance = Cesium.Cartesian3.distance(
Cesium.Cartesian3.fromDegrees(
viewport.getSouthWest().lng(), viewport.getSouthWest().lat(), elevation),
Cesium.Cartesian3.fromDegrees(
viewport.getNorthEast().lng(), viewport.getNorthEast().lat(), elevation)
) / 2;
const target = new Cesium.Cartesian3.fromDegrees(location.lng(), location.lat(), elevation);
const pitch = -Math.PI / 4;
const heading = 0;
viewer.camera.lookAt(target, new Cesium.HeadingPitchRange(heading, pitch, distance));
}
// Rotate the camera around a location and elevation, at a viewport-appropriate distance.
let unsubscribe = null;
function rotateCameraAround(location, viewport, elevation) {
if(unsubscribe) unsubscribe();
pointCameraAt(location, viewport, elevation);
unsubscribe = viewer.clock.onTick.addEventListener(() => {
viewer.camera.rotate(Cesium.Cartesian3.UNIT_Z);
});
}
function initAutocomplete() {
const autocomplete = new google.maps.places.Autocomplete(
document.getElementById("pacViewPlace"), {
fields: [
"geometry",
"name",
],
}
);
autocomplete.addListener("place_changed", async () => {
const place = autocomplete.getPlace();
if (!(place.geometry && place.geometry.viewport && place.geometry.location)) {
window.alert(`Insufficient geometry data for place: ${place.name}`);
return;
}
// Get place elevation using the ElevationService.
const elevatorService = new google.maps.ElevationService();
const elevationResponse = await elevatorService.getElevationForLocations({
locations: [place.geometry.location],
});
if(!(elevationResponse.results && elevationResponse.results.length)){
window.alert(`Insufficient elevation data for place: ${place.name}`);
return;
}
const elevation = elevationResponse.results[0].elevation || 10;
rotateCameraAround(
place.geometry.location,
place.geometry.viewport,
elevation
);
});
}
</script>
<script async src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initAutocomplete"></script>
</body>
Disegnare polilinee ed etichette
Questo esempio di codice mostra come aggiungere polilinee ed etichette a una mappa. Puoi aggiungere polilinee a una mappa per visualizzare le indicazioni stradali e a piedi, per mostrare i confini delle proprietà o per calcolare la durata di un percorso in auto e a piedi. Puoi anche ottenere attributi senza eseguire il rendering della scena.
Potresti guidare gli utenti in un tour selezionato di un quartiere oppure mostrare le proprietà vicine attualmente in vendita e poi aggiungere oggetti 3D come cartelloni pubblicitari alla scena.
Puoi riassumere un viaggio, elencare le proprietà che hai visualizzato e visualizzare questi dettagli in oggetti virtuali.
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>CesiumJS 3D Tiles Polyline and Label Demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/cesiumjs/1.105/Build/Cesium/Cesium.js"></script>
<link
href="https://ajax.googleapis.com/ajax/libs/cesiumjs/1.105/Build/Cesium/Widgets/widgets.css"
rel="stylesheet"
/>
</head>
<body>
<div id="cesiumContainer"></div>
<script>
// Enable simultaneous requests.
Cesium.RequestScheduler.requestsByServer["tile.googleapis.com:443"] = 18;
// Create the viewer.
const viewer = new Cesium.Viewer("cesiumContainer", {
imageryProvider: false,
baseLayerPicker: false,
requestRenderMode: true,
geocoder: false,
globe: false,
});
// Add 3D Tiles tileset.
const tileset = viewer.scene.primitives.add(
new Cesium.Cesium3DTileset({
url: "https://tile.googleapis.com/v1/3dtiles/root.json?key=YOUR_API_KEY",
// This property is required to display attributions as required.
showCreditsOnScreen: true,
})
);
// Draws a circle at the position, and a line from the previous position.
const drawPointAndLine = (position, prevPosition) => {
viewer.entities.removeAll();
if (prevPosition) {
viewer.entities.add({
polyline: {
positions: [prevPosition, position],
width: 3,
material: Cesium.Color.WHITE,
clampToGround: true,
classificationType: Cesium.ClassificationType.CESIUM_3D_TILE,
},
});
}
viewer.entities.add({
position: position,
ellipsoid: {
radii: new Cesium.Cartesian3(1, 1, 1),
material: Cesium.Color.RED,
},
});
};
// Compute, draw, and display the position's height relative to the previous position.
var prevPosition;
const processHeights = (newPosition) => {
drawPointAndLine(newPosition, prevPosition);
const newHeight = Cesium.Cartographic.fromCartesian(newPosition).height;
let labelText = "Current altitude (meters above sea level):\n\t" + newHeight;
if (prevPosition) {
const prevHeight =
Cesium.Cartographic.fromCartesian(prevPosition).height;
labelText += "\nHeight from previous point (meters):\n\t" + Math.abs(newHeight - prevHeight);
}
viewer.entities.add({
position: newPosition,
label: {
text: labelText,
disableDepthTestDistance: Number.POSITIVE_INFINITY,
pixelOffset: new Cesium.Cartesian2(0, -10),
showBackground: true,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
}
});
prevPosition = newPosition;
};
const handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
handler.setInputAction(function (event) {
const earthPosition = viewer.scene.pickPosition(event.position);
if (Cesium.defined(earthPosition)) {
processHeights(earthPosition);
}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
</script>
</body>
Orbita fotocamera
In Cesium puoi far orbitare la videocamera intorno a un punto d'interesse, evitando collisioni con gli edifici. In alternativa, puoi rendere gli edifici trasparenti quando la videocamera li attraversa.
Innanzitutto, blocca la videocamera su un punto di accesso, quindi crea un'orbita della videocamera per
mostrare l'asset. Puoi farlo usando la funzione lookAtTransform della videocamera con un listener di eventi, come mostrato in questo esempio di codice.
// Lock the camera onto a point.
const center = Cesium.Cartesian3.fromRadians(
2.4213211833389243,
0.6171926869414084,
3626.0426275055174
);
const transform = Cesium.Transforms.eastNorthUpToFixedFrame(center);
viewer.scene.camera.lookAtTransform(
transform,
new Cesium.HeadingPitchRange(0, -Math.PI / 8, 2900)
);
// Orbit around this point.
viewer.clock.onTick.addEventListener(function (clock) {
viewer.scene.camera.rotateRight(0.005);
});
Per ulteriori informazioni su come controllare la fotocamera, consulta Controllare la fotocamera
Collabora con Cesium per Unreal
Per utilizzare il plug-in Cesium for Unreal con l'API 3D Tiles, procedi nel seguente modo.
Installa il plug-in Cesium for Unreal.
Creare un nuovo progetto Unreal.
Connettiti all'API Photorealistic 3D Tiles di Google.
Apri la finestra Cesium selezionando Cesium > Cesium dal menu.
Seleziona Set di riquadri 3D vuoti.
In World Outliner, apri il riquadro Details selezionando questo Cesium3DTileset.
Cambia il valore di Source (Origine) da From Cesium Ion (Da Cesium Ion) a From URL (Da URL).
Imposta l'URL come URL dei riquadri 3D di Google.
https://tile.googleapis.com/v1/3dtiles/root.json?key=YOUR_API_KEY- Attiva Mostra crediti sullo schermo per visualizzare correttamente le attribuzioni.
Questo carica il mondo. Per passare a un valore LatLng, seleziona l'elemento CesiumGeoreference nel riquadro Outliner, quindi modifica Latitudine/Longitudine/Altezza di origine nel riquadro Dettagli.
Collabora con Cesium per Unity
Per utilizzare riquadri fotorealistici con Cesium per Unity, segui i passaggi riportati di seguito.
Crea un nuovo progetto Unity.
Aggiungi un nuovo registro con ambito nella sezione Gestione pacchetti (tramite Editor > Impostazioni progetto).
Nome: Cesium
URL: https://unity.pkg.cesium.com
Ambiti: com.cesium.unity
Installa il pacchetto Cesium per Unity.
Connettiti all'API Photorealistic 3D Tiles di Google.
Apri la finestra Cesium selezionando Cesium > Cesium dal menu.
Fai clic su Set di riquadri 3D vuoti.
Nel riquadro a sinistra, nell'opzione Tileset Source (Origine del set di riquadri) in Source (Origine), seleziona From URL (Da URL) (anziché Da Cesium Ion).
Imposta l'URL sull'URL dei riquadri 3D di Google.
https://tile.googleapis.com/v1/3dtiles/root.json?key=YOUR_API_KEY- Attiva Mostra crediti sullo schermo per visualizzare correttamente le attribuzioni.
Questo carica il mondo. Per passare a un valore LatLng, seleziona l'elemento CesiumGeoreference nella Gerarchia scena, quindi modifica Latitudine/longitudine/altezza di origine in Ispezionatore.
Utilizza deck.gl
deck.gl, basato su WebGL, è un framework JavaScript open source per visualizzazioni di dati ad alte prestazioni e su larga scala.
Attribuzione
Assicurati di visualizzare correttamente le attribuzioni dei dati estraendo il campo copyright
dai riquadri gltf asset e visualizzandolo nella vista visualizzata. Per
scoprire di più, consulta
Attribuzioni dei dati display.
Esempi di renderer deck.gl
Esempio semplice
Nell'esempio seguente viene inizializzato il renderer deck.gl, quindi viene caricato un luogo in 3D. Assicurati di sostituire YOUR_API_KEY nel codice con la tua chiave API effettiva.
<!DOCTYPE html>
<html>
<head>
<title>deck.gl Photorealistic 3D Tiles example</title>
<script src="https://unpkg.com/deck.gl@latest/dist.min.js"></script>
<style>
body { margin: 0; padding: 0;}
#map { position: absolute; top: 0;bottom: 0;width: 100%;}
#credits { position: absolute; bottom: 0; right: 0; padding: 2px; font-size: 15px; color: white;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;}
</style>
</head>
<body>
<div id="map"></div>
<div id="credits"></div>
<script>
const GOOGLE_API_KEY = YOUR_API_KEY;
const TILESET_URL = `https://tile.googleapis.com/v1/3dtiles/root.json`;
const creditsElement = document.getElementById('credits');
new deck.DeckGL({
container: 'map',
initialViewState: {
latitude: 50.0890,
longitude: 14.4196,
zoom: 16,
bearing: 90,
pitch: 60,
height: 200
},
controller: {minZoom: 8},
layers: [
new deck.Tile3DLayer({
id: 'google-3d-tiles',
data: TILESET_URL,
loadOptions: {
fetch: {
headers: {
'X-GOOG-API-KEY': GOOGLE_API_KEY
}
}
},
onTilesetLoad: tileset3d => {
tileset3d.options.onTraversalComplete = selectedTiles => {
const credits = new Set();
selectedTiles.forEach(tile => {
const {copyright} = tile.content.gltf.asset;
copyright.split(';').forEach(credits.add, credits);
creditsElement.innerHTML = [...credits].join('; ');
});
return selectedTiles;
}
}
})
]
});
</script>
</body>
</html>
Visualizza livelli 2D sopra i riquadri 3D fotorealistici di Google
Il deck.gl TerrainExtension trasmette dati 2D altrimenti su una superficie 3D. Ad esempio, puoi trascinare il modello GeoJSON della traccia di un edificio sopra la geometria dei riquadri 3D fotorealistici.
Nell'esempio seguente, viene visualizzato un livello di edifici con i poligoni adattati alla superficie dei riquadri 3D fotorealistici.
<!DOCTYPE html>
<html>
<head>
<title>Google 3D tiles example</title>
<script src="https://unpkg.com/deck.gl@latest/dist.min.js"></script>
<style>
body { margin: 0; padding: 0;}
#map { position: absolute; top: 0;bottom: 0;width: 100%;}
#credits { position: absolute; bottom: 0; right: 0; padding: 2px; font-size: 15px; color: white;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;}
</style>
</head>
<body>
<div id="map"></div>
<div id="credits"></div>
<script>
const GOOGLE_API_KEY = YOUR_API_KEY;
const TILESET_URL = `https://tile.googleapis.com/v1/3dtiles/root.json`;
const BUILDINGS_URL = 'https://raw.githubusercontent.com/visgl/deck.gl-data/master/examples/google-3d-tiles/buildings.geojson'
const creditsElement = document.getElementById('credits');
const deckgl = new deck.DeckGL({
container: 'map',
initialViewState: {
latitude: 50.0890,
longitude: 14.4196,
zoom: 16,
bearing: 90,
pitch: 60,
height: 200
},
controller: true,
layers: [
new deck.Tile3DLayer({
id: 'google-3d-tiles',
data: TILESET_URL,
loadOptions: {
fetch: {
headers: {
'X-GOOG-API-KEY': GOOGLE_API_KEY
}
}
},
onTilesetLoad: tileset3d => {
tileset3d.options.onTraversalComplete = selectedTiles => {
const credits = new Set();
selectedTiles.forEach(tile => {
const {copyright} = tile.content.gltf.asset;
copyright.split(';').forEach(credits.add, credits);
creditsElement.innerHTML = [...credits].join('; ');
});
return selectedTiles;
}
},
operation: 'terrain+draw'
}),
new deck.GeoJsonLayer({
id: 'buildings',
// This dataset is created by CARTO, using other Open Datasets available. More info at: https://3dtiles.carto.com/#about.
data: 'https://raw.githubusercontent.com/visgl/deck.gl-data/master/examples/google-3d-tiles/buildings.geojson',
stroked: false,
filled: true,
getFillColor: ({properties}) => {
const {tpp} = properties;
// quantiles break
if (tpp < 0.6249)
return [254, 246, 181]
else if (tpp < 0.6780)
return [255, 194, 133]
else if (tpp < 0.8594)
return [250, 138, 118]
return [225, 83, 131]
},
opacity: 0.2,
extensions: [new deck._TerrainExtension()]
})
]
});
</script>
</body>
</html>