3D टाइल रेंडरर के साथ काम करना

फ़ोटोरियलिस्टिक 3D टाइल OGC स्टैंडर्ड glTF फ़ॉर्मैट, इसका मतलब है कि ऐसे किसी भी रेंडरर का इस्तेमाल किया जा सकता है जो OGC 3D टाइल की शर्तों के साथ काम करता हो आपके 3D विज़ुअलाइज़ेशन. उदाहरण के लिए, सीज़ियम 3D विज़ुअलाइज़ेशन रेंडर करने के लिए एक बुनियादी ओपन सोर्स लाइब्रेरी है.

CesiumJS के साथ काम करें

CesiumJS, वेब पर 3D विज़ुअलाइज़ेशन के लिए एक ओपन सोर्स JavaScript लाइब्रेरी है. CesiumJS इस्तेमाल करने के बारे में ज़्यादा जानकारी के लिए, देखें cesiumJS के बारे में जानें.

उपयोगकर्ता नियंत्रण

CesiumJS टाइल रेंडरर में उपयोगकर्ता कंट्रोल का एक स्टैंडर्ड सेट मौजूद होता है.

कार्रवाई ब्यौरा
पैन व्यू बायां क्लिक और खींचें और छोड़ें
ज़ूम दृश्य राइट क्लिक और माउस व्हील को खींचें या स्क्रोल करें
व्यू घुमाएं Ctrl + लेफ़्ट/राइट क्लिक और खींचें, या बीच में क्लिक करें और खींचें और छोड़ें

सबसे सही तरीके

CesiumJS 3D लोडिंग को कम करने के लिए, कई तरीके अपनाए जा सकते हैं बार. उदाहरण के लिए:

  • अपने रेंडरिंग एचटीएमएल में यह स्टेटमेंट जोड़कर एक साथ कई अनुरोध करने की सुविधा चालू करें:

    Cesium.RequestScheduler.requestsByServer["tile.googleapis.com:443"] = <REQUEST_COUNT>

    REQUEST_COUNT जितनी ज़्यादा होगी, उतनी ही तेज़ी से टाइल लोड होती हैं. हालांकि, REQUEST_COUNT के साथ Chrome ब्राउज़र में लोड करते समय 10 से ज़्यादा होने पर और कैश मेमोरी की सुविधा बंद हो जाती है, तो हो सकता है कि आपको Chrome से जुड़ी समस्या. ज़्यादातर मामलों में, हमारा सुझाव है कि बेहतर कन्वर्ज़न ट्रैकिंग की सुविधा का इस्तेमाल करने के लिए, 18 का REQUEST_COUNT रखें परफ़ॉर्मेंस.

  • जानकारी वाले लेवल को स्किप करने की सुविधा चालू करें. ज़्यादा जानकारी के लिए, यह देखें सीज़ियम की समस्या.

चालू करके पक्का करें कि आप डेटा एट्रिब्यूशन को सही तरीके से दिखा रहे हैं 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 इंटिग्रेशन

CesiumJS का इस्तेमाल इन चीज़ों के साथ किया जा सकता है Location API का इस्तेमाल करें. ऑटोकंप्लीट की सुविधा वाले विजेट का इस्तेमाल करके, Places का व्यूपोर्ट. इस उदाहरण में Places के लिए अपने-आप पूरे होने वाले एपीआई का इस्तेमाल किया गया है. जिसे इसने चालू किया है इन निर्देशों का पालन करके, और 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 और एलिवेशन एपीआई का इस्तेमाल करते हैं, तो यह ऐनिमेशन आपके किसी भी लोकप्रिय जगह पर ड्रोन से फ़्लाईओवर कर सकते हैं.

यह कोड सैंपल आपको उस जगह पर ले जाता है जिसे आपने ऑटोकंप्लीट विजेट.

<!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>

कैमरा ऑर्बिट

सीज़ियम में, कैमरे को अपनी पसंदीदा जगह के चारों ओर घुमाया जा सकता है. इमारतों से टकराव होते हैं. इसके अलावा, इमारतों को पारदर्शी बनाया जा सकता है तो इनमें से किसी को भी चालू किया जा सकता है.

पहले, कैमरे को किसी पॉइंट पर लॉक करें, फिर आप अपनी ऐसेट दिखाना. ऐसा करने के लिए, आप कैमरे की 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);
});

कैमरे को कंट्रोल करने के बारे में ज़्यादा जानकारी के लिए, यहां देखें कैमरा कंट्रोल करना

सीज़ियम फ़ॉर अनरियल के साथ काम करें

3D Tiles API के साथ Cesium का इस्तेमाल करने के लिए, यह तरीका अपनाएं देखें.

  1. Cesium for Unreal प्लगिन इंस्टॉल करें.

  2. एक नया Unreal प्रोजेक्ट बनाएं.

  3. Google Photoरियलिस्टिक 3D Tiles API से कनेक्ट करें.

    1. Cesium को चुनकर सीज़ियम विंडो खोलें > सीज़ियम मेन्यू से.

    2. खाली 3D टाइल टाइलसेट चुनें.

    3. World Outliner में, ब्यौरा पैनल खोलें. इसके लिए इसे चुनें Cesium3DTileset.

    4. सोर्स को सेल्सियम आयन से से यूआरएल से में बदलें.

    5. यूआरएल को Google 3D टाइल के यूआरएल के तौर पर सेट करें.

    https://tile.googleapis.com/v1/3dtiles/root.json?key=YOUR_API_KEY
    1. एट्रिब्यूशन को ठीक से दिखाने के लिए, स्क्रीन पर क्रेडिट दिखाएं को चालू करें.

  4. यह दुनिया को लोड करता है. किसी भी LatLng पर जाने के लिए, Outliner पैनल में CesiumGeoreference आइटम जोड़ें और फिर बदलाव करें ब्यौरा पैनल में शुरुआत की जगह का अक्षांश/देशांतर/ऊंचाई.

Cesium for Unity के साथ काम करें

Unity के लिए Cesium के साथ फ़ोटोरियलिस्टिक टाइल का इस्तेमाल करने के लिए, यहां दिया गया तरीका अपनाएं.

  1. एक नया Unity प्रोजेक्ट बनाएं.

  2. पैकेज मैनेजर सेक्शन में एडिटर > प्रोजेक्ट सेटिंग की मदद से, एक नई स्कोप वाली रजिस्ट्री जोड़ें.

    • नाम: सीज़ियम

    • यूआरएल: https://unity.pkg.cesium.com

    • दायरा: com.cesium.unity

  3. Cesium for Unity पैकेज इंस्टॉल करें.

  4. Google Photoरियलिस्टिक 3D Tiles API से कनेक्ट करें.

    1. Cesium को चुनकर सीज़ियम विंडो खोलें > सीज़ियम मेन्यू से.

    2. खाली 3D टाइल टाइलसेट पर क्लिक करें.

    3. बाईं ओर मौजूद पैनल में, सोर्स में टाइलसेट सोर्स विकल्प में, URL से चुनें (Csium Ion से नहीं).

    4. यूआरएल को Google 3D टाइल के यूआरएल पर सेट करें.

    https://tile.googleapis.com/v1/3dtiles/root.json?key=YOUR_API_KEY
    1. एट्रिब्यूशन को ठीक से दिखाने के लिए, स्क्रीन पर क्रेडिट दिखाएं को चालू करें.

  5. यह दुनिया को लोड करता है. किसी भी LatLng पर जाने के लिए, सीन हैरारकी में CesiumGeoreference आइटम. इसके बाद, बदलाव करें इंस्पेक्टर में ऑरिजिन का अक्षांश/देशांतर/ऊंचाई.

Deck.gl की मदद से काम करें

deck.gl, WebGL द्वारा समर्थित, यह उच्च-प्रदर्शन करने के लिए एक ओपन सोर्स JavaScript फ़्रेमवर्क है, बड़े पैमाने पर डेटा विज़ुअलाइज़ेशन को मैनेज किया जा सकता है.

एट्रिब्यूशन

पक्का करें कि copyright को एक्सट्रैक्ट करके, डेटा एट्रिब्यूशन को सही तरीके से दिखाया जा रहा हो फ़ील्ड को टाइल gltf asset से और फिर उसे रेंडर किए गए व्यू पर दिखा सकता है. इसके लिए ज़्यादा जानकारी के लिए, देखें डिसप्ले डेटा एट्रिब्यूशन.

Deck.gl रेंडरर के उदाहरण

आसान उदाहरण

नीचे दिए गए उदाहरण में, Deck.gl रेंडरर को शुरू किया गया है और फिर एक जगह को लोड किया गया है 3D में देखें. अपने कोड में, YOUR_API_KEY को अपने वास्तविक API कुंजी.

<!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 Photoरियलिस्टिक 3D टाइल के ऊपर 2D लेयर विज़ुअलाइज़ करें

डेक.gl TerrainExtension 3D सतह पर 2D डेटा रेंडर करता है. उदाहरण के लिए, आप फ़ोटोरियलिस्टिक 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>