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

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

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

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

        <link rel="stylesheet" type="text/css" href="./style.css" />
        <script type="module" src="./index.js"></script>
        <script>
            // prettier-ignore
            (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"
            });
        </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>
    </body>
</html>

সম্পূর্ণ উদাহরণ সোর্স কোড দেখুন

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

async function init(): Promise<void> {
    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'
    ) as HTMLButtonElement;
    toggleButton.addEventListener('click', () => {
        if (flattener.isConnected) {
            flattener.remove();
            toggleButton.textContent = 'Enable Flattener';
        } else {
            map.append(flattener);
            toggleButton.textContent = 'Disable Flattener';
        }
    });
}

void init();

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

async function init() {
    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';
        }
    });
}

void init();

সিএসএস 

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

এইচটিএমএল 

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

        <link rel="stylesheet" type="text/css" href="./style.css" />
        <script type="module" src="./index.js"></script>
        <script>
            // prettier-ignore
            (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"
            });
        </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>
    </body>
</html>

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

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

নিম্নলিখিত উদাহরণটি ফ্ল্যাটেনারে অক্ষাংশ/দ্রাঘিমাংশ স্থানাঙ্কের একটি পাথ প্রেরণ করার পদ্ধতি প্রদর্শন করে: 

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

একটি নির্দিষ্ট এলাকাকে অমসৃণ করুন

কোনো এলাকাকে আনফ্ল্যাটেন করতে, flattener.remove() কল করে ডকুমেন্ট থেকে ফ্ল্যাটেনারটি সরিয়ে ফেলুন।

মূল সুবিধাগুলি

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