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 mit einem LatLng-Koordinatensystem verbunden ist. Die 3D-Karten in der Maps JavaScript API unterstützen 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 Polyline3DElement-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 Polyline3DElement-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 Farben, Breiten, Deckkräfte, Höhen und geometrische Stiloptionen des Linienstrichs in den Polyline3DElementOptions angeben. Alternativ lassen sich diese Eigenschaften auch nach der Konstruktion ändern. Für Polylinien werden folgende Strichstile unterstützt:

  • outerColor: Ein HTML-Hexadezimalwert im Format "#FFFFFF".
  • outerWidth: Ein numerischer Wert zwischen 0.0 und 1.0, der als Prozentsatz von strokeWidth interpretiert wird.
  • strokeColor: Ein HTML-Hexadezimalwert im Format "#FFFFFF".
  • strokeWidth: Die Breite der Linie in Pixeln.
  • geodesic: Gibt an, ob die Kanten des Polygons der Erdkrümmung folgen oder als gerade Linien gezeichnet werden sollen.
  • altitudeMode: Wie Höhenkomponenten in den Koordinaten interpretiert werden
  • drawsOccludedSegments: Ein boolescher Wert, der angibt, ob Teile des Polygons, die von Objekten (z. B. Gebäuden) verdeckt werden, gezeichnet werden sollen.
  • extruded: Ein boolescher Wert, der angibt, ob die Polylinie mit dem Boden verbunden werden soll.

let map;
async function init() {
    const { Map3DElement, Polyline3DElement } =
        await google.maps.importLibrary('maps3d');

    map = new Map3DElement({
        center: { lat: 37.7927, lng: -122.402, altitude: 65.93 },
        range: 3362.87,
        tilt: 64.01,
        heading: 25.0,
        mode: 'SATELLITE',
    });

    document.body.append(map);

    const polyline = new Polyline3DElement({
        path: [
            { 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 },
        ],
        strokeColor: 'blue',
        outerColor: 'white',
        strokeWidth: 10,
        outerWidth: 0.4,
        altitudeMode: 'RELATIVE_TO_GROUND', // Place it on the ground (as it has no altitude it will just be at ground height).
        drawsOccludedSegments: true, // Show the line through the buildings or anything else that might get in the way.
    });

    map.append(polyline);
}

void init();

Interaktive Polylinien

Im folgenden Beispiel wird die Eigenschaft drawsOccludedSegments der Polylinie nach dem Registrieren eines Click-Events umgeschaltet.

let map;
async function init() {
    const { Map3DElement, Polyline3DInteractiveElement } =
        await google.maps.importLibrary('maps3d');

    map = new Map3DElement({
        center: { lat: 37.7927, lng: -122.402, altitude: 65.93 },
        range: 3362.87,
        tilt: 64.01,
        heading: 25.0,
        mode: 'SATELLITE',
    });

    document.body.append(map);

    const polyline = new Polyline3DInteractiveElement({
        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 },
        ],
        strokeColor: 'blue',
        outerColor: 'white',
        strokeWidth: 10,
        outerWidth: 0.4,
        altitudeMode: 'RELATIVE_TO_GROUND', // Place it on the ground (as it has no altitude it will just be at ground height).
        drawsOccludedSegments: true, // Show the line through the buildings or anything else that might get in the way.
    });

    polyline.addEventListener('gmp-click', function () {
        // Toggle whether the line draws occluded segments.
        this.drawsOccludedSegments = !this.drawsOccludedSegments;
    });

    map.append(polyline);
}

void 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. Polygon3DElement-Objekte ähneln Polyline3DElement-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 Deckkraft des eingeschlossenen Bereichs (den Füllbereich) definieren. Farben müssen in einem hexadezimalen HTML-Format angegeben werden. Farbnamen werden nicht unterstützt.

Polygon3DElement-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 Polygon3DElement-Objekts ein aus Arrays 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 Polygon3DElement mit einem einzigen Array von LatLng-Koordinaten konstruieren. Die 3D-Karten in Maps JavaScript API konvertieren das Array bei der Konstruktion in ein Array von Arrays, wenn es in der Eigenschaft path gespeichert wird.

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

    const map3DElement = new Map3DElement({
        center: { lat: 40.6842, lng: -74.0019, altitude: 1000 },
        heading: 340,
        tilt: 70,
        mode: 'HYBRID',
    });

    const polygonOptions = {
        strokeColor: '#0000ff80',
        strokeWidth: 8,
        fillColor: '#ff000080',
        drawsOccludedSegments: false,
    };

    const examplePolygon = new Polygon3DElement(polygonOptions);

    examplePolygon.path = [
        { lat: 40.7144, lng: -74.0208 },
        { lat: 40.6993, lng: -74.019 },
        { lat: 40.7035, lng: -74.0004 },
    ];

    map3DElement.append(examplePolygon);

    document.body.append(map3DElement);
}

void init();

Interaktive Polygone

Im folgenden Beispiel werden die inneren und äußeren Farben des Polygons geändert, nachdem ein Klickereignis registriert wurde.

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

    const map = new Map3DElement({
        center: { lat: 40.6842, lng: -74.0019, altitude: 1000 },
        heading: 340,
        tilt: 70,
        mode: 'HYBRID',
    });

    document.body.append(map);

    const polygonOptions = {
        strokeColor: '#0000ff80',
        strokeWidth: 8,
        fillColor: '#ff000080',
        drawsOccludedSegments: false,
    };

    const examplePolygon = new Polygon3DInteractiveElement(polygonOptions);

    examplePolygon.path = [
        { lat: 40.7144, lng: -74.0208 },
        { lat: 40.6993, lng: -74.019 },
        { lat: 40.7035, lng: -74.0004 },
        { lat: 40.7144, lng: -74.0208 },
    ];

    examplePolygon.addEventListener('gmp-click', function (event) {
        // change the color of the polygon stroke and fill colors to a random alternatives!
        this.fillColor = randomizeHexColor(this.fillColor);
        this.strokeColor = randomizeHexColor(this.strokeColor);
        console.log(event);
    });

    map.append(examplePolygon);
}

function randomizeHexColor(originalHexColor) {
    console.log(originalHexColor);
    const alpha = originalHexColor.substring(7);

    // Generate random values for Red, Green, Blue (0-255)
    const r = Math.floor(Math.random() * 256);
    const g = Math.floor(Math.random() * 256);
    const b = Math.floor(Math.random() * 256);

    console.log(r + ' ' + g + ' ' + b);

    // Convert decimal to 2-digit hex, padding with '0' if needed
    const rHex = ('0' + r.toString(16)).slice(-2);
    const gHex = ('0' + g.toString(16)).slice(-2);
    const bHex = ('0' + b.toString(16)).slice(-2);

    // Combine parts: '#' + random RGB + original Alpha (if any)
    return `#${rHex}${gHex}${bHex}${alpha}`;
}

void init();