مش سه بعدی را صاف کنید

شما می‌توانید از یک عنصر 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>

نمونه را امتحان کنید

مسطح کردن یک منطقه

مثال زیر نحوه‌ی ارسال مختصات lat/lng به flattener را نشان می‌دهد: 

<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() مسطح‌کننده را از سند حذف کنید.

مزایای کلیدی

  • شخصی‌سازی: هندسه پیش‌فرض نقشه را حذف کنید تا فضای لازم برای مدل‌های سه‌بعدی خودتان فراهم شود.
  • وضوح: ارائه یک نمای واضح و بدون مانع از چندضلعی‌ها و چندخطی‌ها، مانند مسیرهای دقیق، مستقیماً روی سطح نقشه.
  • دید دوربین: از تداخل ساختمان‌ها یا درختان با نمای دوربین و ایجاد مانع در نقطه کانونی جلوگیری کنید.