खास जानकारी
इस दस्तावेज़ में दिए गए सिद्धांत, सिर्फ़ google.maps.geometry लाइब्रेरी में उपलब्ध सुविधाओं के बारे में बताते हैं. Maps JavaScript API लोड करने पर, यह लाइब्रेरी डिफ़ॉल्ट रूप से लोड नहीं होती.
हालांकि, libraries
बूटस्ट्रैप पैरामीटर का इस्तेमाल करके इसकी जानकारी साफ़ तौर पर दी जानी चाहिए. ज़्यादा जानकारी के लिए, लाइब्रेरी की खास जानकारी देखें.
Maps JavaScript API की ज्यामिति लाइब्रेरी, पृथ्वी की सतह पर ज्यामितीय डेटा की गणना के लिए यूटिलिटी फ़ंक्शन उपलब्ध कराती है. लाइब्रेरी में तीन नेमस्पेस होते हैं:
sphericalमें गोल आकार में ज्यामिति की सुविधा मौजूद है. इसकी मदद से अक्षांश और देशांतर के कोण, दूरी, और क्षेत्रों की गणना की जा सकती है.encodingमें, कोड में बदलने के तरीके वाले पॉलीलाइन एल्गोरिदम के हिसाब से पॉलीलाइन पाथ को कोड में बदलने और डिकोड करने की सुविधाएं शामिल होती हैं.polyमें पॉलीगॉन और पॉलीलाइन से जुड़ी गणना करने के लिए यूटिलिटी फ़ंक्शन मौजूद हैं.
google.maps.geometry लाइब्रेरी में कोई क्लास नहीं है. इसके बजाय, लाइब्रेरी में ऊपर दिए गए नेमस्पेस के स्टैटिक तरीके शामिल हैं.
गोलीय ज्यामिति के सिद्धांत
Maps JavaScript API में मौजूद इमेज, दो-डाइमेंशन वाली और "फ़्लैट" होती हैं. हालाँकि, पृथ्वी त्रि-आयामी है. आम तौर पर, इसका अनुमान अधूरा गोला या गोले के तौर पर ज़्यादा होता है. Maps API में, हम गोल आकार का इस्तेमाल करते हैं. साथ ही, पृथ्वी को दो-डाइमेंशन वाले सपाट प्लैटफ़ॉर्म, जैसे कि आपके कंप्यूटर की स्क्रीन पर दिखाने के लिए, Maps API अनुमान का इस्तेमाल करता है.
2D प्रोजेक्शन में, कभी-कभी चीज़ें आपको गुमराह कर सकती हैं. सरल यूक्लिडियन ज्यामिति अक्सर लागू नहीं होती, क्योंकि नक़्शा प्रोजेक्शन में कुछ हद तक डिस्टॉर्शन की ज़रूरत होती है. उदाहरण के लिए, किसी गोले पर दो बिंदुओं के बीच सबसे छोटी दूरी सीधी लाइन नहीं होती है, बल्कि एक बड़ा वृत्त (एक तरह का जियोडिसिक) होता है और किसी गोले की सतह पर त्रिभुज बनाने वाले कोणों का कुल योग 180 डिग्री होता है.
इन अंतरों की वजह से, दूरी, शीर्षक, और क्षेत्रफल जैसे निर्माणों की गणना करने के लिए, किसी गोले पर (या उसके अनुमान लगाने पर) ज्यामितीय फलनों को स्फ़ेरिकल जियोमेट्री का इस्तेमाल करना ज़रूरी होता है. इन गोलाकार ज्यामितीय निर्माणों का
कैलकुलेशन करने की उपयोगिताएं, Maps API के google.maps.geometry.spherical नेमस्पेस में शामिल होती हैं. यह नेमस्पेस
स्फ़ेरिकल निर्देशांक (अक्षांश और देशांतर) से अदिश वैल्यू की गणना करने के लिए स्टैटिक तरीके देता है.
दूरी और इलाके के फ़ंक्शन
दो बिंदुओं के बीच की दूरी उनके बीच में सबसे छोटे पथ की लंबाई है. इस सबसे छोटे रास्ते को जियोडेसिक कहा जाता है. गोले पर, सभी जियोडीज़िक्स
बड़े वृत्त के सेगमेंट होते हैं. इस दूरी का हिसाब लगाने के लिए,
computeDistanceBetween() को कॉल करें और इसे दो LatLng
ऑब्जेक्ट पास करें.
इसके बजाय, अगर पाथ कई जगहों पर है, तो
computeLength() का इस्तेमाल करके, दिए गए पाथ की लंबाई का हिसाब लगाया जा सकता है.
दूरी के नतीजे मीटर में दिखाए जाते हैं.
किसी पॉलीगॉन एरिया का क्षेत्रफल (वर्ग मीटर में) निकालने के लिए, computeArea() को कॉल करें. यह LatLng ऑब्जेक्ट के अरे को पास करेगा, जो बंद लूप को तय करता है.
नेविगेशन के फ़ंक्शन
गोले पर नेविगेट करते समय, शीर्षक एक निश्चित संदर्भ बिंदु से, आम तौर पर उत्तर दिशा में आने वाली दिशा का कोण होता है. Google Maps API में,
एक शीर्षक सही उत्तर से डिग्री में तय किया जाता है, जहां हेडिंग को सही उत्तर से घड़ी की सुई की दिशा में (0 डिग्री) मापा जाता है. computeHeading() तरीके का इस्तेमाल करके, दो जगहों के बीच इस हेडिंग का हिसाब लगाया जा सकता है. इसमें दो from और to LatLng ऑब्जेक्ट पास किए जाएंगे.
किसी खास शीर्षक, यात्रा शुरू करने की जगह, और यात्रा की दूरी (मीटर में) दिए जाने पर, computeOffset() का इस्तेमाल करके मंज़िल के निर्देशांक कैलकुलेट किए जा सकते हैं.
दो LatLng ऑब्जेक्ट और 0 और 1 के बीच की वैल्यू दिए जाने पर, interpolate() तरीके का इस्तेमाल करके, उनके बीच के डेस्टिनेशन की गणना भी की जा सकती है. यह तरीका दो जगहों के बीच गोलाकार लीनियर इंटरपोलेशन करता है. यहां वैल्यू, मूल से मंज़िल तक के पाथ में चलने वाली फ़्रैक्शनल दूरी के बारे में बताती है.
नीचे दिए गए उदाहरण में, मैप पर दो पॉइंट पर क्लिक करने से दो पॉलीलाइन बनती हैं — एक जियोडेसिक और दूसरी "सीधी" लाइन, जो दो जगहों को जोड़ती है. साथ ही, दो पॉइंट के बीच यात्रा करने के लिए हेडिंग की गणना करता है:
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);