Geometri Kitaplığı

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

Genel Bakış

Bu belgedeki kavramlar yalnızca google.maps.geometry kitaplığındaki özelliklere atıfta bulunur. Bu kitaplık, Maps JavaScript API'yi yüklediğinizde varsayılan olarak yüklenmez ancak libraries önyükleme parametresi kullanılarak açıkça belirtilmelidir. Daha fazla bilgi için Kitaplıklara Genel Bakış başlıklı makaleyi inceleyin.

Maps JavaScript API geometri kitaplığı, Dünya'nın yüzeyindeki geometrik verilerin hesaplanmasına yönelik yardımcı program işlevleri sağlar. Kitaplık üç ad alanı içerir:

• spherical enlem ve boylamlardan açıları, mesafeleri ve alanları hesaplamanıza olanak tanıyan küresel geometri yardımcı programlarını içerir.
• encoding Şifrelenmiş Poli Çizgi Algoritması'na göre poli çizgi yollarını kodlama ve kodlarını çözme için yardımcı programlar içerir.
• poly poligonlar ve birden fazla çizgi 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üz"dür. Ancak Dünya üç boyutlu bir cisimdir ve genellikle basık küresel veya daha çok küre olarak yaklaşık olarak gösterilir. Maps API'de bir küre kullanırız. Maps API, Dünya'yı bilgisayar ekranınız gibi iki boyutlu düz bir yüzeyde temsil etmek için projeksiyon kullanır.

2D projeksiyonlarda görünümler bazen yanıltıcı olabilir. Harita projeksiyonunun bazı bozulmalar gerektirmesi nedeniyle basit Öklid geometrisi genellikle uygulanamaz. Örneğin, bir küre üzerindeki iki nokta arasındaki en kısa mesafe düz çizgi değil, büyük dairedir (bir tür jeodezik) ve kürenin yüzeyinde bir üçgeni oluşturan açıların toplamı 180 dereceden fazladır.

Bu farklılıklar nedeniyle, bir küredeki (veya projeksiyonundaki) geometrik işlevler, mesafe, yön ve alan gibi yapıları hesaplamak için Küresel Geometri'nin kullanılmasını gerektirir. Bu küresel geometrik yapıları hesaplamak için kullanılan yardımcı programlar, Haritalar API'sinin google.maps.geometry.spherical ad alanında bulunur. Bu ad alanı, küresel koordinatlardan (enlem ve boylamlar) skaler değerler 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. Kürede tüm jeodezikler büyük dairenin segmentleridir. Bu mesafeyi hesaplamak için computeDistanceBetween() işlevini çağırarak iki LatLng nesnesi iletin.

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

Mesafe sonuçları metre cinsinden ifade edilir.

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

Navigasyon İşlevleri

Bir kürede gezinirken yön, sabit bir referans noktasından (genellikle gerçek kuzey) bir yönün açısıdır. Google Haritalar 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. Bu başlığı, iki konum arasında computeHeading() yöntemiyle hesaplayabilirsiniz. Bunun için yönteme iki from ve to LatLng nesnesi göndermeniz gerekir.

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

İki LatLng nesnesi ve 0 ile 1 arasında bir değer verildiğinde, iki konum arasında küresel doğrusal enterpolasyon gerçekleştiren interpolate() yöntemini kullanarak aralarındaki bir hedefi de hesaplayabilirsiniz. Bu yöntemde değer, kaynaktan hedefe giden yol boyunca katedilecek kesirli mesafeyi belirtir.

Aşağıdaki örnekte, haritada iki nokta tıkladığınızda iki poli çizgi (iki konumu birbirine bağlayan bir jeodezik çizgi ve bir "doğru" ç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;
index.ts

Not: TypeScript ve Google Haritalar'ı kullanmayla ilgili kılavuzu okuyun.

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

Not: JavaScript, TypeScript snippet'inden derlenir.

Örneği görüntüleyin

Örneği Deneyin

JSFiddle.net Google Cloud Shell

Kodlama Yöntemleri

Maps JavaScript API'deki yollar genellikle LatLng nesnesi Array olarak belirtilir. Ancak bu tür bir diziyi aktarmak genellikle hantaldır. 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 sıkıştırabilirsiniz.

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

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

Kodlanmış bir yolun kodunu çözmek için yönteme kodlanmış dizeyi geçirerek decodePath()'u çağırın.

Aşağıdaki örnekte Mississippi, Oxford'un haritası gösterilmektedir. Haritayı tıkladığınızda poli çizgiye bir nokta eklenir. Poli ç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;
index.ts

Not: TypeScript ve Google Haritalar'ı kullanmayla ilgili kılavuzu okuyun.

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

Not: JavaScript, TypeScript snippet'inden derlenir.

Örneği görüntüleyin

Örneği Deneyin

JSFiddle.net Google Cloud Shell

Poligon ve çoklu çizgi işlevleri

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

containsLocation()

containsLocation(point:LatLng, polygon:Polygon)

Belirli bir noktanın bir poligonun içine düşüp düşmediğini bulmak için noktayı ve poligonu google.maps.geometry.poly.containsLocation() işlevine iletin. İşlevler, nokta poligon içinde veya kenarındaysa doğru 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" yazar, 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 düşerse 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 bir çok çizginin üzerinde veya yakınında ya da bir poligonun kenarının üzerinde veya yakınında olup olmadığını belirlemek için google.maps.geometry.poly.isLocationOnEdge() işlevine noktayı, çok çizgiyi/poligonu ve isteğe bağlı olarak derece cinsinden bir tolerans değerini iletin. Nokta ile çizgi veya kenardaki 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);