Forme e linee

Seleziona la 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 del 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. Un polyline supporta i seguenti stili di tratto:

  • outerColor: un colore HTML esadecimale del formato "#FFFFFF".
  • outerWidth: un valore numerico compreso tra 0.0 e 1.0, interpretato come percentuale di strokeWidth.
  • strokeColor: un colore HTML esadecimale del 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 parti del poligono nascoste da oggetti (ad esempio edifici).
  • extruded: un valore booleano che indica se il polilinea deve essere collegato al suolo.
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 aver registrato 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 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 buchi.
  • Incroci 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 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. Le mappe 3D fotorealistiche nell'API Maps JavaScript convertiranno l'array in un array di array al momento della costruzione quando lo memorizzano 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 aver registrato 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();