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 google.maps.geometry kitaplığında bulunan özelliklerle ilgilidir. Bu kitaplık, Maps JavaScript API'yi yüklediğinizde varsayılan olarak yüklenmez, ancak bir libraries bootstrap parametresi kullanarak açıkça belirtilmelidir. Daha fazla bilgi için Kitaplıklara Genel Bakış bölümüne bakın.

Maps JavaScript API geometri kitaplığı, dünya yüzeyindeki geometrik verilerin hesaplanması için yardımcı fonksiyonlar sunar. Kitaplıkta üç ad alanı bulunur:

  • spherical, enlem ve boylam değerlerinden açıları, mesafeleri, alanları 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 kodunu çözme konusunda yardımcı programlar içerir.
  • poly, çokgenler 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, kitaplık 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 üç boyutludur ve genellikle ya dikdörtgen şeklinde bir küre şeklinde ya da bir küre olarak daha yakın görünür. 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 göstermek için Maps API bir projeksiyon kullanır.

2D projeksiyonlarda, görünümler bazen aldatıcı olabilir. Harita projeksiyonu her zaman 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 çember (bir tür jeodezik) ve bir kürenin yüzeyinde bir üçgeni oluşturan açıların toplamı 180 dereceden fazladır.

Bu farklılıklar nedeniyle, bir küre üzerindeki (veya projeksiyonundaki) geometrik fonksiyonlar; 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ı hesaplamaya yönelik yardımcı programlar, Maps API'nin google.maps.geometry.spherical ad alanında yer alır. Bu ad alanı, küresel koordinatlardan (enlem ve boylam) skaler değerlerin hesaplanması 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üre üzerinde yer alan tüm jeodezikler büyük bir dairenin parçalarıdır. Bu mesafeyi hesaplamak için iki LatLng nesne ileterek computeDistanceBetween() yöntemini çağırın.

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

Mesafe sonuçları metre cinsinden ifade edilir.

Bir poligonal alanın alanını (metrekare cinsinden) hesaplamak için kapalı döngüyü tanımlayan LatLng nesne dizisini geçirerek computeArea() yöntemini çağırın.

Küre üzerinde gezinirken yön, genellikle gerçek kuzey olan sabit bir referans noktasından gelen yönün açısıdır. Google Maps API'de bir yön, gerçek kuzeyden derece olarak tanımlanır ve yönler gerçek kuzeyden saat yönünde (0 derece) ölçülür. Bu başlığı, computeHeading() yöntemini kullanarak iki konum arasında hesaplayabilir ve iki from ve to LatLng nesnesi iletebilirsiniz.

Belirli bir yön, başlangıç konumu ve seyahat edilecek mesafe (metre cinsinden) göz önüne alındığında, hedef koordinatlarını computeOffset() kullanarak hesaplayabilirsiniz.

İki LatLng nesnesi ve 0 ile 1 arasında bir değer dikkate alındığında, interpolate() yöntemini kullanarak ikisi arasındaki hedefi de hesaplayabilirsiniz. Bu yöntem, iki konum arasında küresel doğrusal interpolasyon gerçekleştirir. Burada değer, başlangıç noktasından hedefe giden yol boyunca gidilecek kesirli mesafeyi gösterir.

Aşağıdaki örnekte, haritadaki iki noktayı (biri jeodezik, diğeri iki konumu birbirine bağlayan "düz" bir çizgi) tıkladığınızda iki çoklu çizgi oluşturulur ve iki nokta arasında seyahatin başlığı 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

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 LatLng nesneden Array olarak belirtilir. Ancak böyle bir diziyi aktarmak genellikle büyük hacimlidir. Bunun yerine, belirli bir yolu sıkıştırmak için Google'ın çoklu çizgi kodlama algoritmasını kullanabilirsiniz. Daha sonra kodu çözerek bu yöntemi açabilirsiniz.

geometry kitaplığı, yardımcı programların çoklu çizgileri kodlayıp kodunu çözmesi için bir encoding ad alanı içerir.

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

Kodlanmış bir yolun kodunu çözmek için yöntemi, kodlanmış dizeyi ileten decodePath() çağrısı yapın.

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

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ı, belirli bir noktanın bir poligon veya çoklu çizginin içinde mi yoksa yanında mı olduğunu belirleyen yardımcı işlevler içerir.

containsLocation()

containsLocation(point:LatLng, polygon:Polygon)

Belirli bir noktanın bir poligon içinde yer alıp almadığını öğrenmek için noktayı ve poligonu google.maps.geometry.poly.containsLocation() öğesine geçirin. Nokta poligonun içinde veya kenarındaysa işlevler doğru değerini döndürür.

Aşağıdaki kod, kullanıcının tıklaması tanımlanan üçgenin içindeyse tarayıcı konsoluna "true" (doğru) yazar, aksi takdirde "false" (yanlış) 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);

Tıklama Bermuda Üçgeni'ne denk geliyorsa haritada mavi bir üçgen, aksi takdirde kırmızı bir daire çizer:

Ö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 poligonun kenarında veya kenarında mı düştüğünü belirlemek için noktayı, çoklu çizgiyi/poligonu ve isteğe bağlı olarak derece cinsinden bir tolerans değerini google.maps.geometry.poly.isLocationOnEdge() öğesine aktarın. 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);