العمل مع عارض ثلاثي الأبعاد للمربّعات

المطوّرون المقيمون في المنطقة الاقتصادية الأوروبية (EEA)

تتّبع مربّعات الصور الواقعية ثلاثية الأبعاد تنسيق glTF المتوافق مع معيار OGC، ما يعني أنّه يمكنك استخدام أي عارض يتيح مواصفات OGC 3D Tiles لإنشاء عمليات العرض ثلاثية الأبعاد. على سبيل المثال، Cesium هي مكتبة أساسية مفتوحة المصدر لعرض عمليات العرض ثلاثية الأبعاد.

العمل مع CesiumJS

‫CesiumJS هي مكتبة JavaScript مفتوحة المصدر للعرض ثلاثي الأبعاد على الويب. لمزيد من المعلومات عن استخدام CesiumJS، يُرجى الاطّلاع على مقالة تعلُّم CesiumJS.

عناصر تحكم المستخدم

يتضمّن عارض مربّعات CesiumJS مجموعة عادية من عناصر تحكّم المستخدم.

الإجراء الوصف
عرض شامل لإطار العرض النقر مع السحب باستخدام الزر الأيسر للفأرة
عرض التكبير أو التصغير النقر مع السحب باستخدام الزر الأيمن للفأرة أو تدوير عجلة الفأرة
تدوير العرض الضغط على Ctrl والنقر مع السحب باستخدام الزر الأيسر أو الأيمن للفأرة، أو النقر مع السحب باستخدام الزر الأوسط للفأرة

أفضل الممارسات

هناك عدة طرق يمكنك اتّباعها لتقليل أوقات تحميل CesiumJS ثلاثي الأبعاد. على سبيل المثال:

  • يمكنك تفعيل الطلبات المتزامنة من خلال إضافة العبارة التالية إلى رمز HTML الخاص بالعرض:

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

    كلّما زاد REQUEST_COUNT، زادت سرعة تحميل المربّعات. ومع ذلك، عند التحميل في متصفّح Chrome مع ضبط REQUEST_COUNT على قيمة أكبر من 10 وإيقاف ذاكرة التخزين المؤقت، قد تواجه مشكلة معروفة في Chrome. بالنسبة إلى معظم حالات الاستخدام، ننصح بضبط REQUEST_COUNT على 18 للحصول على أفضل أداء.

  • يمكنك تفعيل خيار تخطّي مستويات التفاصيل. لمزيد من المعلومات، يُرجى الاطّلاع على هذه المشكلة في Cesium.

تأكَّد من عرض بيانات تحديد المصدر بشكلٍ سليم من خلال تفعيل showCreditsOnScreen: true. لمزيد من المعلومات، يُرجى الاطّلاع على السياسات.

مقاييس العرض

للعثور على معدّل اللقطات في الثانية، اطّلِع على عدد المرات التي يتم فيها استدعاء requestAnimationFrame طريقة في الثانية.

لمعرفة كيفية احتساب مدة تأخير اللقطة، اطّلِع على فئة PerformanceDisplay.

أمثلة على عارض CesiumJS

يمكنك استخدام عارض CesiumJS مع مربّعات Map Tiles API ثلاثية الأبعاد من خلال توفير عنوان URL لمجموعة المربّعات الجذرية فقط.

مثال بسيط

يهيّئ المثال التالي عارض 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، يُرجى الاطّلاع على مقالة تفعيل وضع طلب العرض.

يتم عرض صفحة HTML كما هو موضّح هنا.

دمج واجهة برمجة تطبيقات الأماكن

يمكنك استخدام CesiumJS مع الـ Places API لاسترداد مزيد من المعلومات. يمكنك استخدام أداة الإكمال التلقائي للانتقال إلى إطار عرض الأماكن. يستخدم هذا المثال 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>

رسم خطوط متعددة الأجزاء وتصنيفات

يوضّح نموذج الرمز البرمجي هذا كيفية إضافة خطوط متعددة الأجزاء وتصنيفات إلى خريطة. يمكنك إضافة خطوط متعددة الأجزاء إلى خريطة لعرض اتجاهات القيادة والمشي، أو لعرض حدود الموقع، أو لاحتساب مدة القيادة والمشي. يمكنك أيضًا الحصول على السمات بدون عرض المشهد فعليًا.

يمكنك اصطحاب المستخدمين في جولة منظَّمة في أحد الأحياء، أو يمكنك عرض العقارات المجاورة المعروضة للبيع حاليًا، ثم يمكنك إضافة كائنات ثلاثية الأبعاد، مثل اللوحات الإعلانية، إلى المشهد.

يمكنك تلخيص رحلة، مع إدراج العقارات التي اطّلعت عليها، وعرض هذه التفاصيل في كائنات افتراضية.

<!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);
});

لمزيد من المعلومات عن التحكّم في الكاميرا، يُرجى الاطّلاع على مقالة التحكّم في الكاميرا.

العمل مع Cesium for Unreal

لاستخدام المكوّن الإضافي Cesium for Unreal مع 3D Tiles API، اتّبِع الخطوات التالية:

  1. ثبِّت المكوّن الإضافي Cesium for Unreal.

  2. أنشِئ مشروعًا جديدًا في Unreal.

  3. اربطه بواجهة برمجة تطبيقات مربّعات الصور الواقعية ثلاثية الأبعاد من Google.

    1. افتح نافذة Cesium من خلال النقر على Cesium > Cesium من القائمة.

    2. انقر على Blank 3D Tiles Tileset.

    3. في World Outliner ، افتح لوحة التفاصيل من خلال النقر على هذا Cesium3DTileset.

    4. غيِّر المصدر من From Cesium Ion إلى From URL.

    5. اضبط عنوان URL ليكون عنوان URL لمربّعات Google ثلاثية الأبعاد.

    https://tile.googleapis.com/v1/3dtiles/root.json?key=YOUR_API_KEY
    1. فعِّل الخيار Show Credits On Screen لعرض بيانات تحديد المصدر بشكلٍ سليم.

  4. يؤدي هذا الإجراء إلى تحميل العالم. للانتقال إلى أي LatLng، انقر على العنصر CesiumGeoreference في لوحة Outliner ، ثم عدِّل Origin Latitude/Longitude/Height في لوحة التفاصيل.

العمل مع Cesium for Unity

لاستخدام المربّعات الواقعية مع Cesium for Unity، اتّبِع الخطوات التالية:

  1. أنشِئ مشروعًا جديدًا في Unity.

  2. أضِف سجلًّا جديدًا ضمن نطاق في قسم "أداة إدارة الحِزم" (من خلال المحرّر > إعدادات المشروع).

    • الاسم: Cesium

    • عنوان URL: https://unity.pkg.cesium.com

    • النطاقات: com.cesium.unity

  3. ثبِّت حزمة Cesium for Unity.

  4. اربطه بواجهة برمجة تطبيقات مربّعات الصور الواقعية ثلاثية الأبعاد من Google.

    1. افتح نافذة Cesium من خلال النقر على Cesium > Cesium من القائمة.

    2. انقر على Blank 3D Tiles Tileset.

    3. في اللوحة الجانبية اليمنى، ضمن الخيار Tileset Source ضمن المصدر، انقر على From URL (بدلاً من From Cesium Ion).

    4. اضبط عنوان URL ليكون عنوان URL لمربّعات Google ثلاثية الأبعاد.

    https://tile.googleapis.com/v1/3dtiles/root.json?key=YOUR_API_KEY
    1. فعِّل الخيار Show Credits On Screen لعرض بيانات تحديد المصدر بشكلٍ سليم.

  5. يؤدي هذا الإجراء إلى تحميل العالم. للانتقال إلى أي LatLng، انقر على العنصر CesiumGeoreference في Scene Hierarchy، ثم عدِّل Origin Latitude/Longitude/Height في Inspector.

العمل مع deck.gl

deck.gl، المستند إلى WebGL، هو إطار عمل JavaScript مفتوح المصدر لعرض البيانات على نطاق واسع وبأداء عالٍ.

تحديد المصدر

تأكَّد من عرض بيانات تحديد المصدر بشكلٍ سليم من خلال استخراج الحقل copyright من asset بتنسيق gltf للمربّعات، ثم عرضه في طريقة العرض المعروضة. لمزيد من المعلومات، يُرجى الاطّلاع على مقالة عرض بيانات تحديد المصدر.

أمثلة على عارض deck.gl

مثال بسيط

يهيّئ المثال التالي عارض deck.gl، ثم يحمّل مكانًا ثلاثي الأبعاد. في الرمز البرمجي، احرص على استبدال 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

تعرض أداة deck.gl TerrainExtension البيانات الثنائية الأبعاد على سطح ثلاثي الأبعاد. على سبيل المثال، يمكنك وضع GeoJSON لبصمة مبنى فوق هندسة مربّعات الصور الواقعية ثلاثية الأبعاد.

في المثال التالي، يتم عرض طبقة من المباني مع تعديل المضلّعات لتتلاءم مع سطح مربّعات الصور الواقعية ثلاثية الأبعاد.

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