Forme e linee

Seleziona piattaforma:Android iOS

Puoi aggiungere varie forme alla mappa. Una forma è un oggetto sulla mappa, associato a un sistema di coordinate LatLng. Le mappe 3D fotorealistiche 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 Polyline è costituito da un array di posizioni LatLng e crea una serie di segmenti di linea che collegano queste posizioni in una sequenza ordinata.

Aggiungere una polilinea

Il costruttore Polyline 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 dell'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.
async function init() {
    const { Map3DElement, MapMode } = await google.maps.importLibrary("maps3d");

    const map = new Map3DElement({
      center: { lat: 37.772675996068915, lng: -122.3978382542777, altitude: 2500 },
      tilt: 45,
      heading: 5.9743656,
      mode: MapMode.HYBRID,
    });

    const { Polyline3DElement, AltitudeMode } = await google.maps.importLibrary("maps3d");

    const polylineOptions = {
      strokeColor: "#EA433580",
      strokeWidth: 10,
      altitudeMode: "ABSOLUTE",
      extruded: true,
      drawsOccludedSegments: true,
    }
    const polyline = new google.maps.maps3d.Polyline3DElement(polylineOptions)

    polyline.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}
    ];

    map.append(polyline)
    document.body.append(map);
}
init();

Polilinee interattive

L'esempio seguente modifica il colore del tratto della polilinea dopo la registrazione di un evento di clic.

async function init() {
  const colors = ["red", "blue", "green", "yellow"];

  const { Map3DElement, MapMode, Polyline3DInteractiveElement } = await google.maps.importLibrary("maps3d");

  const map = new Map3DElement({
    center: {lat: 0, lng: -180, altitude: 15000000},
    mode: MapMode.HYBRID,
  });

  document.body.append(map);

  const polyline = new Polyline3DInteractiveElement({
    coordinates: [
      { lat: 37.772, lng: -122.214 },
      { lat: 21.291, lng: -157.821 },
      { lat: -18.142, lng: 178.431 },
      { lat: -27.467, lng: 153.027 }
    ],
    strokeColor: 'red',
    strokeWidth: 10,
  });

  polyline.addEventListener('gmp-click', (event) => {
    polyline.strokeColor = colors[~~(Math.random() * colors.length)];
  });

  map.append(polyline);
}

init();

Poligoni

Un poligono rappresenta un'area racchiusa da un percorso chiuso (o anello), che è definito da una serie di coordinate. Gli oggetti Polygon sono simili agli oggetti Polyline 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 Polygon 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à paths dell'oggetto Polygon specifica un array di array, ciascuno di tipo MVCArray. Ogni array definisce una sequenza separata di coordinate LatLng ordinate.

Per i poligoni di base costituiti da un solo percorso, puoi creare un Polygon utilizzando un singolo array di coordinate LatLng. L'API Maps JavaScript per le mappe 3D fotorealistiche converte l'array in un array di array durante la costruzione quando lo memorizza all'interno della proprietà outerCoordinates.

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

    const map3DElement = new Map3DElement({
        center: { lat: 43.6425, lng: -79.3871, altitude: 400 },
        range: 1000,
        tilt: 60,
        mode: MapMode.SATELLITE,
    });

    const { Polygon3DElement, AltitudeMode } = await google.maps.importLibrary("maps3d");

    const polygonOptions = {
        strokeColor: "#EA433580",
        strokeWidth: 4,
        fillColor: "#0000FF80",
        altitudeMode: "ABSOLUTE",
        extruded: true,
        drawsOccludedSegments: true,
    }

    const towerPolygon = new google.maps.maps3d.Polygon3DElement(polygonOptions);

    towerPolygon.outerCoordinates = [
        { lat: 43.6427196, lng: -79.3876802, altitude: 600 },
        { lat: 43.6421742, lng: -79.3869184, altitude: 600 },
        { lat: 43.643001, lng: -79.3866475, altitude: 600 }
    ];

    map3DElement.append(towerPolygon);
    document.body.append(map3DElement);
}
init();

Poligoni interattivi

L'esempio seguente modifica il colore del tratto del poligono dopo la registrazione di un evento di clic.

async function init() {
  const colors = ["red", "blue", "green", "yellow"];
  const { Map3DElement, MapMode } = await google.maps.importLibrary("maps3d");

  const map3DElement = new Map3DElement({
      center: { lat: 43.6425, lng: -79.3871, altitude: 400 },
      range: 1000,
      tilt: 60,
      mode: MapMode.SATELLITE,
  });

  const { Polygon3DInteractiveElement, AltitudeMode } = await google.maps.importLibrary("maps3d");

  const polygonOptions = {
      strokeColor: "#EA433580",
      strokeWidth: 4,
      fillColor: "#0000FF80",
      altitudeMode: "ABSOLUTE",
      extruded: true,
      drawsOccludedSegments: true,
  }

  const towerPolygon = new google.maps.maps3d.Polygon3DInteractiveElement(polygonOptions);

  towerPolygon.outerCoordinates = [
      { lat: 43.6427196, lng: -79.3876802, altitude: 600 },
      { lat: 43.6421742, lng: -79.3869184, altitude: 600 },
      { lat: 43.643001, lng: -79.3866475, altitude: 600 }
  ];

    towerPolygon.addEventListener('gmp-click', (event) => {
      towerPolygon.strokeColor = colors[~~(Math.random() * colors.length)];
    });

  map3DElement.append(towerPolygon);

  document.body.append(map3DElement);
}

init();