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 classe Polyline3DElement definisce una sovrapposizione lineare di segmenti di linea collegati sulla mappa. Un oggetto Polyline3DElement è costituito da un array di posizioni LatLng e crea una serie di segmenti di retta che collegano queste posizioni 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 creazione della linea oppure puoi modificare queste proprietà dopo la creazione. 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 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 se vengono disegnati come linee rette.
• altitudeMode: Come vengono interpretati i componenti di altitudine nelle coordinate
• drawsOccludedSegments: un valore booleano che indica se devono essere disegnate le parti del poligono oscurate da oggetti (come edifici).
• 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.Polygon3DElementGli 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 diversi percorsi separati, la proprietà percorsi 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 creare 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 all'interno della 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 interno ed esterno del poligono dopo la registrazione di 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