Ta strona została przetłumaczona przez Cloud Translation API.

Biblioteka geometryczna

Przegląd
Pojęcia geometrii sferycznej
1. Funkcje odległości i powierzchni
2. Funkcje nawigacyjne
Kodowanie geometryczne
Funkcje wielokątów i linii łamanych
1. containsLocation()
2. isLocationOnEdge(),

Omówienie

Pojęcia używane w tym dokumencie odnoszą się do funkcji dostępnych tylko w bibliotece google.maps.geometry. Ta biblioteka nie jest domyślnie wczytywana podczas wczytywania interfejsu Maps JavaScript API, ale trzeba ją wyraźnie określić za pomocą parametru rozruchu libraries. Więcej informacji znajdziesz w artykule Omówienie bibliotek.

Biblioteka geometryczna interfejsu Maps JavaScript API udostępnia funkcje użyteczne przy obliczaniu danych geometrycznych na powierzchni Ziemi. Biblioteka zawiera 3 przestrzenie nazw:

spherical zawiera narzędzia geometryczne sferyczne, które pozwalają obliczać kąty, odległości i powierzchnie na podstawie szerokości i długości geograficznej.
encoding zawiera narzędzia do kodowania i dekodowania ścieżek łamanych liniowych zgodnie z zakodowanym algorytmem łamania linii łamanych.
poly zawiera funkcje obliczeniowe do obliczeń związanych z wielokątami i liniami łamanymi.

Biblioteka google.maps.geometry nie zawiera żadnych klas. Zamiast tego zawiera biblioteki statyczne w powyższych przestrzeniach nazw.

Koncepcje geometryczne sferyczne

Obrazy w interfejsie Maps JavaScript API są dwuwymiarowe i „płaskie”. Ziemia jest jednak trójwymiarowa i często jest określana jako przestarzały sheroid lub jako kula ziemska. W interfejsie API Map Google używamy kuli i prezentujemy Ziemię na dwuwymiarowej płaskiej powierzchni, np. na ekranie komputera. Interfejs API Map Google używa projekcji.

Wygląd 2D może być zwodniczy. Odwzorowanie mapy musi wymagać zniekształceń, dlatego często nie ma zastosowania prosta geometria euklidesowa. Na przykład najkrótsza odległość między dwoma punktami na sferze nie jest linią prostą, ale wielkim okręgiem (rodzaj geodezji) i kąty, które składają się z trójkąta na powierzchni kuli, co daje ponad 180 stopni.

Ze względu na te różnice funkcje geometryczne na sferze (lub na jej odwzorowaniu) wymagają użycia geometrii sferycznej do obliczenia takich konstrukcji jako odległości, nagłówka i powierzchni. Narzędzia do obliczania tych konstrukcji geometrycznych sferycznych są zawarte w przestrzeni nazw google.maps.geometry.spherical interfejsu API Map Google. Ta przestrzeń nazw udostępnia statyczne metody obliczania wartości skalarnych na podstawie współrzędnych sferycznych (szerokość i długość geograficzną).

Funkcje dystansu i powierzchni

Odległość między dwoma punktami to długość najkrótszej ścieżki między nimi. Ta najkrótsza ścieżka nazywa się geodemią. Na sferze wszystkie geodetyki to fragmenty wielkiego okręgu. Aby obliczyć tę odległość, wywołaj computeDistanceBetween(), przekazując 2 obiekty LatLng.

Zamiast tego w przypadku kilku lokalizacji możesz użyć computeLength(), aby obliczyć długość danej ścieżki.

Wyniki odległości są wyrażone w metrach.

Aby obliczyć obszar (w metrach kwadratowych) wielokąta, wywołaj funkcję computeArea(), przekazując tablicę obiektów LatLng definiujących pętlę.

Gdy poruszasz się po kuli ziemskiej, kierunek to kąt patrzenia w kierunku ustalonego punktu odniesienia, zwykle na północ. W interfejsie API Map Google nagłówek jest zdefiniowany w stopniach od północy na północy, gdzie wartości są mierzone w prawo od północy (0 stopni). Ten nagłówek możesz obliczyć za pomocą metody computeHeading(), przekazując dane 2 obiektów from i to LatLng.

Biorąc pod uwagę konkretny nagłówek, lokalizację punktu początkowego i odległość (w metrach), możesz obliczyć współrzędne miejsca docelowego za pomocą computeOffset().

Biorąc pod uwagę 2 obiekty LatLng i wartość od 0 do 1, możesz też obliczyć punkt docelowy między nimi, korzystając z metody interpolate(), która polega na kulisnej interpolacji między obiema lokalizacjami. Ta wartość pokazuje ułamkową odległość, która pokonuje trasę od punktu początkowego do miejsca docelowego.

Poniższy przykład tworzy dwa linie łamane, gdy klikniesz dwa punkty na mapie – jedną geodezyjną i „prostą” łączącą te dwie lokalizacje – i oblicza nagłówek do podróży między tymi dwoma punktami:

TypeScript

// This example requires the Geometry library. Include the libraries=geometry
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=geometry">

let marker1: google.maps.Marker, marker2: google.maps.Marker;
let poly: google.maps.Polyline, geodesicPoly: google.maps.Polyline;

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 4,
      center: { lat: 34, lng: -40.605 },
    }
  );

  map.controls[google.maps.ControlPosition.TOP_CENTER].push(
    document.getElementById("info") as HTMLElement
  );

  marker1 = new google.maps.Marker({
    map,
    draggable: true,
    position: { lat: 40.714, lng: -74.006 },
  });

  marker2 = new google.maps.Marker({
    map,
    draggable: true,
    position: { lat: 48.857, lng: 2.352 },
  });

  const bounds = new google.maps.LatLngBounds(
    marker1.getPosition() as google.maps.LatLng,
    marker2.getPosition() as google.maps.LatLng
  );

  map.fitBounds(bounds);

  google.maps.event.addListener(marker1, "position_changed", update);
  google.maps.event.addListener(marker2, "position_changed", update);

  poly = new google.maps.Polyline({
    strokeColor: "#FF0000",
    strokeOpacity: 1.0,
    strokeWeight: 3,
    map: map,
  });

  geodesicPoly = new google.maps.Polyline({
    strokeColor: "#CC0099",
    strokeOpacity: 1.0,
    strokeWeight: 3,
    geodesic: true,
    map: map,
  });

  update();
}

function update() {
  const path = [
    marker1.getPosition() as google.maps.LatLng,
    marker2.getPosition() as google.maps.LatLng,
  ];

  poly.setPath(path);
  geodesicPoly.setPath(path);

  const heading = google.maps.geometry.spherical.computeHeading(
    path[0],
    path[1]
  );

  (document.getElementById("heading") as HTMLInputElement).value =
    String(heading);
  (document.getElementById("origin") as HTMLInputElement).value = String(
    path[0]
  );
  (document.getElementById("destination") as HTMLInputElement).value = String(
    path[1]
  );
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;index.ts

JavaScript

// This example requires the Geometry library. Include the libraries=geometry
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=geometry">
let marker1, marker2;
let poly, geodesicPoly;

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: { lat: 34, lng: -40.605 },
  });

  map.controls[google.maps.ControlPosition.TOP_CENTER].push(
    document.getElementById("info")
  );
  marker1 = new google.maps.Marker({
    map,
    draggable: true,
    position: { lat: 40.714, lng: -74.006 },
  });
  marker2 = new google.maps.Marker({
    map,
    draggable: true,
    position: { lat: 48.857, lng: 2.352 },
  });

  const bounds = new google.maps.LatLngBounds(
    marker1.getPosition(),
    marker2.getPosition()
  );

  map.fitBounds(bounds);
  google.maps.event.addListener(marker1, "position_changed", update);
  google.maps.event.addListener(marker2, "position_changed", update);
  poly = new google.maps.Polyline({
    strokeColor: "#FF0000",
    strokeOpacity: 1.0,
    strokeWeight: 3,
    map: map,
  });
  geodesicPoly = new google.maps.Polyline({
    strokeColor: "#CC0099",
    strokeOpacity: 1.0,
    strokeWeight: 3,
    geodesic: true,
    map: map,
  });
  update();
}

function update() {
  const path = [marker1.getPosition(), marker2.getPosition()];

  poly.setPath(path);
  geodesicPoly.setPath(path);

  const heading = google.maps.geometry.spherical.computeHeading(
    path[0],
    path[1]
  );

  document.getElementById("heading").value = String(heading);
  document.getElementById("origin").value = String(path[0]);
  document.getElementById("destination").value = String(path[1]);
}

window.initMap = initMap;index.js

Zobacz przykład

Fragment

Stackblitz.com CodeSandbox.io JSFiddle.net GitPod.io Google Cloud Shell

Metody kodowania

Ścieżki w interfejsie Maps JavaScript API są często określane jako obiekty Array obiektu LatLng. Jednak pomijanie takiej tablicy jest często bardzo pracochłonne. Zamiast tego możesz skompresować daną ścieżkę, korzystając z algorytmu kodowania Polyline, który możesz później zdekompresować przez dekodowanie.

Biblioteka geometry zawiera przestrzeń nazw encoding, w której narzędzia mogą kodować i dekodować łamane linie.

Metoda statyczna encodePath() koduje podaną ścieżkę. Możesz przesłać tablicę LatLngs lub MVCArray (zwracaną przez Polyline.getPath()).

Aby zdekodować zakodowaną ścieżkę, wywołaj metodę decodePath() przekazującą metodę zakodowanego ciągu znaków.

Poniższy przykład pokazuje mapę stanu Oxford w stanie Missisipi. Kliknięcie mapy dodaje punkt do linii łamanej. Po utworzeniu linii łamanej kodowanie pojawia się pod nią.

TypeScript

// This example requires the Geometry library. Include the libraries=geometry
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=geometry">

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 14,
      center: { lat: 34.366, lng: -89.519 },
    }
  );
  const poly = new google.maps.Polyline({
    strokeColor: "#000000",
    strokeOpacity: 1,
    strokeWeight: 3,
    map: map,
  });

  // Add a listener for the click event
  google.maps.event.addListener(map, "click", (event) => {
    addLatLngToPoly(event.latLng, poly);
  });
}

/**
 * Handles click events on a map, and adds a new point to the Polyline.
 * Updates the encoding text area with the path's encoded values.
 */
function addLatLngToPoly(
  latLng: google.maps.LatLng,
  poly: google.maps.Polyline
) {
  const path = poly.getPath();

  // Because path is an MVCArray, we can simply append a new coordinate
  // and it will automatically appear
  path.push(latLng);

  // Update the text field to display the polyline encodings
  const encodeString = google.maps.geometry.encoding.encodePath(path);

  if (encodeString) {
    (document.getElementById("encoded-polyline") as HTMLInputElement).value =
      encodeString;
  }
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;index.ts

JavaScript

// This example requires the Geometry library. Include the libraries=geometry
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=geometry">
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 14,
    center: { lat: 34.366, lng: -89.519 },
  });
  const poly = new google.maps.Polyline({
    strokeColor: "#000000",
    strokeOpacity: 1,
    strokeWeight: 3,
    map: map,
  });

  // Add a listener for the click event
  google.maps.event.addListener(map, "click", (event) => {
    addLatLngToPoly(event.latLng, poly);
  });
}

/**
 * Handles click events on a map, and adds a new point to the Polyline.
 * Updates the encoding text area with the path's encoded values.
 */
function addLatLngToPoly(latLng, poly) {
  const path = poly.getPath();

  // Because path is an MVCArray, we can simply append a new coordinate
  // and it will automatically appear
  path.push(latLng);

  // Update the text field to display the polyline encodings
  const encodeString = google.maps.geometry.encoding.encodePath(path);

  if (encodeString) {
    document.getElementById("encoded-polyline").value = encodeString;
  }
}

window.initMap = initMap;index.js

Zobacz przykład

Fragment

Stackblitz.com CodeSandbox.io JSFiddle.net GitPod.io Google Cloud Shell

Funkcje wielokątów i linii łamanych

Przestrzeń nazw poly biblioteki geometrycznej zawiera funkcje narzędzi, które określają, czy dany punkt znajduje się wewnątrz wielokąta czy linii łamanej, czy w jej pobliżu.

zawiera lokalizację()

containsLocation(point:LatLng, polygon:Polygon)

Aby sprawdzić, czy dany punkt należy do wielokąta, przekaż go i wielokąt do google.maps.geometry.poly.containsLocation(). Funkcje zwracają wartość „prawda”, jeśli punkt znajduje się w obrębie wielokąta lub jego krawędzi.

Jeśli kod kliknięcia użytkownika mieści się w zdefiniowanym trójkątze, ten kod otrzymuje wartość „true” (prawda). W przeciwnym razie otrzymuje wartość „false” (fałsz).

function initialize() {
  var mapOptions = {
    zoom: 5,
    center: new google.maps.LatLng(24.886, -70.269),
    mapTypeId: 'terrain'
  };

  var map = new google.maps.Map(document.getElementById('map'),
      mapOptions);

  var bermudaTriangle = new google.maps.Polygon({
    paths: [
      new google.maps.LatLng(25.774, -80.190),
      new google.maps.LatLng(18.466, -66.118),
      new google.maps.LatLng(32.321, -64.757)
    ]
  });

  google.maps.event.addListener(map, 'click', function(event) {
    console.log(google.maps.geometry.poly.containsLocation(event.latLng, bermudaTriangle));
  });
}

google.maps.event.addDomListener(window, 'load', initialize);

Inna wersja tego kodu rysuje na mapie niebieski trójkąt, jeśli kliknięcie należy do trójkąta Bermudów, a czerwone kółko:

Zobacz przykład

isLocationOnEdge()

isLocationOnEdge(point:LatLng, poly:Polygon|Polyline, tolerance?:number)

Aby ustalić, czy punkt znajduje się na linii łamanej, w jej pobliżu, czy w pobliżu krawędzi wielokąta, przekaż go, linię łamaną lub wielokąt i opcjonalnie wartość tolerancji w stopniach do google.maps.geometry.poly.isLocationOnEdge(). Ta funkcja zwraca wartość „prawda”, jeśli odległość od punktu do najbliższego punktu na linii lub krawędzi mieści się w określonym zakresie tolerancji. Domyślna wartość tolerancji to 10^–9 stopni.

function initialize() {
  var myPosition = new google.maps.LatLng(46.0, -125.9);

  var mapOptions = {
    zoom: 5,
    center: myPosition,
    mapTypeId: 'terrain'
  };

  var map = new google.maps.Map(document.getElementById('map'),
      mapOptions);

  var cascadiaFault = new google.maps.Polyline({
    path: [
      new google.maps.LatLng(49.95, -128.1),
      new google.maps.LatLng(46.26, -126.3),
      new google.maps.LatLng(40.3, -125.4)
    ]
  });

  cascadiaFault.setMap(map);

  if (google.maps.geometry.poly.isLocationOnEdge(myPosition, cascadiaFault, 10e-1)) {
    alert("Relocate!");
  }
}

google.maps.event.addDomListener(window, 'load', initialize);

Biblioteka geometryczna

Omówienie

Koncepcje geometryczne sferyczne

Funkcje dystansu i powierzchni

Funkcje nawigacyjne

TypeScript

JavaScript

Fragment

Metody kodowania

TypeScript

JavaScript

Fragment

Funkcje wielokątów i linii łamanych

zawiera lokalizację()

isLocationOnEdge()