Formas e linhas

Selecione a plataforma: Android iOS

É possível adicionar várias formas a um mapa. Uma forma é um objeto no mapa vinculado a um sistema de coordenadas LatLng. A API Maps JavaScript de mapas 3D fotorrealistas é compatível com a adição de linhas e polígonos ao mapa.

Polilinhas

Para desenhar uma linha no mapa, use uma polilinha. A classe Polyline3DElement define uma sobreposição linear de segmentos de linha conectados no mapa. Um objeto Polyline é composto por uma matriz de locais LatLng e cria uma série de segmentos de linha que conectam esses locais em uma sequência ordenada.

Adicionar uma polilinha

O construtor Polyline usa um conjunto de Polyline3DElementOptions para especificar as coordenadas de LatLng da linha e um conjunto de estilos para ajustar o comportamento visual da polilinha.

Os objetos de polilinha são desenhados como uma série de segmentos retos no mapa. Você pode especificar cores, larguras, opacidades, alturas e opções de estilo geométrico personalizadas para o traço da linha em Polyline3DElementOptions durante a construção dela, ou alterar essas propriedades após a construção. Uma polilinha permite os estilos de traço a seguir:

  • outerColor: uma cor HTML hexadecimal do formato "#FFFFFF".
  • outerWidth: um valor numérico entre 0.0 e 1.0, que é interpretado como uma porcentagem do strokeWidth.
  • strokeColor: uma cor HTML hexadecimal do formato "#FFFFFF".
  • strokeWidth: a largura da linha em pixels.
  • geodesic: se as bordas do polígono seguem a curvatura da Terra ou são desenhadas como linhas retas.
  • altitudeMode: como os componentes de altitude nas coordenadas são interpretados
  • drawsOccludedSegments: um booleano que indica se partes do polígono obscuradas por objetos (como edifícios) precisam ser desenhadas.
  • extruded: um booleano que indica se a poligonal precisa ser conectada ao 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();

Polilinhas interativas

O exemplo a seguir muda a cor do traço da polilinha depois de registrar um evento de clique.

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

Um polígono representa uma área envolvida por um caminho (ou loop) fechado, identificado por uma série de coordenadas. Os objetos Polygon são semelhantes aos objetos Polyline, porque são formados por uma série de coordenadas em uma sequência ordenada. Os polígonos são desenhados com um traço e um preenchimento. Defina cores e larguras personalizadas para a borda do polígono (o traço) e cores e opacidades personalizadas para a área fechada (o preenchimento). As cores precisam ser indicadas no formato HTML hexadecimal. Nomes de cores não são permitidos.

Objetos Polygon podem descrever formas complexas, incluindo:

  • Várias áreas não contíguas definidas por um único polígono.
  • Áreas com buracos.
  • Interseções de uma ou mais áreas.

Para definir uma forma complexa, use um polígono com vários caminhos.

Adicionar um polígono

Como uma área poligonal pode incluir vários caminhos diferentes, a propriedade de caminhos do objeto Polygon especifica uma matriz de matrizes, cada uma do tipo MVCArray. e define uma sequência diferente de coordenadas LatLng ordenadas.

Para polígonos básicos que consistem em apenas um caminho, você pode construir um Polygon usando uma única matriz de coordenadas LatLng. A API Maps JavaScript de mapas 3D fotorrealistas vai converter a matriz em uma matriz de matrizes durante a construção, ao armazená-la na propriedade 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 interativos

O exemplo a seguir muda a cor do traço do polígono depois de registrar um evento de clique.

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();