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 adició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 de polilínea se dibujan como una serie de segmentos rectos en el mapa. Cuando crees tu línea, puedes especificar colores, anchos, opacidades, alturas y opciones de diseño geométrico personalizados para el trazo de la línea dentro de Polyline3DElementOptions, o puedes cambiar esas propiedades después de la construcción. Una línea poligonal admite los siguientes estilos 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 partes del polígono que ocultan objetos (como edificios).
  • extruded: Es un valor booleano que indica si el polilinea debe conectarse con el 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 borde del polígono (el trazo), y también opacidades y colores 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 de rutas 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. La API de Photorealistic 3D Maps en Maps JavaScript convertirá 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();