फ़ोटोरियलिस्टिक 3D टाइल, OGC स्टैंडर्ड glTF फ़ॉर्मैट में होती हैं. इसका मतलब है कि 3D विज़ुअलाइज़ेशन बनाने के लिए, OGC 3D टाइल स्पेसिफ़िकेशन के साथ काम करने वाले किसी भी रेंडरर का इस्तेमाल किया जा सकता है. उदाहरण के लिए, Cesium, 3D विज़ुअलाइज़ेशन को रेंडर करने के लिए एक बुनियादी ओपन सोर्स लाइब्रेरी है.
CesiumJS के साथ काम करना
CesiumJS, वेब पर 3D विज़ुअलाइज़ेशन के लिए एक ओपन सोर्स JavaScript लाइब्रेरी है. CesiumJS का इस्तेमाल करने के बारे में ज़्यादा जानकारी के लिए, CesiumJS के बारे में जानें लेख पढ़ें.
उपयोगकर्ता नियंत्रण
CesiumJS टाइल रेंडरर में, उपयोगकर्ता कंट्रोल का स्टैंडर्ड सेट होता है.
| कार्रवाई | ब्यौरा |
|---|---|
| पैन व्यू | बाईं ओर क्लिक करके खींचें और छोड़ें |
| ज़ूम व्यू | राइट क्लिक करके खींचें और छोड़ें या माउस व्हील को स्क्रोल करें |
| व्यू घुमाना | Ctrl + लेफ़्ट/राइट क्लिक करके खींचें और छोड़ें या मिडल क्लिक करके खींचें और छोड़ें |
सबसे सही तरीके
CesiumJS 3D लोड होने में लगने वाले समय को कम करने के लिए, कई तरीके अपनाए जा सकते हैं. उदाहरण के लिए:
रेंडरिंग एचटीएमएल में यह स्टेटमेंट जोड़कर, एक साथ कई अनुरोध करने की सुविधा चालू करें:
Cesium.RequestScheduler.requestsByServer["tile.googleapis.com:443"] = <REQUEST_COUNT>REQUEST_COUNTजितना ज़्यादा होगा, टाइल उतनी ही तेज़ी से लोड होंगी. हालांकि,REQUEST_COUNT10 से ज़्यादा और कैश मेमोरी बंद होने पर, Chrome ब्राउज़र में लोड करने पर, आपको Chrome की एक समस्या का सामना करना पड़ सकता है. इस्तेमाल के ज़्यादातर उदाहरणों के लिए, हमारा सुझाव है कि बेहतर परफ़ॉर्मेंस के लिएREQUEST_COUNTकी वैल्यू 18 रखें.जानकारी के लेवल को स्किप करने की सुविधा चालू करें. ज़्यादा जानकारी के लिए, Cesium से जुड़ी समस्या देखें.
showCreditsOnScreen: true को चालू करके, पक्का करें कि आपने डेटा एट्रिब्यूशन को सही तरीके से दिखाया हो. ज़्यादा जानकारी के लिए, नीतियां देखें.
रेंडरिंग मेट्रिक
फ़्रेम रेट जानने के लिए, देखें कि हर सेकंड में requestAnimationFrame मेथड को कितनी बार कॉल किया जाता है.
फ़्रेम के इंतज़ार का हिसाब लगाने का तरीका जानने के लिए, PerformanceDisplay क्लास देखें.
CesiumJS रेंडरर के उदाहरण
Map Tiles API की 3D टाइल के साथ CesiumJS रेंडरर का इस्तेमाल किया जा सकता है. इसके लिए, आपको सिर्फ़ रूट टाइलसेट का यूआरएल देना होगा.
आसान उदाहरण
इस उदाहरण में, CesiumJS रेंडरर को शुरू किया जाता है और फिर रूट टाइलसेट को लोड किया जाता है.
<!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>
requestRenderMode के बारे में जानकारी के लिए, अनुरोध रेंडर मोड चालू करना देखें.
एचटीएमएल पेज, यहां दिखाए गए तरीके से रेंडर होता है.
Places API इंटिग्रेशन
ज़्यादा जानकारी पाने के लिए, Places API के साथ CesiumJS का इस्तेमाल किया जा सकता है. ऑटोकंप्लीट विजेट का इस्तेमाल करके, Places के व्यूपोर्ट पर जाएं. इस उदाहरण में, Places Autocomplete API का इस्तेमाल किया गया है. इसे इन निर्देशों का पालन करके चालू किया जा सकता है. साथ ही, Maps JavaScript API का इस्तेमाल करने के लिए, इन निर्देशों का पालन करें.
<!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>
ड्रोन का घूमता हुआ व्यू
टाइलसेट की मदद से ऐनिमेशन बनाने के लिए, कैमरे को कंट्रोल किया जा सकता है. Places API और Elevation API के साथ इस्तेमाल करने पर, यह ऐनिमेशन किसी भी लोकप्रिय जगह के ड्रोन फ़्लायओवर को इंटरैक्टिव तरीके से दिखाता है.
इस कोड सैंपल की मदद से, अपने-आप पूरा होने वाले टेक्स्ट वाले विजेट में चुनी गई जगह के आस-पास घूमा जा सकता है.
<!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>
पॉलीलाइन और लेबल बनाना
इस कोड सैंपल में, मैप में पॉलीलाइन और लेबल जोड़ने का तरीका बताया गया है. मैप पर पॉलीलाइन जोड़ी जा सकती हैं, ताकि ड्राइविंग और पैदल चलने के निर्देश दिखाए जा सकें. इसके अलावा, प्रॉपर्टी की सीमाएं दिखाने या ड्राइविंग और पैदल चलने में लगने वाले समय का हिसाब लगाने के लिए भी पॉलीलाइन जोड़ी जा सकती हैं. सीन को रेंडर किए बिना भी एट्रिब्यूट पाए जा सकते हैं.
उपयोगकर्ताओं को किसी इलाके के चुने गए टूर पर ले जाया जा सकता है. इसके अलावा, आस-पास की ऐसी प्रॉपर्टी दिखाई जा सकती हैं जो फ़िलहाल बिक्री के लिए उपलब्ध हैं. इसके बाद, सीन में बिलबोर्ड जैसे 3D ऑब्जेक्ट जोड़े जा सकते हैं.
किसी यात्रा की खास जानकारी देखने के लिए, देखी गई प्रॉपर्टी की सूची बनाई जा सकती है. साथ ही, इस जानकारी को वर्चुअल ऑब्जेक्ट में दिखाया जा सकता है.
<!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>
कैमरा ऑर्बिट
Cesium में, किसी दिलचस्प जगह के आस-पास कैमरे को घुमाया जा सकता है. ऐसा करने पर, कैमरा इमारतों से टकराने से बच जाता है. इसके अलावा, कैमरे के बिल्डिंग के बीच से गुज़रने पर, उन्हें पारदर्शी भी बनाया जा सकता है.
सबसे पहले, कैमरे को किसी पॉइंट पर लॉक करें. इसके बाद, अपनी ऐसेट को दिखाने के लिए कैमरा ऑर्बिट बनाएं. ऐसा करने के लिए, कैमरे के lookAtTransform फ़ंक्शन का इस्तेमाल, इवेंट लिसनर के साथ करें. इस बारे में इस कोड सैंपल में बताया गया है.
// 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);
});
कैमरे को कंट्रोल करने के बारे में ज़्यादा जानने के लिए, कैमरे को कंट्रोल करना लेख पढ़ें
Unreal के लिए Cesium का इस्तेमाल करना
3D Tiles API के साथ Cesium for Unreal प्लगिन का इस्तेमाल करने के लिए, यहां दिया गया तरीका अपनाएं.
Cesium for Unreal प्लग इन इंस्टॉल करें.
नया Unreal प्रोजेक्ट बनाएं.
Google के फ़ोटोरियलिस्टिक 3D टाइल्स एपीआई से कनेक्ट करें.
मेन्यू से Cesium > Cesium चुनकर, Cesium विंडो खोलें.
खाली 3D टाइल टाइलसेट चुनें.
वर्ल्ड आउटलाइनर में, जानकारी पैनल खोलें. इसके लिए, यह Cesium3DTileset चुनें.
सोर्स को Cesium Ion से बदलकर यूआरएल से पर सेट करें.
यूआरएल को Google 3D टाइल्स का यूआरएल सेट करें.
https://tile.googleapis.com/v1/3dtiles/root.json?key=YOUR_API_KEY- क्रेडिट सही तरीके से दिखाने के लिए, स्क्रीन पर क्रेडिट दिखाएं को चालू करें.
इससे दुनिया लोड हो जाती है. किसी भी LatLng पर जाने के लिए, आउटलाइनर पैनल में CesiumGeoreference आइटम चुनें. इसके बाद, जानकारी पैनल में ऑरिजिन अक्षांश/देशांतर/ऊंचाई में बदलाव करें.
Cesium for Unity के साथ काम करना
Cesium for Unity के साथ फ़ोटोरिएलिस्टिक टाइल इस्तेमाल करने के लिए, यह तरीका अपनाएं.
नया Unity प्रोजेक्ट बनाएं.
एडिटर > प्रोजेक्ट सेटिंग के ज़रिए, पैकेज मैनेजर सेक्शन में नई स्कोप वाली रजिस्ट्री जोड़ें.
नाम: सीज़ियम
यूआरएल: https://unity.pkg.cesium.com
स्कोप: com.cesium.unity
Unity के लिए Cesium पैकेज इंस्टॉल करें.
Google के फ़ोटोरियलिस्टिक 3D टाइल्स एपीआई से कनेक्ट करें.
मेन्यू से Cesium > Cesium चुनकर, Cesium विंडो खोलें.
खाली 3D टाइल टाइलसेट पर क्लिक करें.
बाईं ओर मौजूद पैनल में, सोर्स में जाकर टाइलसेट सोर्स विकल्प में, Cesium Ion से के बजाय यूआरएल से चुनें.
यूआरएल को Google 3D टाइल्स के यूआरएल पर सेट करें.
https://tile.googleapis.com/v1/3dtiles/root.json?key=YOUR_API_KEY- क्रेडिट सही तरीके से दिखाने के लिए, स्क्रीन पर क्रेडिट दिखाएं को चालू करें.
इससे दुनिया लोड हो जाती है. किसी भी LatLng पर जाने के लिए, सीन के लेआउट में CesiumGeoreference आइटम चुनें. इसके बाद, इंस्पेक्टर में ऑरिजिन के अक्षांश/देशांतर/ऊंचाई में बदलाव करें.
deck.gl के साथ काम करना
deck.gl, WebGL की मदद से काम करने वाला एक ओपन सोर्स JavaScript फ़्रेमवर्क है. इसका इस्तेमाल, बेहतर परफ़ॉर्मेंस वाले बड़े डेटा विज़ुअलाइज़ेशन के लिए किया जाता है.
एट्रिब्यूशन
पक्का करें कि आपने टाइल gltf asset से copyright
फ़ील्ड को निकालकर, उसे रेंडर किए गए व्यू पर सही तरीके से दिखाया हो. ज़्यादा जानकारी के लिए, डिसप्ले डेटा एट्रिब्यूशन देखें.
deck.gl रेंडरर के उदाहरण
आसान उदाहरण
इस उदाहरण में, deck.gl रेंडरर को शुरू किया जाता है. इसके बाद, किसी जगह को 3D में लोड किया जाता है. अपने कोड में, YOUR_API_KEY को अपनी असल एपीआई पासकोड से बदलना न भूलें.
<!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>
Google की फ़ोटोरियलिस्टिक 3D टाइल के ऊपर 2D लेयर देखना
deck.gl के TerrainExtension फ़ंक्शन की मदद से, 2D डेटा को 3D प्लैटफ़ॉर्म पर रेंडर किया जा सकता है. उदाहरण के लिए, फ़ोटोरियलिस्टिक 3D टाइल की ज्यामिति के ऊपर, किसी बिल्डिंग के फ़ुटप्रिंट का GeoJSON ड्रेप किया जा सकता है.
यहां दिए गए उदाहरण में, बिल्डिंग की लेयर को ऐसे पॉलीगॉन के साथ विज़ुअलाइज़ किया गया है जिन्हें फ़ोटोरिअलिस्टिक 3D टाइल के प्लैटफ़ॉर्म के हिसाब से अडजस्ट किया गया है.
<!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>