Bentuk dan garis

Pilih platform: Android iOS

Anda dapat menambahkan berbagai bentuk ke peta. Bentuk adalah objek pada peta, yang terikat dengan sistem koordinat LatLng. Peta 3D di Maps JavaScript API mendukung penambahan garis dan poligon ke peta.

Polyline

Untuk menggambar garis pada peta Anda, gunakan polyline. Class Polyline3DElement menentukan overlay linear segmen garis terhubung di peta. Objek Polyline3DElement terdiri dari array lokasi LatLng, dan membuat serangkaian segmen garis yang menghubungkan lokasi tersebut secara berurutan.

Menambahkan polyline

Konstruktor Polyline3DElement menggunakan sekumpulan Polyline3DElementOptions yang menentukan koordinat LatLng garis dan sekumpulan gaya untuk menyesuaikan perilaku visual polyline.

Objek polyline digambar sebagai serangkaian segmen lurus di peta. Anda dapat menentukan warna, lebar, opasitas, tinggi, dan opsi gaya geometris khusus untuk goresan garis dalam Polyline3DElementOptions saat membuat garis, atau Anda dapat mengubah properti tersebut setelah pembuatan. Polyline mendukung gaya goresan berikut:

• outerColor: Warna HTML heksadesimal dengan format "#FFFFFF".
• outerWidth: Nilai numerik antara 0.0 dan 1.0, yang ditafsirkan sebagai persentase strokeWidth.
• strokeColor: Warna HTML heksadesimal dengan format "#FFFFFF".
• strokeWidth: Lebar garis dalam piksel.
• geodesic: apakah tepi poligon mengikuti kelengkungan bumi, atau digambar sebagai garis lurus.
• altitudeMode: Cara komponen ketinggian dalam koordinat ditafsirkan
• drawsOccludedSegments: Boolean yang menunjukkan apakah bagian poligon yang terhalang oleh objek (seperti bangunan) harus digambar.
• extruded: Boolean yang menunjukkan apakah polyline harus terhubung ke tanah.

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

Polyline interaktif

Contoh berikut mengalihkan properti drawsOccludedSegments polyline setelah mendaftarkan peristiwa klik.

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

Poligon

Poligon mewakili area yang dikurung oleh jalur tertutup (atau loop), yang ditentukan dengan serangkaian koordinat. Objek Polygon3DElement serupa dengan objek Polyline3DElement yang di dalamnya berisi rangkaian koordinat secara berurutan. Poligon digambar dengan goresan dan isian. Anda dapat menentukan warna dan lebar khusus untuk tepi poligon (goresan) dan warna serta opasitas khusus untuk area tertutup (isian). Warna harus ditunjukkan dalam format HTML heksadesimal. Nama warna tidak didukung.

Objek Polygon3DElement dapat mendeskripsikan bentuk yang kompleks, termasuk:

• Beberapa bidang tak berbatasan yang ditentukan dengan satu poligon.
• Bidang dengan lubang di dalamnya.
• Perpotongan dari satu atau beberapa bidang.

Untuk mendefinisikan bentuk rumit, gunakan poligon dengan beberapa jalur.

Menambahkan poligon

Karena bidang poligon dapat mencakup beberapa jalur terpisah, properti jalur objek Polygon3DElement menentukan susunan array. Setiap array menentukan urutan terpisah dari koordinat LatLng yang diurutkan.

Untuk poligon dasar yang hanya terdiri dari satu jalur, Anda dapat membuat Polygon3DElement menggunakan satu array koordinat LatLng. Peta 3D di Maps JavaScript API akan mengonversi array menjadi susunan array setelah pembuatannya jika array tersebut disimpan dalam properti path.

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

Poligon interaktif

Contoh berikut mengubah warna dalam dan luar poligon setelah mendaftarkan peristiwa klik.

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