- खास जानकारी
- स्फ़ेरिकल ज्यामिति के सिद्धांत
- ज्यामिति को कोड में बदलने का तरीका
- पॉलीगॉन और पॉलीलाइन फ़ंक्शन
खास जानकारी
इस दस्तावेज़ में मौजूद कॉन्सेप्ट सिर्फ़ सुविधाओं के बारे में बताते हैं
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;अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
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;अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
सैंपल आज़माएं
एन्कोडिंग के तरीके
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;अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
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;अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
सैंपल आज़माएं
पॉलीगॉन और पॉलीलाइन फलन
ज्यामिति लाइब्रेरी के 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);