سيتوفّر تصميم الخريطة الجديد قريبًا على "منصة خرائط Google". يتضمن هذا التحديث على تصميم الخريطة لوحة ألوان تلقائية جديدة وتحسينات على تجارب الخرائط وسهولة الاستخدام. سيتم تعديل جميع أنماط الخرائط تلقائيًا في آذار (مارس) 2025. للمزيد من المعلومات عن مدى التوفّر وكيفية تفعيل الميزة في وقت سابق، يُرجى الاطّلاع على نمط الخريطة الجديد في "منصة خرائط Google".

تمت ترجمة هذه الصفحة بواسطة Cloud Translation API‏.

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

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

استخدام CelsiumJS

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

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

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

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

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

تتوفر طرق متعددة لخفض أوقات تحميل CelsiumJS ثلاثية الأبعاد. على سبيل المثال:

يمكنك تفعيل الطلبات المتزامنة عن طريق إضافة العبارة التالية إلى محتوى 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

يمكنك استخدام عارض CelsiumJS مع ميزة "المربّعات الثلاثية الأبعاد" في 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

يمكنك استخدام SesiumJS مع واجهة برمجة تطبيقات الأماكن لاسترداد مزيد من المعلومات. يمكنك استخدام التطبيق المصغّر "الإكمال التلقائي" للانتقال إلى مجال العرض في "الأماكن". يستخدم هذا المثال واجهة برمجة تطبيقات الإكمال التلقائي للأماكن، التي يتم تفعيلها من خلال اتباع هذه التعليمات، وواجهة برمجة تطبيقات JavaScript للخرائط، التي يتم تفعيلها من خلال اتباع هذه التعليمات.

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

لاستخدام المكوّن الإضافي Celsium for Unreal مع واجهة برمجة تطبيقات 3D Tiles، اتبع الخطوات أدناه.

ثبِّت المكوّن الإضافي Cesium for Unreal.
أنشئ مشروعًا جديدًا في Unreal.
الربط بواجهة برمجة تطبيقات الصور الواقعية ثلاثية الأبعاد من Google
1. افتح نافذة Celsium من خلال اختيار 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. فعِّل الخيار عرض المساهمين على الشاشة لعرض الإسنادات بشكل صحيح.
يؤدي ذلك إلى تحميل العالم. للانتقال إلى أيّ خطّ عرض/خطّ طول، اختَر العنصر CesiumGeoreference في لوحة المخطّط، ثمّ عدِّل خطّ عرض/خطّ طول/ارتفاع نقطة المصدر في لوحة التفاصيل.

العمل مع Cesium for Unity

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

أنشئ مشروعًا جديدًا في Unity.
أضِف سجلًّا جديدًا على مستوى النطاق في قسم "مدير الحِزم" (من خلال المحرِّر > إعدادات المشروع).
- الاسم: السيزيوم
- عنوان URL: https://unity.pkg.cesium.com
- النطاق(النطاقات): com.ceium.unity
ثبِّت حزمة Cesium for Unity.
ربط تطبيقك بواجهة برمجة التطبيقات 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. فعِّل إظهار المساهمين على الشاشة لعرض المساهمين بشكل صحيح.
هذا يؤدي إلى تحميل جميع أنحاء العالم. للانتقال إلى أيّ موقع جغرافي، اختَر عنصر 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>