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. Fotorealistyczne mapy 3D w interfejsie Maps JavaScript API obsługują dodawanie linii i wielokątów do mapy.

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 A Polyline składa się z tablicy LatLng lokalizacji i tworzy serię odcinków łączących te lokalizacje w określonej kolejności.

Dodawanie linii łamanej

Konstruktor Polyline przyjmuje zestaw Polyline3DElementOptions określający LatLng współrzędne linii oraz zestaw stylów, które dostosowują wygląd polilinii.

Obiekty linii łamanych są rysowane na mapie jako seria prostych odcinków. Możesz określić niestandardowe kolory, szerokości, przezroczystości, wysokości i opcje stylu geometrycznego kreski w Polyline3DElementOptions podczas tworzenia linii lub zmienić te właściwości po jej utworzeniu. Linia łamana obsługuje te style linii:

  • outerColor: szesnastkowy kolor HTML w formacie "#FFFFFF".
  • outerWidth: wartość liczbowa z zakresu od 0.0 do 1.0, która jest 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ć zakrzywione zgodnie z krzywizną Ziemi, czy mają być rysowane jako linie proste.
  • altitudeMode: sposób interpretacji składników wysokości we współrzędnych.
  • drawsOccludedSegments: wartość logiczna wskazująca, czy należy rysować części wielokąta zasłonięte przez obiekty (np. budynki).
  • extruded: wartość logiczna wskazująca, czy polilinia ma być połączona z podłożem.
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

Poniższy przykład zmienia kolor linii łamanej po zarejestrowaniu zdarzenia kliknięcia.

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 ograniczony zamkniętą ścieżką (lub pętlą) zdefiniowaną przez serię współrzędnych. Obiekty Polygon są podobne do obiektów Polyline, ponieważ składają się z ciągu współrzędnych w uporządkowanej sekwencji. Wielokąty są rysowane z obrysem i wypełnieniem. Możesz zdefiniować niestandardowe kolory i szerokości boków wielokąta (kreski) oraz niestandardowe kolory i przezroczystość objętego nim obszaru (wypełnienie). Kolory powinny być podane w szesnastkowym formacie HTML. Nazwy kolorów nie są obsługiwane.

Obiekty Polygon mogą opisywać złożone kształty, w tym:

  • Wiele nieprzylegających do siebie obszarów zdefiniowanych przez jeden wielokąt.
  • obszary z dziurami,
  • Przecięcia co najmniej 1 obszaru.

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

Dodaj wielokąt

Obszar wielokątny może obejmować kilka oddzielnych ścieżek, dlatego właściwość Polygonpaths obiektu określa tablicę tablic, z których każda jest typu MVCArray. Każda tablica definiuje osobną 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 za pomocą pojedynczej tablicy LatLng współrzędnych. Interfejs Photorealistic 3D Maps w Mapach w JavaScripcie przekształci tablicę w tablicę tablic podczas tworzenia, gdy będzie ją przechowywać we właściwości 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 poniższym przykładzie po zarejestrowaniu zdarzenia kliknięcia zmieniamy kolor konturu wielokąta.

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