Formen und Linien

Plattform auswählen: Android iOS

Sie können einer Karte verschiedene Formen hinzufügen. Eine Form ist ein Objekt auf der Karte, das an ein LatLng-Koordinatensystem gebunden ist. Die API „Fotorealistische 3D-Karten in Google Maps – JavaScript“ unterstützt das Hinzufügen von Linien und Polygonen zur Karte.

Polylinien

Wenn Sie eine Linie auf einer Karte zeichnen möchten, verwenden Sie eine Polylinie. Die Polyline3DElement-Klasse definiert ein lineares Overlay, das aus verbundenen Liniensegmenten auf der Karte besteht. Ein Polyline-Objekt besteht aus einem Array mit LatLng-Positionen und erstellt eine Folge von Liniensegmenten, die diese Orte in einer geordneten Reihenfolge miteinander verbinden.

Polylinien hinzufügen

Für den Polyline-Konstruktor werden eine Reihe von Polyline3DElementOptions angegeben, mit denen die LatLng-Koordinaten der Linie sowie eine Reihe von Stilen für das visuelle Verhalten der Polylinie festgelegt werden.

Polylinienobjekte werden als Folge gerader Segmente auf der Karte gezeichnet. Sie können beim Konstruieren der Linie benutzerdefinierte Werte für Farbe, Breite, Deckkraft, Höhe und geometrische Stiloptionen für den Linienstrich in den Polyline3DElementOptions angeben. Alternativ lassen sich diese Eigenschaften auch nach der Konstruktion ändern. Für Polylinien werden folgende Strichstile unterstützt:

  • outerColor: Eine HTML-Hexadezimalfarbe im Format "#FFFFFF".
  • outerWidth: Ein numerischer Wert zwischen 0.0 und 1.0, der als Prozentsatz des strokeWidth interpretiert wird.
  • strokeColor: Eine HTML-Hexadezimalfarbe im Format "#FFFFFF".
  • strokeWidth: Die Breite der Linie in Pixeln.
  • geodesic: Gibt an, ob die Kanten des Polygons der Krümmung der Erde folgen oder als gerade Linien gezeichnet werden.
  • altitudeMode: Wie werden Höhenkomponenten in den Koordinaten interpretiert?
  • drawsOccludedSegments: Ein boolescher Wert, der angibt, ob Teile des Polygons, die von Objekten (z. B. Gebäuden) verdeckt sind, gezeichnet werden sollen.
  • extruded: Ein boolescher Wert, der angibt, ob die Polylinie mit dem Boden verbunden sein soll.
async function init() {
    const { Map3DElement, MapMode } = await google.maps.importLibrary("maps3d");

    const map = new Map3DElement({
      center: { lat: 37.772675996068915, lng: -122.3978382542777, altitude: 2500 },
      tilt: 45,
      heading: 5.9743656,
      mode: MapMode.HYBRID,
    });

    const { Polyline3DElement, AltitudeMode } = await google.maps.importLibrary("maps3d");

    const polylineOptions = {
      strokeColor: "#EA433580",
      strokeWidth: 10,
      altitudeMode: "ABSOLUTE",
      extruded: true,
      drawsOccludedSegments: true,
    }
    const polyline = new google.maps.maps3d.Polyline3DElement(polylineOptions)

    polyline.coordinates = [
      {lat: 37.80515638571346, lng: -122.4032569467164},
      {lat: 37.80337073509504, lng: -122.4012878349353},
      {lat: 37.79925208843463, lng: -122.3976697250461},
      {lat: 37.7989102378512, lng: -122.3983408725656},
      {lat: 37.79887832784348, lng: -122.3987094864192},
      {lat: 37.79786443410338, lng: -122.4066878788802},
      {lat: 37.79549248916587, lng: -122.4032992702785},
      {lat: 37.78861484290265, lng: -122.4019489189814},
      {lat: 37.78618687561075, lng: -122.398969592545},
      {lat: 37.7892310309145, lng: -122.3951458683092},
      {lat: 37.7916358762409, lng: -122.3981969390652}
    ];

    map.append(polyline)
    document.body.append(map);
}
init();

Interaktive Polylinien

Im folgenden Beispiel wird die Strichfarbe der Polylinie geändert, nachdem ein Klickereignis registriert wurde.

async function init() {
  const colors = ["red", "blue", "green", "yellow"];

  const { Map3DElement, MapMode, Polyline3DInteractiveElement } = await google.maps.importLibrary("maps3d");

  const map = new Map3DElement({
    center: {lat: 0, lng: -180, altitude: 15000000},
    mode: MapMode.HYBRID,
  });

  document.body.append(map);

  const polyline = new Polyline3DInteractiveElement({
    coordinates: [
      { lat: 37.772, lng: -122.214 },
      { lat: 21.291, lng: -157.821 },
      { lat: -18.142, lng: 178.431 },
      { lat: -27.467, lng: 153.027 }
    ],
    strokeColor: 'red',
    strokeWidth: 10,
  });

  polyline.addEventListener('gmp-click', (event) => {
    polyline.strokeColor = colors[~~(Math.random() * colors.length)];
  });

  map.append(polyline);
}

init();

Polygone

Ein Polygon stellt eine Fläche dar, die von einem geschlossenen Pfad (oder Kreis) umrahmt wird, der durch eine Reihe von Koordinaten definiert ist. Polygon-Objekte ähneln Polyline-Objekten insofern, als sie aus einer Reihe von Koordinaten in einer geordneten Reihenfolge bestehen. Polygone werden mit einem Strich und einem Füllbereich gezeichnet. Sie können benutzerdefinierte Farben und Breiten für den Rand des Polygons (den Strich) sowie benutzerdefinierte Farben und Deckkraftwerte für den eingeschlossenen Bereich (die Füllung) festlegen. Farben müssen als HTML-Hexadezimalwert angegeben werden. Farbnamen werden nicht unterstützt.

Polygon-Objekte können komplexe Formen beschreiben, darunter:

  • Mehrere nicht zusammenhängende Bereiche, die durch ein einzelnes Polygon definiert werden
  • Bereiche mit Löchern
  • Überschneidungen von einem oder mehreren Bereichen

Um eine komplexe Form zu definieren, verwenden Sie ein Polygon mit mehreren Pfaden.

Polygone hinzufügen

Da eine Polygonfläche mehrere separate Pfade umfassen kann, gibt die Eigenschaft „paths“ des Polygon-Objekts ein aus Arrays vom Typ MVCArray bestehendes Array an. Jedes Array definiert eine separate Folge geordneter LatLng-Koordinaten.

Für einfache Polygone, die nur aus einem Pfad bestehen, können Sie ein Polygon mit einem einzigen Array von LatLng-Koordinaten konstruieren. Die API „Fotorealistische 3D-Karten in Google Maps – JavaScript“ konvertiert das Array bei der Konstruktion in ein Array, wenn es in der Eigenschaft outerCoordinates gespeichert wird.

async function init() {
    const { Map3DElement, MapMode } = await google.maps.importLibrary("maps3d");

    const map3DElement = new Map3DElement({
        center: { lat: 43.6425, lng: -79.3871, altitude: 400 },
        range: 1000,
        tilt: 60,
        mode: MapMode.SATELLITE,
    });

    const { Polygon3DElement, AltitudeMode } = await google.maps.importLibrary("maps3d");

    const polygonOptions = {
        strokeColor: "#EA433580",
        strokeWidth: 4,
        fillColor: "#0000FF80",
        altitudeMode: "ABSOLUTE",
        extruded: true,
        drawsOccludedSegments: true,
    }

    const towerPolygon = new google.maps.maps3d.Polygon3DElement(polygonOptions);

    towerPolygon.outerCoordinates = [
        { lat: 43.6427196, lng: -79.3876802, altitude: 600 },
        { lat: 43.6421742, lng: -79.3869184, altitude: 600 },
        { lat: 43.643001, lng: -79.3866475, altitude: 600 }
    ];

    map3DElement.append(towerPolygon);
    document.body.append(map3DElement);
}
init();

Interaktive Polygone

Im folgenden Beispiel wird die Strichfarbe des Polygons geändert, nachdem ein Klickereignis erfasst wurde.

async function init() {
  const colors = ["red", "blue", "green", "yellow"];
  const { Map3DElement, MapMode } = await google.maps.importLibrary("maps3d");

  const map3DElement = new Map3DElement({
      center: { lat: 43.6425, lng: -79.3871, altitude: 400 },
      range: 1000,
      tilt: 60,
      mode: MapMode.SATELLITE,
  });

  const { Polygon3DInteractiveElement, AltitudeMode } = await google.maps.importLibrary("maps3d");

  const polygonOptions = {
      strokeColor: "#EA433580",
      strokeWidth: 4,
      fillColor: "#0000FF80",
      altitudeMode: "ABSOLUTE",
      extruded: true,
      drawsOccludedSegments: true,
  }

  const towerPolygon = new google.maps.maps3d.Polygon3DInteractiveElement(polygonOptions);

  towerPolygon.outerCoordinates = [
      { lat: 43.6427196, lng: -79.3876802, altitude: 600 },
      { lat: 43.6421742, lng: -79.3869184, altitude: 600 },
      { lat: 43.643001, lng: -79.3866475, altitude: 600 }
  ];

    towerPolygon.addEventListener('gmp-click', (event) => {
      towerPolygon.strokeColor = colors[~~(Math.random() * colors.length)];
    });

  map3DElement.append(towerPolygon);

  document.body.append(map3DElement);
}

init();