نمای کلی
مفاهیم موجود در این سند به ویژگی هایی اشاره دارد که فقط در کتابخانه google.maps.geometry
موجود است. وقتی Maps Javascript API را بارگیری میکنید، این کتابخانه بهطور پیشفرض بارگیری نمیشود، اما باید به صراحت از طریق استفاده از پارامتر راهانداز libraries
مشخص شود. برای اطلاعات بیشتر، به نمای کلی کتابخانه ها مراجعه کنید.
کتابخانه هندسی Maps JavaScript API توابع کاربردی را برای محاسبه داده های هندسی روی سطح زمین فراهم می کند. این کتابخانه شامل سه فضای نام است:
-
spherical
شامل ابزارهای هندسی کروی است که به شما امکان می دهد زوایا، فواصل و مساحت ها را از طول و عرض جغرافیایی محاسبه کنید. -
encoding
شامل ابزارهایی برای رمزگذاری و رمزگشایی مسیرهای چند خطی طبق الگوریتم چند خط رمزگذاری شده است . -
poly
شامل توابع کاربردی برای محاسبات مربوط به چند ضلعی و چند خطی است.
کتابخانه google.maps.geometry
هیچ کلاسی ندارد. در عوض، کتابخانه حاوی متدهای ثابت در فضای نام فوق است.
مفاهیم هندسه کروی
تصاویر موجود در Maps JavaScript API دو بعدی و "مسطح" هستند. زمین، با این حال، سه بعدی است، و اغلب به عنوان یک کروی مایل یا بیشتر به عنوان یک کره تقریبی است. در Maps API ما از یک کره استفاده میکنیم، و برای نشان دادن زمین روی یک سطح صاف دوبعدی - مانند صفحه نمایش کامپیوتر شما - Maps API از یک طرح ریزی استفاده میکند.
در پیشبینیهای دوبعدی، ظاهر گاهی اوقات میتواند فریبنده باشد. از آنجا که طرح نقشه لزوماً به مقداری اعوجاج نیاز دارد، هندسه اقلیدسی ساده اغلب قابل اجرا نیست. به عنوان مثال، کوتاه ترین فاصله بین دو نقطه روی یک کره یک خط مستقیم نیست، بلکه یک دایره بزرگ (نوعی ژئودزیک) است و مجموع زوایایی که یک مثلث روی سطح یک کره را تشکیل می دهند بیش از 180 درجه است. .
به دلیل این تفاوت ها، توابع هندسی بر روی یک کره (یا بر روی برجستگی آن) استفاده از هندسه کروی را برای محاسبه سازه هایی مانند فاصله، عنوان و مساحت ضروری می کند. ابزارهای کاربردی برای محاسبه این ساختارهای هندسی کروی در فضای نام google.maps.geometry.spherical
Maps API موجود است. این فضای نام روش های ثابتی را برای محاسبه مقادیر اسکالر از مختصات کروی (طول و عرض جغرافیایی) فراهم می کند.
توابع فاصله و مساحت
فاصله بین دو نقطه طول کوتاه ترین مسیر بین آنهاست. این کوتاه ترین مسیر را ژئودزیک می نامند. در یک کره، تمام ژئودزیک ها بخش هایی از یک دایره بزرگ هستند. برای محاسبه این فاصله، 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;
جاوا اسکریپت
// 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;
Sample را امتحان کنید
روش های رمزگذاری
مسیرهای درون Maps JavaScript API اغلب به عنوان Array
از اشیاء LatLng
مشخص می شوند. با این حال، عبور از اطراف چنین آرایه ای اغلب حجیم است. در عوض میتوانید از الگوریتم کدگذاری چند خطی گوگل برای فشردهسازی یک مسیر معین استفاده کنید، که بعداً میتوانید از طریق رمزگشایی آن را از حالت فشرده خارج کنید.
کتابخانه geometry
شامل یک فضای نام encoding
برای ابزارهای کاربردی برای رمزگذاری و رمزگشایی چند خطوط است.
متد استاتیک encodePath()
مسیر داده شده را رمزگذاری می کند. میتوانید آرایهای از LatLng
s یا 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;
جاوا اسکریپت
// 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;
Sample را امتحان کنید
توابع چند ضلعی و چند خطی
فضای نام poly
کتابخانه هندسه شامل توابع کاربردی است که تعیین می کند آیا یک نقطه مشخص در داخل یا نزدیک یک چند ضلعی یا چند خطی قرار دارد.
containLocation()
containsLocation(point:LatLng, polygon:Polygon)
برای پیدا کردن اینکه آیا یک نقطه داده شده در یک چند ضلعی قرار می گیرد یا خیر، نقطه و چند ضلعی را به google.maps.geometry.poly.containsLocation()
ارسال کنید. اگر نقطه در چند ضلعی یا روی لبه آن باشد، توابع true برمی گرداند.
اگر کلیک کاربر در داخل مثلث تعریف شده قرار گیرد، کد زیر به کنسول مرورگر "true" می نویسد. در غیر این صورت، "نادرست" می نویسد.
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()
ارسال کنید. . اگر فاصله بین نقطه و نزدیکترین نقطه در خط یا لبه در محدوده تلورانس مشخص شده باشد، تابع true برمی گرداند. مقدار تلرانس پیش فرض 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);