3D-Mesh abflachen

Sie können bestimmte Bereiche der Karte flach darstellen, um 3D-Gebäude, 3D-Bauwerke und 3D-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, in dem Sie benutzerdefinierte 3D-Modelle, Markierungen oder Datenebenen platzieren können, 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:

TypeScript

async function initMap(): Promise<void> {
    await google.maps.importLibrary('maps3d');

    const map = document.querySelector('gmp-map-3d') as Element;
    const flattener = document.querySelector('gmp-flattener') as Element;
    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';
        }
    });

}

initMap();index.ts

JavaScript

async function initMap() {
    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';
        }
    });
}
initMap();index.js

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;
}style.css

HTML

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

        <link rel="stylesheet" type="text/css" href="./style.css" />
        <script type="module" src="./index.js"></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>

        <script>
            (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",
            v: "beta",
            // Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
            // Add other bootstrap parameters as needed, using camel case.
            });
        </script>
    </body>
</html>index.html

Testbeispiel

JSFiddle.net

Bereich flach darstellen

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

<gmp-map-3d center="40.707, -74.017, 0" tilt="67.5">
  <gmp-flattener path="40.7144,-74.0208 40.6993,-74.019 40.7035,-74.0004"></gmp-flattener>
</gmp-map-3d>

Bestimmten Bereich entzerren

Im folgenden Beispiel wird gezeigt, wie ein Bereich eines Polygons (mit flattener.innerPaths) aus dem Flattener entfernt wird:

<gmp-map-3d center="40.707, -74.007, 0" tilt="67.5">
  <gmp-flattener id="my-flattener" path="40.7144,-74.0208 40.6993,-74.019 40.7035,-74.0004"></gmp-flattener>
</gmp-map-3d>

<script>
  const flattener = document.getElementById('my-flattener');
  flattener.innerPaths = [
    [
      { lat: 40.71, lng: -74.0175 },
      { lat: 40.703, lng: -74.0165 },
      { lat: 40.7035, lng: -74.006 }
    ],
  ];
</script>

Hauptvorteile

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