Geometri Kitaplığı

  1. Genel Bakış
  2. Küresel Geometri Kavramları
    1. Mesafe ve Alan İşlevleri
    2. Gezinme İşlevleri
  3. Geometri Kodlama
  4. Poligon ve Çoklu Çizgi İşlevleri
    1. containsLocation()
    2. isLocationOnEdge()

Genel Bakış

Bu dokümandaki kavramlar yalnızca özelliklerle ilgilidir google.maps.geometry kitaplığında mevcut. Bu Maps JavaScript API'yi yüklediğinizde kitaplık varsayılan olarak yüklenmez ancak libraries kullanılarak açıkça belirtilmelidir bootstrap parametresinden yararlanın. Daha fazla bilgi için Kitaplıklara Genel Bakış.

Maps JavaScript API geometri kitaplığı yüzeyindeki geometrik verilerin hesaplanması için fonksiyonlar Earth'ü seçin. Kitaplıkta üç ad alanı bulunur:

  • spherical. açıları hesaplamanıza olanak tanıyan küresel geometri yardımcı programları içerir, enlem ve boylamlara göre mesafeleri ve alanları gösterir.
  • encoding. Google Haritalar API'larına göre çoklu çizgi yollarını kodlama ve Kodlanmış Çoklu Çizgi Algoritması.
  • poly. Çokgen ve çokgen içeren hesaplamalar için yardımcı fonksiyonlar çoklu çizgiler.

google.maps.geometry kitaplığında hiç yok sınıflar; bunun yerine kitaplık yukarıdaki ad alanları.

Küresel Geometri Kavramları

Maps JavaScript API'deki resimler iki boyutludur ve "düz"dür. Ancak Dünya üç boyutludur ve genelde ya da speroid veya daha fazlasını sunuyor. Maps API'de bir küre kullanıyoruz. Dünya'yı iki boyutlu düz bir yüzeyde temsil eder (ör. — Maps API bir projeksiyon.

2D projeksiyonlarda, görünümler bazen aldatıcı olabilir. Harita projeksiyonu mutlaka bir miktar bozulma gerektirdiğinden, Öklidan geometrisi genellikle geçerli değildir. Örneğin, belirlenen en kısa mesafe küre üzerinde iki nokta arasındaki düz bir çizgi değil, büyük bir daire yüzeyde bir üçgeni oluşturan açılar (bir tür jeodezik) kürenin toplamı 180 dereceden fazladır.

Bu farklılıklar nedeniyle, bir küre üzerinde (veya küre üzerinde) geometrik fonksiyonlar projeksiyon) projeksiyon Küresel Geometri alan, istikamet ve alan gibi yapıları hesaplamak için kullanılır. Yardımcı programlar Haritalar sınırları içinde yer alan bu küresel geometrik yapıları hesaplamak API'nin google.maps.geometry.spherical ad alanı. Bu ad alanı küresel koordinatlardan skaler değerleri hesaplamak için statik yöntemler sunar (enlemler ve boylamlar).

Mesafe ve Alan İşlevleri

İki nokta arasındaki mesafe, aralarındaki en kısa yolun uzunluğudur. gerekir. Bu en kısa yola jeodezik denir. Küre üzerinde tüm jeodezikler segmentleri şeklinde olabilir. Bu mesafeyi hesaplamak için şu numarayı arayın: computeDistanceBetween(), iki LatLng geçti nesneler'i tıklayın.

Bunun yerine Uzunluğu hesaplamak için computeLength() yol sayısını gösterir.

Mesafe sonuçları metre cinsinden ifade edilir.

Bir poligonal alanın alanını (metrekare cinsinden) hesaplamak için computeArea(), LatLng nesne dizisi iletiliyor açıklayacağım.

Küre üzerinde gezinirken yön, yönün açısıdır genellikle gerçek kuzey olmak üzere, sabit bir referans noktasından Google Maps API'de, istikamet, doğru kuzeyden derece olarak tanımlanır, burada başlıklar ölçülür gerçek kuzeyden saat yönünde (0 derece). Bu başlığı, şu iki konuma sahip olan: computeHeading() yöntemini iletme, ikinci yöntem from ve to LatLng nesne.

Belirli bir başlık, kalkış yeri ve uzaklığa göre (metre cinsinden) kullanarak varış noktası koordinatlarını computeOffset().

İki LatLng nesnesi ve 0 ile 1 arasında bir değere göre, aralarındaki hedefi hesaplamak için interpolate() yöntemi, küresel doğrusal iki konum arasındaki interpolasyondur. Burada değer, başlangıç noktasından yola kadar yol üzerinde gidilecek kesirli mesafe seçeceğiz.

Aşağıdaki örnekte iki noktayı tıkladığınızda iki çoklu çizgi oluşturuluyor Haritada biri jeodezik, diğeri "düz" ikisini birbirine bağlayan çizgi yer alır ve iki nokta arasındaki seyahatin başlığını hesaplar iki puan:

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
Örneği inceleyin

Örneği Deneyin

Kodlama Yöntemleri

Maps JavaScript API içindeki yollar genellikle Array/LatLng nesne. Ancak, genellikle hacimli olur. Bunun yerine Google'ın çoklu çizgi kodlama algoritmasıyla birlikte, belirli bir yolu sıkıştırmak kod çözme sürecindeki sıkıştırmayı çözüyoruz.

geometry kitaplık bir encoding içeriyor Çoklu çizgileri kodlamak ve kodunu çözmek için yardımcı programlar için ad alanı.

encodePath() statik yöntemi, belirtilen yolu kodlar. Bir LatLng dizisi veya MVCArray (şunu döndürür: Polyline.getPath()).

Kodlanmış bir yolun kodunu çözmek için decodePath() çağrısı yapın yöntemin şifreli dizenin aktarılmasıyla ilgilidir.

Aşağıdaki örnekte Oxford, Mississippi'nin bir haritası gösterilmektedir. Haritayı tıkladığınızda çoklu çizgiye bir nokta eklenir. Çoklu çizgi oluşturulduğu için kodlaması bunun altında görünür.

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
Örneği inceleyin

Örneği Deneyin

Poligon ve Çoklu Çizgi işlevleri

Geometri kitaplığının poly ad alanı, yardımcı program işlevleri içerir belirli bir noktanın bir poligonun içinde mi yoksa yakınında mı olduğunu çoklu çizgi.

containsLocation()

containsLocation(point:LatLng, polygon:Polygon)

Belirli bir noktanın bir poligona denk gelip gelmediğini bulmak için, noktayı o noktanın poligonu google.maps.geometry.poly.containsLocation() olarak değiştirin. İlgili içeriği oluşturmak için kullanılan nokta poligonun içinde veya kenarındaysa işlevleri doğru değerini döndürür.

Aşağıdaki kod "true" yazar kullanıcı tıkladığında tanımlanan üçgenin içinde kalan Aksi takdirde "false" yazar. 

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

Bu kodun başka bir sürümü, tıklama düşerse haritada mavi bir üçgen çizer çerçeve içinde gösterilir, aksi takdirde kırmızı bir daireyle

Örneği inceleyin

isLocationOnEdge()

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

Bir noktanın bir çoklu çizginin üzerinde mi, yakınında mı, yoksa çizginin üzerinde mi yoksa yakınında mı olduğunu belirlemek için bir çokgenin kenarını, noktayı, çoklu çizgiyi/poligonu ve isteğe bağlı olarak bir derece cinsinden tolerans değeri google.maps.geometry.poly.isLocationOnEdge(). İşlev nokta ile bu yüzeyin üzerindeki en yakın nokta arasındaki mesafe, çizgi veya kenar, belirtilen tolerans dahilindedir. Varsayılan tolerans değer 10-9 derecedir.

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