ใช้งานตัวแสดงผลการ์ด 3 มิติ

ชิ้นส่วนแผนที่ 3 มิติแบบสมจริงใน รูปแบบ glTF มาตรฐาน OGC ซึ่งหมายความว่าคุณสามารถใช้โหมดแสดงภาพใดๆ ที่รองรับ OGC 3D Tile เพื่อสร้าง การแสดงภาพ 3 มิติ ตัวอย่างเช่น ซีเซียม เป็นไลบรารีโอเพนซอร์สพื้นฐานสำหรับการแสดงภาพ 3 มิติ

ทำงานร่วมกับ CesiumJS

CesiumJS เป็นไลบรารี JavaScript แบบโอเพนซอร์สสำหรับการแสดงภาพ 3 มิติในเว็บ สําหรับข้อมูลเพิ่มเติมเกี่ยวกับการใช้ CesiumJS โปรดดู ดูข้อมูล CesiumJS

การควบคุมของผู้ใช้

ตัวแสดงผลการ์ด CesiumJS มีชุดการควบคุมมาตรฐานสำหรับผู้ใช้

การดำเนินการ คำอธิบาย
แพนมุมมอง คลิกซ้ายและ ลาก
มุมมองซูม คลิกขวาและ ลากหรือเลื่อนลูกกลิ้งเมาส์
หมุนมุมมอง Ctrl + คลิกซ้าย/ขวาและ ลากหรือคลิกตรงกลางและ ลาก

แนวทางปฏิบัติแนะนำ

คุณสามารถลดการโหลด CesiumJS 3D ได้หลายวิธี ครั้ง เช่น

  • เปิดใช้งานคำขอพร้อมกันด้วยการเพิ่มข้อความต่อไปนี้ลงใน HTML การแสดงผลของคุณ:

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

    ยิ่ง REQUEST_COUNT สูงเท่าใด ก็ยิ่งใช้เวลา โหลดการ์ด อย่างไรก็ตาม เมื่อโหลดในเบราว์เซอร์ Chrome ด้วย REQUEST_COUNT มากกว่า 10 และแคชถูกปิดใช้งาน คุณอาจพบข้อผิดพลาด ปัญหาเกี่ยวกับ Chrome สำหรับการใช้งานส่วนใหญ่ เราขอแนะนำ REQUEST_COUNT ที่ระดับ 18 เพื่อประสิทธิภาพสูงสุด ด้านประสิทธิภาพ

  • เปิดใช้งานระดับการข้ามรายละเอียด สำหรับข้อมูลเพิ่มเติม โปรดดู ปัญหาเกี่ยวกับซีเซียม

ตรวจสอบว่าคุณแสดงการระบุแหล่งที่มาของข้อมูลอย่างถูกต้องด้วยการเปิดใช้ showCreditsOnScreen: true สำหรับข้อมูลเพิ่มเติม โปรดดู นโยบาย

เมตริกการแสดงผล

หากต้องการค้นหาอัตราเฟรม ให้ดูจำนวนครั้งที่ต่อวินาที requestAnimationFrame เมธอด

หากต้องการดูวิธีคำนวณเวลาในการตอบสนองของเฟรม โปรดดูที่ PerformanceDisplay

ตัวอย่างตัวแสดงผล CesiumJS

คุณสามารถใช้ตัวแสดงผล CesiumJS กับชิ้นส่วน 3 มิติของ 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 เพื่อเรียกดูข้อมูลเพิ่มเติม คุณสามารถใช้วิดเจ็ตการเติมข้อความอัตโนมัติเพื่อบินไปยัง วิวพอร์ตของ Places ตัวอย่างนี้ใช้ Places Autocomplete API ซึ่งเปิดใช้โดย โดยทำตามวิธีการเหล่านี้ และ Maps JavaScript API ที่เปิดใช้โดย โดยทำตามวิธีการเหล่านี้

<!DOCTYPE html>
<head>
 <meta charset="utf-8" />
 <title>CesiumJS 3D Tiles Places API Integration Demo</title>
 <script src="https://ajax.googleapis.com/ajax/libs/cesiumjs/1.105/Build/Cesium/Cesium.js"></script>
 <link href="https://ajax.googleapis.com/ajax/libs/cesiumjs/1.105/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
</head>
<body>
 <label for="pacViewPlace">Go to a place: </label>
 <input
   type="text"
   id="pacViewPlace"
   name="pacViewPlace"
   placeholder="Enter a location..."
   style="width: 300px"
 />
 <div id="cesiumContainer"></div>
 <script>
   // Enable simultaneous requests.
   Cesium.RequestScheduler.requestsByServer["tile.googleapis.com:443"] = 18;

   // Create the viewer.
   const viewer = new Cesium.Viewer("cesiumContainer", {
     imageryProvider: false,
     baseLayerPicker: false,
     requestRenderMode: true,
     geocoder: false,
     globe: false,
   });

   // Add 3D Tiles tileset.
   const tileset = viewer.scene.primitives.add(
     new Cesium.Cesium3DTileset({
       url: "https://tile.googleapis.com/v1/3dtiles/root.json?key=YOUR_API_KEY",
       // This property is required to display attributions as required.
       showCreditsOnScreen: true,
     })
   );

   const zoomToViewport = (viewport) => {
     viewer.entities.add({
       polyline: {
         positions: Cesium.Cartesian3.fromDegreesArray([
           viewport.getNorthEast().lng(), viewport.getNorthEast().lat(),
           viewport.getSouthWest().lng(), viewport.getNorthEast().lat(),
           viewport.getSouthWest().lng(), viewport.getSouthWest().lat(),
           viewport.getNorthEast().lng(), viewport.getSouthWest().lat(),
           viewport.getNorthEast().lng(), viewport.getNorthEast().lat(),
         ]),
         width: 10,
         clampToGround: true,
         material: Cesium.Color.RED,
       },
     });
     viewer.flyTo(viewer.entities);
   };

   function initAutocomplete() {
     const autocomplete = new google.maps.places.Autocomplete(
       document.getElementById("pacViewPlace"),
       {
         fields: [
           "geometry",
           "name",
         ],
       }
     );
     autocomplete.addListener("place_changed", () => {
       viewer.entities.removeAll();
       const place = autocomplete.getPlace();
       if (!place.geometry || !place.geometry.viewport) {
         window.alert("No viewport for input: " + place.name);
         return;
       }
       zoomToViewport(place.geometry.viewport);
     });
   }
 </script>
 <script
   async=""
   src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initAutocomplete"
 ></script>
</body>

มุมมองจากโดรนแบบหมุน

คุณควบคุมกล้องให้เคลื่อนไหวผ่านชุดชิ้นส่วนได้ เมื่อใช้ร่วมกับ Places API และ Elevation API ภาพเคลื่อนไหวนี้จำลอง โดรนสะพานลอยของจุดสนใจใดก็ได้

โค้ดตัวอย่างนี้จะพาคุณไปรอบๆ สถานที่ที่คุณเลือกใน วิดเจ็ตเติมข้อความอัตโนมัติ

<!DOCTYPE html>
<head>
  <meta charset="utf-8" />
  <title>CesiumJS 3D Tiles Rotating Drone View Demo</title>
  <script src="https://ajax.googleapis.com/ajax/libs/cesiumjs/1.105/Build/Cesium/Cesium.js"></script>
  <link href="https://ajax.googleapis.com/ajax/libs/cesiumjs/1.105/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
</head>
<body>
  <label for="pacViewPlace">Go to a place: </label>
  <input type="text" id="pacViewPlace" name="pacViewPlace" placeholder="Enter a location..." style="width: 300px" />
  <div id="cesiumContainer"></div>
  <script>
    // Enable simultaneous requests.
    Cesium.RequestScheduler.requestsByServer["tile.googleapis.com:443"] = 18;

    // Create the viewer and remove unneeded options.
    const viewer = new Cesium.Viewer("cesiumContainer", {
      imageryProvider: false,
      baseLayerPicker: false,
      homeButton: false,
      fullscreenButton: false,
      navigationHelpButton: false,
      vrButton: false,
      sceneModePicker: false,
      geocoder: false,
      globe: false,
      infobox: false,
      selectionIndicator: false,
      timeline: false,
      projectionPicker: false,
      clockViewModel: null,
      animation: false,
      requestRenderMode: true,
    });

    // Add 3D Tile set.
    const tileset = viewer.scene.primitives.add(
      new Cesium.Cesium3DTileset({
        url: "https://tile.googleapis.com/v1/3dtiles/root.json?key=YOUR_API_KEY",
        // This property is required to display attributions.
        showCreditsOnScreen: true,
      })
    );

    // Point the camera at a location and elevation, at a viewport-appropriate distance.
    function pointCameraAt(location, viewport, elevation) {
      const distance = Cesium.Cartesian3.distance(
        Cesium.Cartesian3.fromDegrees(
          viewport.getSouthWest().lng(), viewport.getSouthWest().lat(), elevation),
        Cesium.Cartesian3.fromDegrees(
          viewport.getNorthEast().lng(), viewport.getNorthEast().lat(), elevation)
      ) / 2;
      const target = new Cesium.Cartesian3.fromDegrees(location.lng(), location.lat(), elevation);
      const pitch = -Math.PI / 4;
      const heading = 0;
      viewer.camera.lookAt(target, new Cesium.HeadingPitchRange(heading, pitch, distance));
    }

    // Rotate the camera around a location and elevation, at a viewport-appropriate distance.
    let unsubscribe = null;
    function rotateCameraAround(location, viewport, elevation) {
      if(unsubscribe) unsubscribe();
      pointCameraAt(location, viewport, elevation);
      unsubscribe = viewer.clock.onTick.addEventListener(() => {
        viewer.camera.rotate(Cesium.Cartesian3.UNIT_Z);
      });
    }

    function initAutocomplete() {
      const autocomplete = new google.maps.places.Autocomplete(
        document.getElementById("pacViewPlace"), {
          fields: [
            "geometry",
            "name",
          ],
        }
      );
      
      autocomplete.addListener("place_changed", async () => {
        const place = autocomplete.getPlace();
        
        if (!(place.geometry && place.geometry.viewport && place.geometry.location)) {
          window.alert(`Insufficient geometry data for place: ${place.name}`);
          return;
        }
        // Get place elevation using the ElevationService.
        const elevatorService = new google.maps.ElevationService();
        const elevationResponse =  await elevatorService.getElevationForLocations({
          locations: [place.geometry.location],
        });

        if(!(elevationResponse.results && elevationResponse.results.length)){
          window.alert(`Insufficient elevation data for place: ${place.name}`);
          return;
        }
        const elevation = elevationResponse.results[0].elevation || 10;

        rotateCameraAround(
          place.geometry.location,
          place.geometry.viewport,
          elevation
        );
      });
    }
  </script>
  <script async src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initAutocomplete"></script>
</body>

วาดเส้นประกอบและป้ายกำกับ

ตัวอย่างโค้ดนี้สาธิตวิธีเพิ่มเส้นประกอบและป้ายกำกับลงในแผนที่ คุณสามารถ เพิ่มเส้นประกอบลงในแผนที่เพื่อแสดงเส้นทางการขับขี่และการเดิน หรือเพื่อแสดง ขอบเขตของทรัพย์สิน หรือเพื่อคำนวณระยะเวลาการขับรถและการเดิน นอกจากนี้คุณยัง โดยไม่ต้องแสดงภาพฉากจริงๆ

คุณสามารถพาผู้ใช้ไปทัวร์ชมละแวกใกล้เคียง หรืออาจจะแสดง อสังหาริมทรัพย์ข้างเคียงที่กำลังวางขายอยู่ในขณะนี้ จากนั้นคุณสามารถใส่ 3 มิติ เช่น บิลบอร์ดไปยังฉาก

คุณสามารถสรุปการเดินทาง โดยแสดงที่พักที่คุณดูแล้ว โดยแสดง รายละเอียดเหล่านี้ในออบเจ็กต์เสมือน

<!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 ที่มี Listener เหตุการณ์ ดังที่แสดงในตัวอย่างโค้ดนี้

// 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. เชื่อมต่อกับ API ชิ้นส่วนภาพ 3 มิติแบบภาพเสมือนจริงของ Google

    1. เปิดหน้าต่าง Cesium โดยเลือก Cesium > Cesium จากเมนู

    2. เลือกชุดไทล์เปล่า 3 มิติ

    3. ใน World Outliner ให้เปิดแผง Details โดยเลือกตัวเลือกนี้ Cesium3DTileset

    4. เปลี่ยนแหล่งที่มาจากจากซีเซียมไอออนเป็นจาก URL

    5. ตั้งค่า URL ให้เป็น URL ชิ้นส่วน 3 มิติของ 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. เชื่อมต่อกับ API ภาพ 3 มิติแบบภาพเสมือนจริงของ Google

    1. เปิดหน้าต่าง Cesium โดยเลือก Cesium > Cesium จากเมนู

    2. คลิกชุดชิ้นส่วนภาพ 3 มิติเปล่า

    3. ที่แผงด้านซ้าย ในตัวเลือก Tileset Source ในส่วนSource เลือกจาก URL (แทนจาก Cesium Ion)

    4. ตั้งค่า URL เป็น URL ของชิ้นส่วน 3 มิติของ Google

    https://tile.googleapis.com/v1/3dtiles/root.json?key=YOUR_API_KEY
    1. เปิดใช้แสดงเครดิตบนหน้าจอเพื่อแสดงการระบุแหล่งที่มาอย่างถูกต้อง

  5. สิ่งนี้จะทำให้โลกใบนี้แสดงขึ้น หากต้องการย้ายไปที่ละติจูดและลองจิจูด ให้เลือก รายการ CesiumGeoreference ในลำดับชั้นของฉาก แล้วแก้ไข ละติจูด/ลองจิจูด/ความสูงต้นทางในเครื่องมือตรวจสอบ

ทำงานกับ Deck.gl

deck.gl, ขับเคลื่อนโดย WebGL เป็นเฟรมเวิร์ก JavaScript แบบโอเพนซอร์สสำหรับ ภาพข้อมูลขนาดใหญ่

การระบุแหล่งที่มา

ตรวจสอบว่าคุณแสดงการระบุแหล่งที่มาของข้อมูลอย่างถูกต้องด้วยการแยก copyright จากชิ้นส่วน gltf asset แล้วนำไปแสดงในมุมมองที่แสดงผล สำหรับ ข้อมูลเพิ่มเติม โปรดดู การระบุแหล่งที่มาของข้อมูลในเครือข่ายดิสเพลย์

ตัวอย่างตัวแสดงผล Deck.gl

ตัวอย่างง่ายๆ

ตัวอย่างต่อไปนี้จะเริ่มต้นตัวแสดงผล Deck.gl จากนั้นโหลดสถานที่ ในแบบ 3 มิติ ในโค้ด โปรดแทนที่ 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>

แสดงภาพเลเยอร์ 2 มิติบนชิ้นส่วน 3 มิติแบบภาพเสมือนจริงของ Google

The Deck.gl TerrainExtension จะแสดงผลข้อมูล 2 มิติบนพื้นผิว 3 มิติ ตัวอย่างเช่น คุณสามารถวาง GeoJSON ของรอยเท้าอาคารบนเรขาคณิตของชิ้นส่วนแผนที่ 3 มิติแบบสมจริง

ในตัวอย่างต่อไปนี้ เลเยอร์ของสิ่งปลูกสร้างจะแสดงภาพด้วยรูปหลายเหลี่ยม ได้รับการปรับให้เข้ากับพื้นผิวกระเบื้อง 3 มิติแบบภาพสมจริง

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