ज्यामिती लाइब्रेरी

  1. खास जानकारी
  2. स्फ़ेरिकल ज्यामिति के सिद्धांत
    1. दूरी और इलाके के फ़ंक्शन
    2. नेविगेशन फ़ंक्शन
  3. ज्यामिति को कोड में बदलने का तरीका
  4. पॉलीगॉन और पॉलीलाइन फ़ंक्शन
    1. containsLocation()
    2. isLocationOnEdge()

खास जानकारी

इस दस्तावेज़ में मौजूद कॉन्सेप्ट सिर्फ़ सुविधाओं के बारे में बताते हैं google.maps.geometry लाइब्रेरी में उपलब्ध है. यह Maps JavaScript API को लोड करने पर, लाइब्रेरी डिफ़ॉल्ट रूप से लोड नहीं होती है लेकिन इसे libraries का इस्तेमाल करके साफ़ तौर पर बताया जाना चाहिए बूटस्ट्रैप पैरामीटर. ज़्यादा जानकारी के लिए, देखें लाइब्रेरी की खास जानकारी.

Maps JavaScript API की ज्यामिति लाइब्रेरी से आपको कई सुविधाएं मिलती हैं की सतह पर ज्यामितीय डेटा की गणना के लिए फ़ंक्शन Earth. लाइब्रेरी में तीन नेमस्पेस होते हैं:

  • spherical अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है इसमें गोलाकार ज्यामिति सुविधाएं हैं, जिनसे आप कोणों का पता लगा सकते हैं, अक्षांश और देशांतर से दूरी और इलाके.
  • encoding अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है में, इसके अनुसार पॉलीलाइन पाथ को कोड में बदलने और डिकोड करने की सुविधाएं मौजूद हैं कोड में बदला गया पॉलीलाइन एल्गोरिदम.
  • poly अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है बहुभुजों और पॉलीलाइन.

google.maps.geometry लाइब्रेरी में कोई भी कॉन्टेंट मौजूद नहीं है क्लास; के बजाय, लाइब्रेरी में ऊपर दिए गए नेमस्पेस.

स्फ़ेरिकल ज्यामिति कॉन्सेप्ट

Maps JavaScript API में मौजूद इमेज दो डाइमेंशन में होती हैं और "फ़्लैट" होने चाहिए. हालाँकि, पृथ्वी त्रि-आयामी है और अक्सर इसका अनुमान ऑब्लेट स्फ़ेरोइड स्फ़ीयर के रूप में या ज़्यादा. Maps API के अंदर हम एक स्फ़ीयर का इस्तेमाल करते हैं, और पृथ्वी का प्रतिनिधित्व 2-आयामी सपाट सतह पर करते हैं — जैसे आपके कंप्यूटर की स्क्रीन — Maps API डिफ़ॉल्ट रूप से प्रोजेक्शन.

2D प्रोजेक्शन के दौरान, कभी-कभी गेम में आपको धोखा हो सकता है. क्योंकि मैप प्रोजेक्शन के लिए आवश्यक रूप से कुछ विरूपण, सरल यूक्लिडियन ज्यामिति अक्सर लागू नहीं होती. उदाहरण के लिए, सबसे कम दूरी गोले पर दो बिंदुओं के बीच एक सीधी रेखा नहीं, बल्कि एक महान वृत्त होता है (एक तरह का जियोडेसिक) और वे कोण जिनसे सतह पर त्रिभुज बनता है का योग 180 डिग्री से ज़्यादा है.

इन अंतरों के कारण, किसी गोले पर (या उसके प्रोजेक्शन) स्फ़ेरिकल ज्यामिति दूरी, हेडिंग, और एरिया के तौर पर इस तरह के कंस्ट्रक्ट का हिसाब लगाने के लिए. के लिए उपयोगिता इन गोलाकार ज्यामितीय निर्माणों की गणना मैप में मौजूद है एपीआई का google.maps.geometry.spherical नेमस्पेस. यह नेमस्पेस गोलाकार निर्देशांकों से अदिश मानों की गणना करने के लिए स्थिर विधियां उपलब्ध कराता है (अक्षांश और देशांतर).

दूरी और एरिया फ़ंक्शन

दो बिंदुओं के बीच की दूरी, इनके बीच सबसे छोटे पथ की लंबाई है उन्हें. इस सबसे छोटे रास्ते को जियोडेसिक कहते हैं. किसी गोले पर सभी जियोडेसिक होते हैं सेगमेंट के बारे में. इस दूरी की गणना करने के लिए, कॉल करें computeDistanceBetween() ने, दो LatLng पास कर दिए हैं ऑब्जेक्ट हैं.

इसके बजाय आप का उपयोग कर सकते हैं लंबाई का हिसाब लगाने के लिए computeLength() का इस्तेमाल करें.

दूरी के नतीजे मीटर में दिखाए जाते हैं.

बहुभुजीय क्षेत्र के क्षेत्रफल (वर्ग मीटर में) की गणना करने के लिए, कॉल करें computeArea(), LatLng ऑब्जेक्ट का अरे पास किया जा रहा है क्लोज़्ड लूप को तय करें.

गोले पर नेविगेट करते समय, शीर्षक दिशा का कोण होता है एक निश्चित संदर्भ बिंदु से, जो आमतौर पर उत्तर में होता है. Google Maps API में, हेडिंग को सही उत्तर से डिग्री में परिभाषित किया जाता है, जहां हेडिंग मापी जाती हैं सही उत्तर से घड़ी की दिशा में (0 डिग्री). आप इस शीर्षक का आकलन इनके बीच कर सकते हैं दो स्थानों पर computeHeading() तरीका, इसे दो पास किया जा रहा है from और to LatLng ऑब्जेक्ट.

दिया गया कोई विशेष शीर्षक, एक मूल स्थान, और (मीटर में), मंज़िल के निर्देशांकों को ज्ञात कर सकते हैं computeOffset().

दो LatLng ऑब्जेक्ट और 0 और 1 के बीच की वैल्यू दिए जाने पर, इनके बीच गंतव्य की गणना करने के लिए इसका इस्तेमाल करें: interpolate() तरीका, जो गोलाकार लीनियर परफ़ॉर्म करता है दो जगहों के बीच इंटरपोलेशन, जहां वैल्यू से पता चलता है कि मूल स्थान से लेकर पथ में तय की गई दूरी (फ़्रैक्शनल दूरी) आपकी मंज़िल.

इस उदाहरण में, दो पॉइंट पर क्लिक करने से दो पॉलीलाइन बनती हैं मैप पर — एक जियोडेसिक और एक "सीधी" CANNOT TRANSLATE जगहें — और इसके बीच की यात्रा के लिए शीर्षक की गणना करता है दो पॉइंट:

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
अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
उदाहरण देखें

सैंपल आज़माएं

एन्कोडिंग के तरीके

Maps JavaScript API में पाथ अक्सर LatLng में से Array ऑब्जेक्ट. हालांकि, किसी जगह पर ऐसी कलेक्शन अक्सर भारी होती है. इसके बजाय, आप Google की पॉलीलाइन एन्कोडिंग एल्गोरिदम का इस्तेमाल करके दिए गए पाथ को कंप्रेस किया जा सकता है. बाद में ऐसा किया जा सकता है डीकोड करने की सुविधा इस्तेमाल करता है.

geometry लाइब्रेरी में encoding है सुविधा के लिए नेमस्पेस का इस्तेमाल करें, ताकि पॉलीलाइन को कोड में बदला जा सके.

स्टैटिक तरीके encodePath() का इस्तेमाल करके, दिए गए पाथ को कोड में बदला जाता है. आप या तो LatLng की श्रेणी या MVCArray (जिसे वापस करने वाला उपयोगकर्ता मिला है: Polyline.getPath()).

कोड में बदले गए पाथ को डिकोड करने के लिए, decodePath() को कॉल करें कोड में बदली गई स्ट्रिंग की प्रक्रिया पास करना.

नीचे दिए गए उदाहरण में ऑक्सफ़र्ड, मिसिसिपी का मैप दिखाया गया है. मैप पर क्लिक करने से, पॉलीलाइन पर एक पॉइंट जुड़ जाता है. जैसा कि पॉलीलाइन है बनाई गई है, तो इसकी एन्कोडिंग नीचे दिखाई देती है.

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
अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
उदाहरण देखें

सैंपल आज़माएं

पॉलीगॉन और पॉलीलाइन फलन

ज्यामिति लाइब्रेरी के poly नेमस्पेस में यूटिलिटी फ़ंक्शन हैं जो यह तय करता है कि कोई दिया गया बिंदु पॉलीगॉन के अंदर है या उसके पास है या पॉलीलाइन.

containsLocation()

containsLocation(point:LatLng, polygon:Polygon)

यह पता लगाने के लिए कि कोई बिंदु बहुभुज में है या नहीं, बिंदु को पास करें और पॉलीगॉन को google.maps.geometry.poly.containsLocation() पर सेट करें. कॉन्टेंट बनाने अगर पॉइंट पॉलीगॉन के अंदर या उसके किनारे पर है, तो फ़ंक्शन 'सही' दिखाता है.

यह कोड 'सही' लिखता है यदि उपयोगकर्ता क्लिक करता है, तो ब्राउज़र कंसोल तय त्रिभुज के अंदर आता है; नहीं तो, यह 'गलत' लिखता है. 

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

अगर क्लिक कम होता है, तो इस कोड का दूसरा वर्शन मैप पर एक नीला त्रिभुज बनाता है हो सकता है कि एक लाल रंग का गोला दिखाया गया हो. अगर ऐसा नहीं है, तो:

उदाहरण देखें

isLocationOnEdge()

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

यह पता लगाने के लिए कि कोई पॉइंट पॉलीलाइन पर या उसके पास है या पॉलीलाइन पर या उसके पास है बहुभुज के किनारे, बिंदु को पास करें, बहुभुज/पॉलीगॉन, और वैकल्पिक रूप से सहनशीलता मान डिग्री में से google.maps.geometry.poly.isLocationOnEdge(). फ़ंक्शन 'सही' देता है अगर लाइन या किनारे, तय की गई छूट के दायरे में आते हैं. डिफ़ॉल्ट सहनशीलता वैल्यू 10-9 डिग्री है.

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