Formas y líneas

Selecciona la plataforma: Android iOS

Puedes agregar varias formas a tu mapa. Una forma es un objeto del mapa que está asociado a un sistema de coordenadas LatLng. Los mapas fotorrealistas en 3D incluidos en la API de Maps JavaScript admiten la incorporación de líneas y polígonos al mapa.

Polilíneas

Para dibujar una línea en tu mapa, usa una polilínea. La clase Polyline3DElement define una superposición lineal de segmentos de líneas conectados en el mapa. Un objeto Polyline consta de un array de ubicaciones LatLng y crea una serie de segmentos de líneas que conectan esas ubicaciones en una secuencia ordenada.

Cómo agregar una polilínea

El constructor Polyline toma un conjunto de Polyline3DElementOptions que especifica las coordenadas LatLng de la línea y un conjunto de opciones de diseño para ajustar el comportamiento visual de la polilínea.

Los objetos Polyline se dibujan como una serie de segmentos rectos en el mapa. Al crear tu línea, puedes especificar colores, anchos, opacidades, alturas y opciones de diseño geométrico personalizados para el trazo en Polyline3DElementOptions, o puedes cambiar estas propiedades después de la construcción. Una polilínea admite los siguientes diseños de trazo:

  • outerColor: Es un color HTML hexadecimal con el formato "#FFFFFF".
  • outerWidth: Es un valor numérico entre 0.0 y 1.0, que se interpreta como un porcentaje de strokeWidth.
  • strokeColor: Es un color HTML hexadecimal con el formato "#FFFFFF".
  • strokeWidth: Es el ancho de la línea en píxeles.
  • geodesic: Indica si los bordes del polígono siguen la curvatura de la Tierra o se dibujan como líneas rectas.
  • altitudeMode: Cómo se interpretan los componentes de altitud en las coordenadas
  • drawsOccludedSegments: Es un valor booleano que indica si se deben dibujar las partes del polígono que están ocultas por objetos (como edificios).
  • extruded: Es un valor booleano que indica si la polilínea debe conectarse al suelo.
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();

Polilíneas interactivas

En el siguiente ejemplo, se cambia el color del trazo de la polilínea después de registrar un evento de 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();

Polígonos

Un polígono representa un área delimitada por un trazado cerrado (o bucle), que se define a través de una serie de coordenadas. Los objetos Polygon son similares a los objetos Polyline, ya que constan de una serie de coordenadas en una secuencia ordenada. Los polígonos se dibujan con un trazo y un relleno. Puedes definir colores y anchos personalizados para el contorno del polígono (el trazo) y colores y opacidades personalizados para el área delimitada (el relleno). Los colores deben indicarse en formato HTML hexadecimal. No se admiten nombres de colores.

Los objetos Polygon pueden describir formas complejas, incluidas las siguientes:

  • Múltiples áreas no contiguas definidas por un solo polígono
  • Áreas con agujeros
  • Intersecciones de una o más áreas

Para definir una forma compleja, debes usar un polígono con varios trazados.

Cómo agregar un polígono

Dado que un área poligonal puede incluir varios trazados separados, la propiedad paths del objeto Polygon especifica un array de arrays, cada uno de tipo MVCArray. Cada array define una secuencia separada de coordenadas LatLng ordenadas.

En el caso de los polígonos básicos que constan de un solo trazado, puedes construir un Polygon con un único array de coordenadas LatLng. Los mapas fotorrealistas en 3D de la API de Maps JavaScript convertirán el array en un array de arrays después de la construcción, cuando se almacene en la propiedad 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();

Polígonos interactivos

En el siguiente ejemplo, se cambia el color del trazo del polígono después de registrar un evento de 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();