Geometri Kitaplığı

  1. Genel Bakış
  2. Küresel Geometri Kavramları
    1. Mesafe ve Alan İşlevleri
    2. Gezinme işlevleri
  3. Geometri Kodlama
  4. Çokgen ve Çoklu Çizgi İşlevleri
    1. containsLocation()
    2. isLocationOnEdge()
    3. Coğrafi sınır ve güvenli bölge yarıçapı kontrolleri

Genel Bakış

Bu belgedeki kavramlar yalnızca google.maps.geometry kitaplığında bulunan özellikleri ifade eder. Bu kitaplık, Maps JavaScript API'yi yüklediğinizde varsayılan olarak yüklenmez. libraries önyükleme parametresi kullanılarak açıkça belirtilmesi gerekir. Daha fazla bilgi için Kitaplıklara Genel Bakış başlıklı makaleyi inceleyin.

Maps JavaScript API geometri kitaplığı, Dünya yüzeyindeki geometrik verilerin hesaplanması için yardımcı işlevler sağlar. Kitaplıkta üç ad alanı bulunur:

  • spherical enlem ve boylamlardan açı, mesafe ve alan hesaplamanıza olanak tanıyan küresel geometri yardımcı programları içerir.
  • encoding, Kodlanmış Çoklu Çizgi Algoritması'na göre çoklu çizgi yollarını kodlama ve kod çözme yardımcı programlarını içerir.
  • poly poligonlar ve çoklu çizgiler içeren hesaplamalar için yardımcı işlevler içerir.

google.maps.geometry kitaplığı herhangi bir sınıf içermez. Bunun yerine, yukarıdaki ad alanlarında statik yöntemler içerir.

Küresel Geometri Kavramları

Maps JavaScript API'deki resimler iki boyutlu ve "düzdür". Ancak Dünya üç boyutludur ve genellikle basık sferoit veya daha çok küre olarak kabul edilir. Maps API'de bir küre kullanırız ve Dünya'yı bilgisayar ekranınız gibi iki boyutlu düz bir yüzeyde temsil etmek için Maps API bir iz düşüm kullanır.

2D projeksiyonlarda görünüm bazen yanıltıcı olabilir. Harita projeksiyonu mutlaka bir miktar bozulma gerektirdiğinden, basit Öklid geometrisi genellikle geçerli değildir. Örneğin, bir küre üzerindeki iki nokta arasındaki en kısa mesafe düz bir çizgi değil, büyük bir dairedir (bir tür jeodezik). Bir kürenin yüzeyinde üçgen oluşturan açıların toplamı 180 dereceden fazladır.

Bu farklılıklar nedeniyle, bir küre (veya izdüşümü) üzerindeki geometrik işlevler; mesafe, yön ve alan gibi yapıları hesaplamak için küresel geometri kullanılmasını gerektirir. Bu küresel geometrik yapıları hesaplayan yardımcı programlar, Maps API'nin google.maps.geometry.spherical ad alanında yer alır. Bu ad alanı, küresel koordinatlardan (enlem ve boylamlar) skaler değerleri hesaplamak için statik yöntemler sağlar.

Mesafe ve Alan İşlevleri

İki nokta arasındaki mesafe, bu noktalar arasındaki en kısa yolun uzunluğudur. Bu en kısa yola jeodezik denir. Bir küre üzerinde tüm jeodezikler, büyük bir dairenin segmentleridir. Bu mesafeyi hesaplamak için computeDistanceBetween() yöntemini çağırın ve iki LatLng nesnesi iletin.

Birden fazla konumunuz varsa belirli bir yolun uzunluğunu hesaplamak için computeLength() kullanabilirsiniz.

Mesafe sonuçları metre cinsinden ifade edilir.

Çokgen bir alanın alanını (metrekare cinsinden) hesaplamak için kapalı bir döngü tanımlayan LatLng nesnelerinin dizisini ileterek computeArea() işlevini çağırın.

Bir küre üzerinde gezinirken yön, sabit bir referans noktasından (genellikle gerçek kuzey) bir yönün açısıdır. Google Maps API'de yön, gerçek kuzeyden itibaren derece cinsinden tanımlanır. Yönler, gerçek kuzeyden (0 derece) saat yönünde ölçülür. İki konum arasındaki bu yönü, iki from ve to LatLng nesnesi ileterek computeHeading() yöntemiyle hesaplayabilirsiniz.

Belirli bir yön, başlangıç konumu ve gidilecek mesafe (metre cinsinden) verildiğinde computeOffset() kullanarak hedef koordinatları hesaplayabilirsiniz.

İki LatLng nesnesi ve 0 ile 1 arasında bir değer verildiğinde, iki konum arasında küresel doğrusal interpolasyon gerçekleştiren interpolate() yöntemini kullanarak aralarındaki varış noktasını da hesaplayabilirsiniz. Değer, başlangıç noktasından varış noktasına giden yol boyunca kat edilecek kesirli mesafeyi gösterir.

Aşağıdaki örnekte, haritada iki noktayı tıkladığınızda iki çoklu çizgi (iki konumu birbirine bağlayan bir jeodezik ve bir "düz" çizgi) oluşturulur ve iki nokta arasında seyahat için yön hesaplanı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">

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;

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;
Örneği görüntüleyin

Kodlama Yöntemleri

Maps JavaScript API'deki yollar genellikle LatLng nesnelerinin Array olarak belirtilir. Ancak bu tür bir diziyi aktarmak genellikle zahmetlidir. Bunun yerine, belirli bir yolu sıkıştırmak için Google'ın çoklu çizgi kodlama algoritmasını kullanabilirsiniz. Bu yolu daha sonra kod çözme yoluyla açabilirsiniz.

geometry kitaplığı, çoklu çizgileri kodlamak ve kodlarını çözmek için yardımcı programlar içeren bir encoding ad alanı içerir.

Statik yöntem encodePath(), verilen yolu kodlar. LatLng dizisi veya MVCArray (Polyline.getPath() tarafından döndürülür) iletebilirsiniz.

Kodlanmış bir yolu çözmek için yönteme kodlanmış dizeyi ileterek decodePath() yöntemini çağırın.

Aşağıdaki örnekte Oxford, Mississippi'nin haritası gösterilmektedir. Haritayı tıkladığınızda çoklu çizgiye bir nokta eklenir. Çoklu çizgi oluşturulurken kodlaması 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;

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;
Örneği görüntüleyin

Poligon ve çoklu çizgi işlevleri

Geometri kitaplığının poly ad alanı, belirli bir noktanın bir poligonun veya dairenin içinde mi yoksa bir poligonun veya çoklu çizginin yakınında mı olduğunu belirleyen hizmet işlevleri içerir.

containsLocation()

containsLocation(point:LatLng|LatLngLiteral, polygon:Polygon|Circle|CircleLiteral)

Belirli bir noktanın bir poligon veya daire içinde olup olmadığını öğrenmek için noktayı ve google.maps.Polygon, google.maps.Circle ya da google.maps.CircleLiteral değerini google.maps.geometry.poly.containsLocation() işlevine iletin. Nokta, şeklin içinde veya kenarındaysa işlev true değerini döndürür.

Aşağıdaki kod, kullanıcının tıklaması tanımlanan üçgenin içine düşerse tarayıcı konsoluna "true", 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 Bermuda Şeytan Üçgeni'ne denk gelirse haritada mavi bir üçgen, aksi takdirde kırmızı bir daire çizer:

Örneği görüntüleyin

isLocationOnEdge()

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

Bir noktanın çoklu çizginin üzerinde veya yakınında ya da çokgenin kenarının üzerinde veya yakınında olup olmadığını belirlemek için noktayı, çoklu çizgiyi/çokgeni ve isteğe bağlı olarak derece cinsinden bir tolerans değerini google.maps.geometry.poly.isLocationOnEdge() yöntemine iletin. Nokta ile çizgi veya kenar üzerindeki en yakın nokta arasındaki mesafe belirtilen tolerans dahilindeyse işlev, doğru değerini döndürür. Varsayılan tolerans değeri 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);

Coğrafi sınır ve güvenli bölge yarıçapı kontrolleri

Canlı bir koordinatın (ör. araç, öğe veya kullanıcı konumu) haritadaki bir coğrafi sınırın ya da güvenli bölge sınırının içinde olup olmadığını kontrol etmek için harita şekillerini geometry kitaplığıyla birleştirin: