3D-Mesh abflachen

Mit einem gmp-flattener-Element können Sie bestimmte Bereiche der Karte vereinfachen, um 3D-Gebäude, Bauwerke und Pflanzen zu entfernen. Beim Glätten des Meshs wird die zugrunde liegende Geometrie des Geländes (die Hügel und Täler) beibehalten, aber die Unordnung durch Bäume, Gebäude und künstliche Objekte wird entfernt. So entsteht ein sauberer Bereich für benutzerdefinierte 3D-Modelle, Markierungen oder Datenebenen, ohne dass vorhandene Kartenfunktionen die Darstellung beeinträchtigen.

Hier sehen Sie ein Beispiel für eine Karte, auf der ein ausgewählter Bereich flach dargestellt wird:

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

Vollständigen Quellcode des Beispiels ansehen

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>

Testbeispiel

Bereich flach darstellen

Im folgenden Beispiel wird ein Pfad mit Breiten-/Längengradkoordinaten an den Flattener übergeben:

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

Bestimmten Bereich entzerren

Wenn Sie einen Bereich wieder in den ursprünglichen Zustand zurückversetzen möchten, entfernen Sie den Flattener aus dem Dokument, indem Sie flattener.remove() aufrufen.

Hauptvorteile

  • Anpassung: Entfernen Sie die Standardkartengeometrie, um Platz für Ihre eigenen 3D-Modelle zu schaffen.
  • Klarheit: Stellen Sie Polygone und Polylinien wie detaillierte Routen klar und ungehindert auf der Kartenoberfläche dar.
  • Sichtfeld der Kamera: Achten Sie darauf, dass Gebäude oder Bäume das Sichtfeld der Kamera nicht beeinträchtigen und den Fokuspunkt nicht verdecken.