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 3D-Karten in 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 Klasse Polyline3DElement 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 wird 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, Deckkraft, Höhen und geometrische Formatierungsoptionen 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: Eine HTML-Hexadezimalfarbe im Format "#FFFFFF".
• outerWidth: Ein numerischer Wert zwischen 0.0 und 1.0, der als Prozentsatz von 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 Höhenkomponenten in den Koordinaten interpretiert werden
• drawsOccludedSegments: Ein boolescher Wert, der angibt, ob Teile des Polygons, die durch Objekte (z. B. Gebäude) 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',
        gestureHandling: 'COOPERATIVE',
    });

    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();
index.js

Interaktive Polylinien

Im folgenden Beispiel wird die Eigenschaft drawsOccludedSegments der Polylinie nach der Registrierung eines Click-Ereignisses 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',
        gestureHandling: 'COOPERATIVE',
    });

    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();
index.js

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 Deckkraftwerte für den eingeschlossenen Bereich (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 Array von Arrays 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',
        gestureHandling: 'COOPERATIVE',
    });

    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();
index.js

Interaktive Polygone

Im folgenden Beispiel werden die Innen- und Außenfarben des Polygons geändert, nachdem ein Click-Event 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',
        gestureHandling: 'COOPERATIVE',
    });

    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();
index.js