Biblioteka geometryczna

  1. Omówienie
  2. Pojęcia związane z geometrią sferyczną
    1. Funkcje związane z odległością i powierzchnią
    2. Funkcje nawigacyjne
  3. Kodowanie geometryczne
  4. Funkcje wielokąta i linii łamanej
    1. containsLocation()
    2. isLocationOnEdge()

Omówienie

Pojęcia w tym dokumencie odnoszą się wyłącznie do funkcji dostępne w bibliotece google.maps.geometry. Ten biblioteka nie jest domyślnie wczytywana podczas wczytywania interfejsu Maps JavaScript API lecz musi być wyraźnie określone za pomocą atrybutu libraries parametru wczytywania. Więcej informacji: Omówienie bibliotek.

Biblioteka geometrii Maps JavaScript API zapewnia użyteczność do obliczania danych geometrycznych na powierzchni Ziemię. Biblioteka obejmuje 3 przestrzenie nazw:

  • spherical zawiera narzędzia do geometrii kulistej umożliwiające obliczenie kątów, odległości i obszaru geograficznego na podstawie szerokości i długości geograficznej.
  • encoding zawiera narzędzia do kodowania i dekodowania ścieżek linii łamanych zgodnie z Zakodowany Algorytm linii łamanej.
  • poly zawiera funkcje użytkowe na potrzeby obliczeń obejmujących wielokąty oraz linii łamanych.

Biblioteka google.maps.geometry nie zawiera żadnych zajęcia; , biblioteka zawiera metody statyczne na powyższej liście przestrzeni nazw.

Pojęcia geometrii sferycznej

Obrazy w Maps JavaScript API są dwuwymiarowe i „płaski”. Ziemia jest natomiast trójwymiarowa i często w przybliżeniu jako oblata sferoidowa lub więcej jako sferę. W interfejsie API Map Google używamy kuli. przedstawiają Ziemię na dwuwymiarowej płaskiej powierzchni, takiej jak ekran Twojego komputera – interfejs API Map Google wykorzystuje .

W perspektywie 2D wygląd może być czasem mylący. Ponieważ rzutowanie mapy wymaga pewnych zniekształceń, Geometria euklidyjska często nie ma zastosowania. Na przykład najkrótsza odległość między dwoma punktami na kuli nie jest linią prostą, ale wielkim okręgiem (rodzaj zjawiska geodezyjnego) oraz kąty tworzące trójkąt na powierzchni całkowita suma kuli wynosi ponad 180 stopni.

Ze względu na te różnice funkcje geometryczne na kuli (lub prognozy) wymaga użycia funkcji Geometria sferyczna do obliczania takich obiektów jak odległość, kierunek i powierzchnia. Usługi komunalne i obliczyć te kuliste konstrukcje geometryczne zawarte na Mapach Przestrzeń nazw interfejsu API google.maps.geometry.spherical. Ta przestrzeń nazw udostępnia statyczne metody obliczania wartości skalarnych na podstawie współrzędnych sferycznych (długości i szerokości geograficzne).

Funkcje odległości i powierzchni

Odległość między dwoma punktami to długość najkrótszej ścieżki między . Ta najkrótsza ścieżka jest nazywana geodezyjną. Wszystkie obszary geodezyjne na kuli są z segmentów wielkiego kręgu. Aby obliczyć tę odległość, wywołaj funkcję computeDistanceBetween(), osiągając wynik 2 LatLng obiektów.

Zamiast tego możesz użyć funkcji computeLength(), aby obliczyć długość, danej ścieżki, jeśli masz kilka lokalizacji.

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

Aby obliczyć pole powierzchni wielokąta (w metrach kwadratowych), wywołaj computeArea(), przekazując tablicę obiektów LatLng tworząc pętlę zamkniętą.

W przypadku nawigacji po kuli nagłówek to kąt danego kierunku. od stałego punktu odniesienia, zwykle jest to północ prawdziwa. W ramach interfejsu API Map Google kierunek jest zdefiniowany w stopniach od rzeczywistej północy, gdzie kierunek jest mierzony w prawo od prawdziwej północy (0 stopni). Możesz obliczyć ten nagłówek między dwóch lokalizacji computeHeading(), z wynikiem 2 from i to obiekty LatLng.

Biorąc pod uwagę określony kierunek, lokalizację początkową i odległość przebytej trasy (w metrach), można obliczyć współrzędne miejsca docelowego za pomocą funkcji computeOffset()

Biorąc pod uwagę 2 obiekty LatLng o wartości od 0 do 1, możemy też obliczyć miejsce docelowe między nimi za pomocą Metoda interpolate(), która przeprowadza sferyczną liniową płaszczyznę liniową między dwiema lokalizacjami, gdzie wartość wskazuje odległość ułamkowa, jaką musi przebyć ścieżka z punktu początkowego do miejsce docelowe.

Następujący przykład pokazuje utworzenie dwóch linii łamanych po kliknięciu dwóch punktów. na mapie — jedno geodezyjne i jedno „proste” linia łącząca obie i oblicza kierunek podróży między dwa punkty:

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

Zobacz próbkę

Metody kodowania

Ścieżki w Maps JavaScript API są często określane jako Array z LatLng obiektów. Jednak mijanie Taka tablica jest często niepożądana. Zamiast tego możesz użyć linia łamana algorytmem kodowania, aby skompresować daną ścieżkę, co umożliwia później dekompresować przez dekodowanie.

geometry biblioteka zawiera encoding przestrzeń nazw do kodowania i dekodowania linii łamanych.

Metoda statyczna encodePath() koduje podaną ścieżkę. Można przekazać tablicę LatLng lub MVCArray (zwracany przez Polyline.getPath()).

Aby zdekodować zakodowaną ścieżkę, wywołaj decodePath() jako zakodowany ciąg znaków.

Poniższy przykład przedstawia mapę Oksfordu w stanie Missisipi. Kliknięcie na mapie powoduje dodanie punktu do linii łamanej. Ponieważ linia łamana jest pojawi się pod nim kodowanie.

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

Zobacz próbkę

Funkcje wielokąta i linii łamanej

Przestrzeń nazw poly biblioteki geometrii zawiera funkcje użytkowe które określają, czy dany punkt znajduje się wewnątrz wielokąta, w jego pobliżu lub w pobliżu linia łamana.

containsLocation()

containsLocation(point:LatLng, polygon:Polygon)

Aby sprawdzić, czy dany punkt mieści się w wielokątie, przekaż go wielokąt do google.maps.geometry.poly.containsLocation(). funkcje zwraca wartość „true” (prawda), jeśli punkt znajduje się w obrębie wielokąta lub na jego krawędzi.

Ten kod zapisuje „true” do konsoli przeglądarki, jeśli użytkownik kliknie mieści się w zdefiniowanym trójkącie; w przeciwnym razie ma 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 spada. w Trójkącie Bermudzkim, a czerwone koło:

Zobacz przykład

isLocationOnEdge()

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

Aby określić, czy punkt znajduje się na linii łamanej, w pobliżu lub na na krawędzi wielokąta, przekazać punkt, linię łamaną/wielokąt wartość tolerancji w stopniach na google.maps.geometry.poly.isLocationOnEdge() Funkcja zwraca wartość prawda, jeśli odległość między punktem a najbliższym punktem na drodze linia lub krawędź mieści się w określonej tolerancji. Domyślna tolerancja ma wartość 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);