এই পৃষ্ঠাটি Cloud Translation API অনুবাদ করেছে।

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

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

আপনার বিলিং ঠিকানা যদি ইউরোপীয় অর্থনৈতিক অঞ্চলে (European Economic Area) হয়, তাহলে ৮ জুলাই ২০২৫ থেকে আপনার পরিষেবা ব্যবহারের ক্ষেত্রে গুগল ম্যাপস প্ল্যাটফর্ম ইইএ (Google Maps Platform EEA)-এর পরিষেবার শর্তাবলী (Terms of Service) প্রযোজ্য হবে। আরও জানুন । এছাড়াও, ম্যাপ টাইলস এপিআই (Map Tiles API) থেকে নির্দিষ্ট কিছু কন্টেন্ট আর ফেরত দেওয়া হবে না। আরও জানুন ।

ফটোরিয়ালিস্টিক ৩ডি টাইলস OGC স্ট্যান্ডার্ড glTF ফরম্যাটে থাকে, যার মানে হলো আপনি আপনার ৩ডি ভিজ্যুয়ালাইজেশন তৈরি করতে OGC ৩ডি টাইলস স্পেক সমর্থন করে এমন যেকোনো রেন্ডারার ব্যবহার করতে পারেন। উদাহরণস্বরূপ, ৩ডি ভিজ্যুয়ালাইজেশন রেন্ডার করার জন্য Cesium একটি মৌলিক ওপেন সোর্স লাইব্রেরি।

CesiumJS নিয়ে কাজ করুন

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

ব্যবহারকারী নিয়ন্ত্রণ

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

পদক্ষেপ	বর্ণনা
প্যান ভিউ	বাম ক্লিক ও ড্র্যাগ
জুম ভিউ	ডান ক্লিক করে ড্র্যাগ করুন, অথবা মাউসের হুইল স্ক্রোল করুন
দৃশ্য ঘোরান	Ctrl + বাম/ডান ক্লিক করে ড্র্যাগ করুন, অথবা মাঝের ক্লিক করে ড্র্যাগ করুন

সর্বোত্তম অনুশীলন

CesiumJS 3D-এর লোডিং সময় কমানোর জন্য আপনি কয়েকটি পদ্ধতি অবলম্বন করতে পারেন। উদাহরণস্বরূপ:

আপনার রেন্ডারিং HTML-এ নিম্নলিখিত স্টেটমেন্টটি যোগ করে যুগপৎ অনুরোধ সক্ষম করুন:
```
Cesium.RequestScheduler.requestsByServer["tile.googleapis.com:443"] = <REQUEST_COUNT>
```
REQUEST_COUNT যত বেশি হবে, টাইলস তত দ্রুত লোড হবে। তবে, Chrome ব্রাউজারে REQUEST_COUNT ১০-এর বেশি এবং ক্যাশে নিষ্ক্রিয় রেখে লোড করার সময়, আপনি একটি পরিচিত Chrome সমস্যার সম্মুখীন হতে পারেন। বেশিরভাগ ক্ষেত্রে সর্বোত্তম পারফরম্যান্সের জন্য আমরা REQUEST_COUNT ১৮ রাখার পরামর্শ দিই।
বিস্তারিত বিবরণের স্তরগুলি এড়িয়ে যাওয়ার সুবিধাটি সক্রিয় করুন। আরও তথ্যের জন্য, এই Cesium ইস্যুটি দেখুন।

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

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

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

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

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

আপনি শুধু রুট টাইলসেট ইউআরএলটি সরবরাহ করেই ম্যাপ টাইলস এপিআই-এর ৩ডি টাইলসের সাথে সিজিয়ামজেএস রেন্ডারার ব্যবহার করতে পারেন।

সহজ উদাহরণ

নিম্নলিখিত উদাহরণটি 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 সম্পর্কে তথ্যের জন্য, Enabling request render mode দেখুন।

এইচটিএমএল পৃষ্ঠাটি এখানে দেখানো অনুযায়ী প্রদর্শিত হয়।

স্থান এপিআই ইন্টিগ্রেশন

আপনি আরও তথ্য পেতে Places API- এর সাথে CesiumJS ব্যবহার করতে পারেন। আপনি Places-এর ভিউপোর্টে যেতে Autocomplete উইজেটটি ব্যবহার করতে পারেন। এই উদাহরণটিতে 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)-এর সাথে একত্রিত করলে, এই অ্যানিমেশনটি যেকোনো গুরুত্বপূর্ণ স্থানের উপর দিয়ে একটি ইন্টারেক্টিভ ড্রোন ফ্লাইওভারের অনুকরণ করে।

এই কোড নমুনাটি আপনাকে অটোকমপ্লিট উইজেটে নির্বাচিত স্থানটিতে ঘুরিয়ে নিয়ে যায়।

দ্রষ্টব্য: এই কোড স্যাম্পলটি ব্যবহার করার জন্য, আপনাকে অবশ্যই 3D Tiles-এর জন্য ব্যবহৃত একই প্রজেক্টে Places API , Maps JavaScript API , এবং Elevation API সক্রিয় করতে হবে। এই প্রতিটি পেজে যান, পেজের উপরের নীল বারে থাকা ড্রপডাউন মেনু থেকে আপনার 3D Tiles প্রজেক্টটি নির্বাচন করুন। তারপর API-এর নামের নিচে থাকা নীল ENABLE বাটনটি নির্বাচন করুন।

যদি বাটনটিতে MANAGE লেখা থাকে, তাহলে সেই প্রজেক্টে 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);
});

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

আনরিয়েলের জন্য সিজিয়ামের সাথে কাজ করুন

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

Cesium for Unreal প্লাগইনটি ইনস্টল করুন।
একটি নতুন আনরিয়েল প্রজেক্ট তৈরি করুন।
গুগল ফটোরিয়ালিস্টিক ৩ডি টাইলস এপিআই-এর সাথে সংযোগ করুন।
1. মেনু থেকে Cesium > Cesium নির্বাচন করে Cesium উইন্ডোটি খুলুন।
2. খালি 3D টাইলস সেট নির্বাচন করুন।
3. World Outliner- এ, এই Cesium3DTileset-টি নির্বাচন করে Details প্যানেলটি খুলুন।
4. উৎসটি ‘সিজিয়াম আয়ন থেকে’ থেকে ‘ইউআরএল থেকে’ -তে পরিবর্তন করুন।
5. URL-টি গুগল ৩ডি টাইলস URL হিসেবে সেট করুন।
```
https://tile.googleapis.com/v1/3dtiles/root.json?key=YOUR_API_KEY
```
1. কৃতিত্ব সঠিকভাবে প্রদর্শন করতে ‘স্ক্রিনে ক্রেডিট দেখান’ বিকল্পটি চালু করুন।
এটি ওয়ার্ল্ড লোড করে। যেকোনো LatLng-এ যেতে, Outliner প্যানেলে CesiumGeoreference আইটেমটি নির্বাচন করুন, এবং তারপর Details প্যানেলে Origin Latitude/Longitude/Height সম্পাদনা করুন।

ইউনিটির জন্য সিজিয়ামের সাথে কাজ করুন

ইউনিটির জন্য Cesium-এর সাথে ফটোরিয়ালিস্টিক টাইলস ব্যবহার করতে, নিচের ধাপগুলো অনুসরণ করুন।

একটি নতুন ইউনিটি প্রজেক্ট তৈরি করুন।
প্যাকেজ ম্যানেজার বিভাগে ( এডিটর > প্রজেক্ট সেটিংস- এর মাধ্যমে) একটি নতুন স্কোপড রেজিস্ট্রি যোগ করুন।
- নাম: সিজিয়াম
- URL: https://unity.pkg.cesium.com
- স্কোপ(সমূহ): com.cesium.unity
Cesium for Unity প্যাকেজটি ইনস্টল করুন।
গুগল ফটোরিয়ালিস্টিক ৩ডি টাইলস এপিআই-এর সাথে সংযোগ করুন।
1. মেনু থেকে Cesium > Cesium নির্বাচন করে Cesium উইন্ডোটি খুলুন।
2. খালি 3D টাইলস টাইলসেট-এ ক্লিক করুন।
3. বাম দিকের প্যানেলে, Source-এর অধীনে থাকা Tileset Source অপশনে, From URL নির্বাচন করুন (From Cesium Ion-এর পরিবর্তে)।
4. URL-টি গুগল 3D টাইলস URL-এ সেট করুন।
```
https://tile.googleapis.com/v1/3dtiles/root.json?key=YOUR_API_KEY
```
1. কৃতিত্ব সঠিকভাবে প্রদর্শন করতে ‘স্ক্রিনে ক্রেডিট দেখান’ বিকল্পটি চালু করুন।
এটি ওয়ার্ল্ডটি লোড করে। যেকোনো LatLng-এ যেতে, Scene Hierarchy- তে থাকা CesiumGeoreference আইটেমটি সিলেক্ট করুন, এবং তারপর Inspector- এ Origin Latitude/Longitude/Height এডিট করুন।

deck.gl নিয়ে কাজ করুন

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

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

tiles gltf asset থেকে copyright ফিল্ডটি এক্সট্র্যাক্ট করে এবং তারপর রেন্ডার করা ভিউতে তা প্রদর্শন করে ডেটা অ্যাট্রিবিউশন সঠিকভাবে দেখানো নিশ্চিত করুন। আরও তথ্যের জন্য, ‘ডেটা অ্যাট্রিবিউশন প্রদর্শন ’ দেখুন।

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>

গুগল ফটোরিয়ালিস্টিক ৩ডি টাইলসের উপরে ২ডি লেয়ারগুলো কল্পনা করুন

deck.gl TerrainExtension সাধারণত দ্বিমাত্রিক ডেটাকে একটি ত্রিমাত্রিক পৃষ্ঠে রেন্ডার করে। উদাহরণস্বরূপ, আপনি একটি বিল্ডিং ফুটপ্রিন্টের GeoJSON-কে Photorealistic 3D Tiles Geometry-র উপরে স্থাপন করতে পারেন।

নিম্নলিখিত উদাহরণে, ফটোরিয়ালিস্টিক ৩ডি টাইলস সারফেসের সাথে মানানসই বহুভুজ ব্যবহার করে ভবনসমূহের একটি স্তরকে দৃশ্যমান করা হয়েছে।

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