Forme e linee

Seleziona la piattaforma: Android iOS

Puoi aggiungere varie forme alla mappa. Una forma è un oggetto sulla mappa, collegato a un sistema di coordinate LatLng. Le mappe 3D nell'API Maps JavaScript supportano l'aggiunta di linee e poligoni alla mappa.

Polilinee

Per tracciare una linea sulla mappa, utilizza una polilinea. La Polyline3DElement classe definisce una sovrapposizione lineare di segmenti di linea collegati sulla mappa. Un oggetto Polyline3DElement è costituito da un array di località LatLng e crea una serie di segmenti di linea che collegano queste località in una sequenza ordinata.

Aggiungere una polilinea

Il costruttore Polyline3DElement accetta un insieme di Polyline3DElementOptions che specificano le coordinate LatLng della linea e un insieme di stili per regolare il comportamento visivo della polilinea.

Gli oggetti polilinea vengono disegnati come una serie di segmenti retti sulla mappa. Puoi specificare colori, larghezze, opacità, altezze e opzioni di stile geometrico personalizzati per il tratto della linea all'interno di Polyline3DElementOptions durante la costruzione della linea oppure puoi modificare queste proprietà dopo la costruzione. Una polilinea supporta i seguenti stili di tratto:

• outerColor: un colore HTML esadecimale nel formato "#FFFFFF".
• outerWidth: un valore numerico compreso tra 0.0 e 1.0, che viene interpretato come una percentuale di strokeWidth.
• strokeColor: un colore HTML esadecimale nel formato "#FFFFFF".
• strokeWidth: la larghezza della linea in pixel.
• geodesic: indica se i bordi del poligono seguono la curvatura della terra o vengono disegnati come linee rette.
• altitudeMode: indica come vengono interpretati i componenti di altitudine nelle coordinate.
• drawsOccludedSegments: un valore booleano che indica se le parti del poligono oscurate da oggetti (ad esempio edifici) devono essere disegnate.
• extruded: un valore booleano che indica se la polilinea deve essere collegata al terreno.

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

Polilinee interattive

L'esempio seguente attiva/disattiva la proprietà drawsOccludedSegments della polilinea dopo aver registrato un evento di clic.

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

Poligoni

Un poligono rappresenta un'area racchiusa da un percorso chiuso (o loop), definita da una serie di coordinate. Polygon3DElement oggetti sono simili agli oggetti Polyline3DElement in quanto sono costituiti da una serie di coordinate in una sequenza ordinata. I poligoni vengono disegnati con un tratto e un riempimento. Puoi definire colori e larghezze personalizzati per il bordo del poligono (il tratto) e colori e opacità personalizzati per l'area racchiusa (il riempimento). I colori devono essere indicati in formato HTML esadecimale. I nomi dei colori non sono supportati.

Gli oggetti Polygon3DElement possono descrivere forme complesse, tra cui:

• Più aree non contigue definite da un singolo poligono.
• Aree con fori.
• Intersezioni di una o più aree.

Per definire una forma complessa, utilizza un poligono con più percorsi.

Aggiungere un poligono

Poiché un'area poligonale può includere più percorsi separati, la proprietà paths dell'oggetto Polygon3DElement specifica un array di array. Ogni array definisce una sequenza separata di coordinate LatLng ordinate.

Per i poligoni di base costituiti da un solo percorso, puoi costruire un Polygon3DElement utilizzando un singolo array di coordinate LatLng. Le mappe 3D nell'API Maps JavaScript convertiranno l'array in un array di array durante la costruzione quando lo memorizzano nella proprietà 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

Poligoni interattivi

L'esempio seguente modifica i colori interni ed esterni del poligono dopo aver registrato un evento di clic.

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