3D টাইল রেন্ডারারের সাথে কাজ করা

ইউরোপীয় অর্থনৈতিক অঞ্চল (EEA)-এর ডেভেলপার

ফটোরিয়েলিস্টিক 3D টাইল OGC স্ট্যান্ডার্ড glTF ফর্ম্যাটে থাকে, এর অর্থ হল, আপনি যেকোনও রেন্ডারার ব্যবহার করতে পারবেন যা OGC 3D টাইল স্পেসিফিকেশন মেনে চলে এবং এর সাহায্যে আপনার 3D ভিজ্যুয়ালাইজেশন তৈরি করতে পারবেন। যেমন, Cesium হল 3D ভিজ্যুয়ালাইজেশন রেন্ডার করার জন্য একটি মৌলিক ওপেন সোর্স লাইব্রেরি।

CesiumJS-এর সাথে কাজ করা

CesiumJS হল ওয়েবে 3D ভিজ্যুয়ালিজেশনের জন্য একটি ওপেন সোর্স জাভাস্ক্রিপ্ট লাইব্রেরি। CesiumJS ব্যবহার করার ব্যাপারে আরও তথ্যের জন্য, CesiumJS সম্পর্কে জানুন দেখুন।

ব্যবহারকারীর কন্ট্রোল

CesiumJS টাইল রেন্ডারারে ব্যবহারকারীর নিয়ন্ত্রণের স্ট্যান্ডার্ড সেট আছে।

অ্যাকশন বিবরণ
প্যান ভিউ বাঁদিকের বোতামে ক্লিক করে টেনে আনুন
জুম ভিউ ডানদিকের বোতামে ক্লিক করে টেনে আনুন অথবা মাউস হুইল স্ক্রল করুন
ভিউ ঘোরান Ctrl + মাউসের বাঁ/ডানদিকের বোতামে ক্লিক করে টেনে আনুন অথবা মাউসের মাঝখানের বোতামে ক্লিক করে টেনে আনুন

পেশাদার পদ্ধতি

CesiumJS 3D লোডিং টাইম কমানোর জন্য আপনি বিভিন্ন পদ্ধতি অবলম্বন করতে পারেন। যেমন:

  • আপনার রেন্ডারিং HTML-এ নিম্নলিখিত বিবৃতি যোগ করে একই সাথে একাধিক অনুরোধ করার সুবিধা চালু করুন:

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

    REQUEST_COUNT যত বেশি হবে, তত দ্রুত টাইল লোড হবে। তবে, REQUEST_COUNT ১০-এর বেশি এবং ক্যাশে বন্ধ করা আছে এমন Chrome ব্রাউজারে লোড করার সময়, আপনি পরিচিত Chrome সংক্রান্ত সমস্যার সম্মুখীন হতে পারেন। বেশিরভাগ ক্ষেত্রে, আমরা সেরা পারফর্ম্যান্সের জন্য ১৮-এর REQUEST_COUNT সাজেস্ট করি।

  • বিবরণের লেভেল এড়িয়ে যাওয়া চালু করুন। আরও তথ্যের জন্য, এই Cesium সমস্যা দেখুন।

showCreditsOnScreen: true চালু করে ডেটা অ্যাট্রিবিউশন সঠিকভাবে দেখানোর বিষয়টি নিশ্চিত করুন। আরও তথ্যের জন্য, নীতি দেখুন।

রেন্ডারিং মেট্রিক

ফ্রেমরেট খুঁজে পেতে, প্রতি সেকেন্ডে কতবার requestAnimationFrame মেথড কল করা হয়েছে তা দেখুন।

ফ্রেম লেটেন্সি কীভাবে গণনা করা হয় তা দেখতে, PerformanceDisplay ক্লাস দেখুন।

CesiumJS রেন্ডারারের উদাহরণ

আপনি Map Tiles API-এর 3D Tiles-এর সাথে CesiumJS রেন্ডারার ব্যবহার করতে পারেন, এর জন্য আপনাকে শুধু রুট টাইলসেট 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 (নতুন) ইন্টিগ্রেশন

আরও তথ্য পেতে আপনি Places API (নতুন)-এর সাথে CesiumJS ব্যবহার করতে পারবেন। আপনি 'অটোকমপ্লিট' উইজেট ব্যবহার করে Places-এর ভিউপোর্টে যেতে পারবেন। এই উদাহরণে Places Autocomplete API ব্যবহার করা হয়েছে, যা এইসব নির্দেশাবলী অনুসরণ করে এবং Maps JavaScript API চালু করা হয়েছে, যা এইসব নির্দেশাবলী অনুসরণ করে।

<!DOCTYPE html>
<head>
 <meta charset="utf-8" />
 <title>CesiumJS 3D Tiles Places API (New) 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>

পলিলাইন ও লেবেল আঁকা

এই কোড স্যাম্পেল দেখায় যে কীভাবে ম্যাপে পলিলাইন ও লেবেল যোগ করতে হয়। আপনি ড্রাইভিং এবং হাঁটার দিকনির্দেশ দেখাতে, বা সম্পত্তির সীমানা দেখাতে, বা ড্রাইভিং এবং হাঁটার সময়কাল গণনা করতে একটি ম্যাপে পলিলাইন যোগ করতে পারেন। এছাড়াও, আপনি দৃশ্যটি রেন্ডার না করেই অ্যাট্রিবিউট পেতে পারেন।

আপনি ব্যবহারকারীদের কোনও পাড়ার কিউরেট করা ট্যুরে নিয়ে যেতে পারেন অথবা আপনি আশেপাশের যেসব প্রপার্টি বর্তমানে বিক্রির জন্য উপলভ্য আছে সেগুলি দেখাতে পারেন এবং তারপরে আপনি দৃশ্যে বিলবোর্ডের মতো 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>

ক্যামেরা অরবিট

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

ক্যামেরা নিয়ন্ত্রণ করা সম্পর্কে আরও জানতে, ক্যামেরা নিয়ন্ত্রণ করুন দেখুন

Unreal-এর জন্য Cesium-এর সাথে কাজ করা

3D Tiles API-এর সাথে Cesium for Unreal Plugin ব্যবহার করতে, নিচে দেওয়া ধাপগুলি অনুসরণ করুন।

  1. Cesium for Unreal প্লাগ-ইন ইনস্টল করুন।

  2. নতুন Unreal প্রোজেক্ট তৈরি করুন।

  3. Google Photorealistic 3D Tiles API-তে কানেক্ট করুন।

    1. মেনু থেকে Cesium > Cesium বেছে নিয়ে Cesium উইন্ডো খুলুন।

    2. খালি 3D টাইল টাইলসেট বেছে নিন।

    3. World Outliner-এ, এই Cesium3DTileset বেছে নিয়ে বিবরণ প্যানেল খুলুন।

    4. সোর্স Cesium Ion থেকে বিকল্প থেকে পরিবর্তন করে URL থেকে বিকল্পে সেট করুন।

    5. URL-কে Google 3D Tiles URL হিসেবে সেট করুন।

    https://tile.googleapis.com/v1/3dtiles/root.json?key=YOUR_API_KEY
    
    1. অ্যাট্রিবিউশন সঠিকভাবে দেখাতে স্ক্রিনে ক্রেডিট দেখান বিকল্প চালু করুন।
  4. এটি বিশ্বকে লোড করে। যেকোনও LatLng-এ যেতে, আউটলাইনার প্যানেলে CesiumGeoreference আইটেম বেছে নিন এবং তারপরে বিবরণ প্যানেলে অরিজিন ল্যাটিটিউড/লংটিউড/হাইট এডিট করুন।

Unity-র জন্য Cesium-এর সাথে কাজ করুন

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. খালি 3D টাইল টাইলসেট বিকল্পে ক্লিক করুন।

    3. বাঁদিকের প্যানেলে, সোর্স বিকল্পের মধ্যে Tileset সোর্স বিকল্পে, URL থেকে (Cesium Ion থেকে-এর পরিবর্তে) বিকল্প বেছে নিন।

    4. Google 3D Tiles URL-এ URL সেট করুন।

    https://tile.googleapis.com/v1/3dtiles/root.json?key=YOUR_API_KEY
    
    1. অ্যাট্রিবিউশন সঠিকভাবে দেখানোর জন্য স্ক্রিনে ক্রেডিট দেখান বিকল্প চালু করুন।
  5. এটি বিশ্বকে লোড করে। যেকোনও LatLng-এ যেতে, Scene Hierarchy-তে CesiumGeoreference আইটেম বেছে নিন এবং তারপরে Inspector-তে অরিজিন অক্ষাংশ/দ্রাঘিমাংশ/উচ্চতা এডিট করুন।

deck.gl-এর সাথে কাজ করা

WebGL দ্বারা পরিচালিত deck.gl হল উচ্চ-পারফর্ম্যান্স, বৃহৎ-স্কেল ডেটা ভিজ্যুয়ালাইজেশনের জন্য একটি ওপেন সোর্স জাভাস্ক্রিপ্ট ফ্রেমওয়ার্ক।

অ্যাট্রিবিউশন

copyrighttiles 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 ফটোরিয়েলিস্টিক 3D টাইলের উপরে 2D লেয়ার ভিজ্যুয়ালাইজ করুন

deck.gl TerrainExtension অন্যথায় 2D ডেটা 3D সারফেসে রেন্ডার করে। যেমন, আপনি ফটোরিয়ালস্টিক 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>