Kształty i linie

Wybierz platformę: Android iOS

Do mapy możesz dodawać różne kształty. Kształt to obiekt na mapie powiązany z LatLng układem współrzędnych. Interfejs Maps JavaScript API obsługuje dodawanie do mapy linii i poligonów.

Linie łamane

Aby narysować linię na mapie, użyj linii łamanej. Klasa Polyline3DElement definiuje liniową nakładkę połączonych odcinków linii na mapie. Obiekt Polyline składa się z tablicy lokalizacji LatLng i tworzy serię odcinków linii, które łączą te lokalizacje w uporządkowanej sekwencji.

Dodawanie linii łamanej

Konstruktor Polyline przyjmuje zestaw Polyline3DElementOptions określający współrzędne LatLng linii oraz zestaw stylów do dostosowywania zachowania wizualnego polilinii.

Obiekty linii złożonych są na mapie wyświetlane jako ciąg prostych odcinków. Podczas tworzenia linii możesz określić niestandardowe kolory, szerokości, przezroczystości, wysokości i opcje stylizacji geometrycznej kreski w Polyline3DElementOptions. Możesz też zmienić te właściwości po zakończeniu tworzenia. Polyline obsługuje te style obrysu:

  • outerColor: szesnastkowy kolor HTML w formacie "#FFFFFF".
  • outerWidth: wartość liczbowa z zakresu od 0.0 do 1.0, interpretowana jako procent wartości strokeWidth.
  • strokeColor: szesnastkowy kolor HTML w formacie "#FFFFFF".
  • strokeWidth: szerokość linii w pikselach.
  • geodesic: określa, czy krawędzie wielokąta mają być zgodne z krzywizną Ziemi, czy mają być rysowane jako linie proste.
  • altitudeMode: sposób interpretacji elementów wysokości w współrzędnych,
  • drawsOccludedSegments: wartość logiczna wskazująca, czy części wielokąta zasłonięte przez obiekty (np. budynki) powinny być rysowane.
  • extruded: wartość logiczna wskazująca, czy linia łamanya ma być połączona z ziemią.
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();

Interaktywne linie łamane

W tym przykładzie po zarejestrowaniu zdarzenia kliknięcia zmienia się kolor obrysu polilinii.

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

Wielokąty

Wielokąt reprezentuje obszar zamknięty przez zamkniętą ścieżkę (lub pętlę), która jest zdefiniowana przez ciąg współrzędnych. Polygon obiekty są podobne do obiektów Polyline, ponieważ składają się z szeregu współrzędnych w uporządkowanej sekwencji. Wielokąty są rysowane za pomocą obrysu i wypełnienia. Możesz zdefiniować niestandardowe kolory i szerokość boków wielokąta (kreski) oraz niestandardowe kolory i przezroczystość objętego obszaru (wypełnienie). Kolory powinny być wskazane w formacie szesnastkowym HTML. Nazwy kolorów nie są obsługiwane.

Obiekty Polygon mogą opisywać złożone kształty, takie jak:

  • Wiele obszarów niesąsiadujących zdefiniowanych przez jeden wielokąt.
  • obszary z dziurami.
  • Przecięcie co najmniej 2 obszarów.

Aby zdefiniować złożony kształt, użyj wielokąta z wieloma ścieżkami.

Dodaj wielokąt

Ponieważ obszar wielokątny może zawierać kilka oddzielnych ścieżek, właściwość paths obiektu Polygon określa tablicę tablic, z których każda ma typ MVCArray. Każda tablica definiuje oddzielną sekwencję uporządkowanych współrzędnych LatLng.

W przypadku podstawowych wielokątów składających się tylko z jednej ścieżki możesz utworzyć Polygon, używając pojedynczego tablicowego ciągu współrzędnych LatLng. Interfejs API Mapy Google JavaScript – Fotorealistyczne mapy 3D podczas tworzenia tablicy przekształci ją w tablicę tablic i zapisze ją w atrybucie 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();

Interaktywne wielokąty

W tym przykładzie po zarejestrowaniu zdarzenia kliknięcia kolor obrysu zostaje zmieniony.

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