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

يتم عرض "المربّعات الثلاثية الأبعاد لصور واقعية" بتنسيق glTF العادي من OGC، ما يعني أنّه يمكنك استخدام أيّ برنامج عرض متوافق مع مواصفات "المربّعات الثلاثية الأبعاد" من OGC لإنشاء العروض المرئية الثلاثية الأبعاد. على سبيل المثال، 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 كما هو موضّح هنا.

دمج Places API

يمكنك استخدام CesiumJS مع Places API لاسترداد المزيد من المعلومات. يمكنك استخدام التطبيق المصغّر "الإكمال التلقائي" للانتقال إلى مجال العرض في "أماكن Google". يستخدِم هذا المثال واجهة برمجة التطبيقات 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 Photorealistic 3D Tiles API.

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

    2. اختَر مجموعة مربّعات فارغة ثلاثية الأبعاد.

    3. في مخطّط العالم، افتح لوحة التفاصيل من خلال اختيار Cesium3DTileset.

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

    5. اضبط عنوان URL ليكون عنوان URL الخاص بـ "الشرائح الثلاثية الأبعاد من Google".

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

  4. يؤدي ذلك إلى تحميل العالم. للانتقال إلى أيّ خطّ عرض/خطّ طول، اختَر العنصر CesiumGeoreference في لوحة المخطّط، ثمّ عدِّل خطّ عرض/خطّ طول/ارتفاع نقطة المصدر في لوحة التفاصيل.

العمل مع Cesium for Unity

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

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

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

    • الاسم: سيزيوم

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

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

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

  4. ربط تطبيقك بواجهة برمجة التطبيقات Google Photorealistic 3D Tiles API

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

    2. انقر على مجموعة مربّعات فارغة ثلاثية الأبعاد.

    3. في اللوحة اليمنى، ضمن خيار مصدر مجموعة الوحدات ضمن المصدر، اختَر من عنوان URL (بدلاً من "من Cesium Ion").

    4. اضبط عنوان URL على عنوان URL الخاص بـ "الشرائح الثلاثية الأبعاد من Google".

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

  5. يؤدي ذلك إلى تحميل العالم. للانتقال إلى أيّ موقع جغرافي، اختَر العنصر CesiumGeoreference في تدرّج المشهد، ثم عدِّل خط الطول/العرض/الارتفاع الأصلي في المدقق.

العمل مع deck.gl

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

تحديد المصدر

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

أمثلة على أداة التقديم 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>