Formas e linhas

Selecione a plataforma: Android iOS

É possível adicionar várias formas a um mapa. Elas são objetos vinculados a um sistema de coordenadas LatLng. Os mapas 3D fotorrealistas na API Maps JavaScript permitem adicionar 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 LatLng da linha e um conjunto de estilos para ajustar o comportamento visual da polilinha.

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étricas personalizadas para o traço da linha em Polyline3DElementOptions durante a construção dela, ou alterar essas propriedades posteriormente. Uma polilinha permite os estilos de traço a seguir:

  • outerColor: uma cor HTML hexadecimal no formato "#FFFFFF".
  • outerWidth: um valor numérico entre 0.0 e 1.0, que é interpretado como uma porcentagem de strokeWidth.
  • strokeColor: uma cor HTML hexadecimal no formato "#FFFFFF".
  • strokeWidth: a largura da linha em pixels.
  • geodesic: indica 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 as partes do polígono obscurecidas por objetos (como edifícios) devem ser desenhadas.
  • extruded: um booleano que indica se a polilinha deve ser conectada ao chão.
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 parecidos com os 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 envolvida (o preenchimento). Indique as cores 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 "paths" do objeto Polygon especifica uma matriz de matrizes. Cada uma é do tipo MVCArray. Cada matriz define uma sequência separada 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. Os mapas 3D fotorrealistas na API Maps JavaScript convertem 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();