3D ağı düzleştirme

Haritanın belirli alanlarını düzleştirerek 3D binaları, yapıları ve bitki örtüsünü kaldırmak için gmp-flattener öğesini kullanabilirsiniz. Örgü düzleştirme, arazinin (tepeler ve vadiler) temel geometrisini korurken ağaçların, binaların ve insan yapımı nesnelerin dağınıklığını ortadan kaldırır. Bu sayede, mevcut harita özelliklerinin görsel müdahalesi olmadan özel 3D modeller, işaretçiler veya veri katmanları yerleştirmek için temiz bir alan oluşturulur.

Düzleştirilmiş bir alanın bulunduğu harita örneğini aşağıda görebilirsiniz:

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

Tam örnek kaynak kodunu inceleyin

TypeScript

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

JavaScript

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

CSS

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

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

Örneği deneyin

Bir alanı düzleştirme

Aşağıdaki örnekte, düzleştiriciye enlem/boylam koordinatları yolunun nasıl iletileceği gösterilmektedir:

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

Belirli bir alanı düzleştirmeyi geri alma

Bir alanı düzleştirmeyi kaldırmak için flattener.remove() çağrısı yaparak düzleştiriciyi dokümandan kaldırın.

Temel avantajlar

  • Özelleştirme: Kendi 3D modellerinize yer açmak için varsayılan harita geometrisini kaldırın.
  • Netlik: Çokgenlerin ve çoklu çizgilerin (ör. ayrıntılı rotalar) doğrudan harita yüzeyinde net ve engelsiz bir şekilde görünmesini sağlayın.
  • Kamera görünürlüğü: Binaların veya ağaçların kamera görüntüsünü etkilemesini ve odak noktanızı engellemesini önleyin.