Achatar a malha 3D

É possível usar um elemento gmp-flattener para nivelar áreas específicas do mapa e remover edifícios, estruturas e flora em 3D. Embora o nivelamento de malha preserve a geometria subjacente do terreno (colinas e vales), ele remove a desordem de árvores, edifícios e objetos feitos pelo homem. Isso cria um espaço limpo para colocar modelos 3D personalizados, marcadores ou camadas de dados sem interferência visual dos recursos do mapa.

Confira um exemplo de mapa com uma área selecionada que foi nivelada:

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

Confira o código-fonte de exemplo completo

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>

Testar amostra

Nivelar uma área

O exemplo a seguir demonstra a transmissão de um caminho de coordenadas de latitude/longitude para o nivelador:

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

Desnivelar uma área específica

Para desnivelar uma área, remova o nivelador do documento chamando flattener.remove().

Principais benefícios

  • Personalização: remova a geometria padrão do mapa para liberar espaço para seus próprios modelos 3D.
  • Clareza: ofereça uma visão clara e desobstruída de polígonos e polilinhas, como rotas detalhadas, diretamente na superfície do mapa.
  • Visibilidade da câmera: impeça que edifícios ou árvores interfiram na imagem da câmera ao vivo, obstruindo o ponto focal.