3D জাল সমতল করুন

আপনি মানচিত্রের নির্দিষ্ট কিছু অংশ সমতল করে ত্রিমাত্রিক ভবন, কাঠামো এবং উদ্ভিদ অপসারণ করতে পারেন। জাল সমতলকরণ ভূখণ্ডের অন্তর্নিহিত জ্যামিতি (পাহাড় এবং উপত্যকা) সংরক্ষণ করলেও, এটি গাছ, ভবন এবং মানবসৃষ্ট বস্তুর বিশৃঙ্খলা দূর করে। এটি বিদ্যমান মানচিত্র বৈশিষ্ট্যগুলির দৃশ্যমান হস্তক্ষেপ ছাড়াই কাস্টম 3D মডেল, মার্কার বা ডেটা স্তর স্থাপনের জন্য একটি পরিষ্কার স্থান তৈরি করে।

এখানে একটি মানচিত্রের উদাহরণ দেওয়া হল যেখানে একটি নির্বাচিত এলাকা সমতল করা হয়েছে:

টাইপস্ক্রিপ্ট 

async function initMap(): Promise<void> {
    await google.maps.importLibrary('maps3d');

    const map = document.querySelector('gmp-map-3d') as Element;
    const flattener = document.querySelector('gmp-flattener') as Element;
    map.append(flattener);

    const toggleButton = document.getElementById('toggleButton') as HTMLButtonElement;
    toggleButton.addEventListener('click', () => {
        if (flattener.isConnected) {
            flattener.remove();
            toggleButton.textContent = 'Enable Flattener';
        } else {
            map.append(flattener);
            toggleButton.textContent = 'Disable Flattener';
        }
    });

}

initMap();
index.ts

জাভাস্ক্রিপ্ট 

async function initMap() {
    await google.maps.importLibrary('maps3d');
    const map = document.querySelector('gmp-map-3d');
    const flattener = document.querySelector('gmp-flattener');
    map.append(flattener);
    const toggleButton = document.getElementById('toggleButton');
    toggleButton.addEventListener('click', () => {
        if (flattener.isConnected) {
            flattener.remove();
            toggleButton.textContent = 'Enable Flattener';
        }
        else {
            map.append(flattener);
            toggleButton.textContent = 'Disable Flattener';
        }
    });
}
initMap();
index.js

সিএসএস 

html,
gmp-map-3d {
  height: 100%;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.toggleButton {
  background: rgb(235, 235, 235);
  color: black;
  border: none;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  border-radius: 4px;
  cursor: pointer;
  position: fixed;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
}

.toggleButton:hover {
  background-color: #007bff;
  color: white;
}
style.css

এইচটিএমএল 

<html>
    <head>
        <title>3D Mesh Flatten</title>

        <link rel="stylesheet" type="text/css" href="./style.css" />
        <script type="module" src="./index.js"></script>
    </head>
    <body>
        <gmp-map-3d
            center="40.70304023274898,-73.99453903360259,397.3687221767566"
            heading="-54.63577922139952"
            tilt="65.59195953953744"
            mode="SATELLITE">
            <gmp-flattener path="40.707680607935245,-74.00310353377735,500 40.70829665151717,-74.00193595590612,500 40.7073748659931,-74.00122787224885,500 40.706738652153156,-74.00232125268805,500 40.70738164589913,-74.0028721484274,500"></gmp-flattener>
        </gmp-map-3d>

        <button class="toggleButton" id="toggleButton" type="button">Disable Flattener</button>

        <script>
            (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
            key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8",
            v: "beta",
            // Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
            // Add other bootstrap parameters as needed, using camel case.
            });
        </script>
    </body>
</html>
index.html

নমুনা চেষ্টা করুন

একটি এলাকা সমতল করুন

নিম্নলিখিত উদাহরণটি ফ্ল্যাটেনারের কাছে lat/lng স্থানাঙ্কের একটি পথ অতিক্রম করার বিষয়টি প্রদর্শন করে:

<gmp-map-3d center="40.707, -74.017, 0" tilt="67.5">
  <gmp-flattener path="40.7144,-74.0208 40.6993,-74.019 40.7035,-74.0004"></gmp-flattener>
</gmp-map-3d>

একটি নির্দিষ্ট এলাকা সমতল করুন

নিম্নলিখিত উদাহরণটি ফ্ল্যাটেনার থেকে একটি বহুভুজের একটি এলাকা ( flattener.innerPaths ব্যবহার করে) অপসারণের প্রমাণ দেয়:

<gmp-map-3d center="40.707, -74.007, 0" tilt="67.5">
  <gmp-flattener id="my-flattener" path="40.7144,-74.0208 40.6993,-74.019 40.7035,-74.0004"></gmp-flattener>
</gmp-map-3d>

<script>
  const flattener = document.getElementById('my-flattener');
  flattener.innerPaths = [
    [
      { lat: 40.71, lng: -74.0175 },
      { lat: 40.703, lng: -74.0165 },
      { lat: 40.7035, lng: -74.006 }
    ],
  ];
</script>

মূল সুবিধা

  • কাস্টমাইজেশন: আপনার নিজস্ব 3D মডেলের জন্য স্থান খালি করতে ডিফল্ট মানচিত্র জ্যামিতি সরান।
  • স্পষ্টতা: মানচিত্রের পৃষ্ঠে সরাসরি বহুভুজ এবং পলিলাইন, যেমন বিস্তারিত রুটের একটি স্পষ্ট, বাধাহীন দৃশ্য প্রদান করুন।
  • ক্যামেরার দৃশ্যমানতা: ভবন বা গাছগুলিকে ক্যামেরার দৃশ্যে হস্তক্ষেপ করা থেকে বিরত রাখুন, যাতে আপনার কেন্দ্রবিন্দু বাধাগ্রস্ত না হয়।