Geometry Library

  1. এক নজরে
  2. স্ফেরিক্যাল জিওমেট্রি কনসেপ্ট
    1. দূরত্ব ও এলাকা সংক্রান্ত ফাংশন
    2. নেভিগেশন ফাংশন
  3. জ্যামিতি এনকোডিং
  4. পলিগন ও পলিলাইন ফাংশন
    1. containsLocation()
    2. isLocationOnEdge()
    3. জিওফেন্স ও নিরাপদ-জোন ব্যাসার্ধ চেক

এক নজরে

এই ডকুমেন্টের মধ্যে থাকা ধারণাগুলি শুধুমাত্র google.maps.geometry লাইব্রেরির মধ্যে উপলভ্য ফিচারকে রেফার করে। আপনি Maps Javascript API লোড করার সময় এই লাইব্রেরি সাধারণত লোড হয় না তবে libraries বুটস্ট্র্যাপ প্যারামিটার ব্যবহার করে স্পষ্টভাবে উল্লেখ করতে হবে। আরও তথ্যের জন্য, লাইব্রেরি ওভারভিউ দেখুন।

Maps JavaScript API জিওমেট্রি লাইব্রেরি পৃথিবীর পৃষ্ঠে জিওমেট্রিক ডেটা গণনা করার জন্য ইউটিলিটি ফাংশন প্রদান করে। লাইব্রেরিতে তিনটি নেমস্পেস অন্তর্ভুক্ত:

  • spherical এতে স্ফেরিক্যাল জিওমেট্রি ইউটিলিটি আছে যা আপনাকে অক্ষাংশ এবং দ্রাঘিমাংশ থেকে কোণ, দূরত্ব এবং ক্ষেত্রফল গণনা করতে দেয়।
  • encoding -এ এনকোড করা পলিলাইন অ্যালগরিদম অনুযায়ী পলিলাইন পাথ এনকোড ও ডিকোড করার ইউটিলিটি আছে।
  • poly এতে বহুভুজ এবং পলিলাইন সংক্রান্ত গণনার জন্য ইউটিলিটি ফাংশন রয়েছে।

google.maps.geometry লাইব্রেরিতে কোনও ক্লাস নেই; এর পরিবর্তে, লাইব্রেরিতে উপরের নেমস্পেসে স্ট্যাটিক পদ্ধতি রয়েছে।

স্ফেরিক্যাল জিওমেট্রি কনসেপ্ট

Maps JavaScript API-এর মধ্যে থাকা ছবিগুলি দ্বিমাত্রিক এবং "ফ্ল্যাট।" তবে, পৃথিবী ত্রিমাত্রিক এবং প্রায়শই কমলাকৃতি স্ফেরয়েড বা গোলক হিসেবে ধরে নেওয়া হয়। Maps API-এর মধ্যে আমরা একটি স্ফিয়ার ব্যবহার করি এবং পৃথিবীকে দ্বিমাত্রিক সমতল পৃষ্ঠে — যেমন আপনার কম্পিউটার স্ক্রিনে — দেখানোর জন্য Maps API একটি প্রোজেকশন ব্যবহার করে।

2D প্রোজেকশনের মধ্যে, কখনও কখনও চেহারা বিভ্রান্তিকর হতে পারে। ম্যাপ প্রজেকশনের জন্য কিছু বিকৃতি প্রয়োজন হয়, তাই সাধারণ ইউক্লিডিয়ান জ্যামিতি প্রায়শই প্রযোজ্য হয় না। যেমন, কোনও গোলকের উপর দুটি বিন্দুর মধ্যে সবচেয়ে কম দূরত্ব কোনও সরলরেখা নয়, বরং একটি বৃহৎ বৃত্ত (এক ধরনের জিওডেসিক) এবং গোলকের পৃষ্ঠতলে কোনও ত্রিভুজের কোণগুলির সমষ্টি ১৮০ ডিগ্রির বেশি হয়।

এইসব পার্থক্যের কারণে, গোলকের (বা তার প্রজেকশনের) উপর জ্যামিতিক ফাংশন প্রয়োগ করে দূরত্ব, হেডিং ও ক্ষেত্রফলের মতো কনস্ট্রাক্ট গণনা করার জন্য স্ফেরিক্যাল জিওমেট্রি ব্যবহার করতে হয়। এইসব স্ফেরিক্যাল জিওমেট্রিক কনস্ট্রাক্ট গণনা করার ইউটিলিটি Maps API-এর google.maps.geometry.spherical নেমস্পেসে থাকে। এই নেমস্পেস স্ফেরিক্যাল কোঅর্ডিনেট (অক্ষাংশ ও দ্রাঘিমাংশ) থেকে স্কেলার ভ্যালু গণনা করার জন্য স্ট্যাটিক পদ্ধতি প্রদান করে।

দূরত্ব এবং এলাকা ফাংশন

দুটি বিন্দুর মধ্যে দূরত্ব হল তাদের মধ্যে সবচেয়ে ছোট পথের দৈর্ঘ্য। এই সবচেয়ে ছোট পথকে জিওডেসিক বলা হয়। একটি গোলকের উপর সমস্ত জিওডেসিক হল একটি বৃহৎ বৃত্তের অংশ। এই দূরত্ব গণনা করতে, computeDistanceBetween() কল করুন, এটি দুটি LatLng অবজেক্ট পাস করে।

আপনার কাছে একাধিক লোকেশন থাকলে, প্রদত্ত পথের দৈর্ঘ্য গণনা করতে আপনি এর পরিবর্তে computeLength() ব্যবহার করতে পারেন।

দূরত্ব সংক্রান্ত ফলাফল মিটারে দেখানো হয়।

বহুভুজাকার এলাকার ক্ষেত্রফল (বর্গ মিটারে) গণনা করতে, computeArea() কল করুন, LatLng অবজেক্টের অ্যারে পাস করে একটি ক্লোজড লুপ নির্ধারণ করুন।

কোনও গোলকের উপর নেভিগেট করার সময়, হেডিং হল একটি নির্দিষ্ট রেফারেন্স পয়েন্ট থেকে কোনও দিকের কোণ, সাধারণত প্রকৃত উত্তর দিক। Google Maps API-এর মধ্যে, প্রকৃত উত্তর থেকে ডিগ্রিতে একটি হেডিং সংজ্ঞায়িত করা হয়, যেখানে হেডিংগুলি প্রকৃত উত্তর (0 ডিগ্রি) থেকে ঘড়ির কাঁটার দিকে পরিমাপ করা হয়। আপনি computeHeading() পদ্ধতি ব্যবহার করে দুটি লোকেশনের মধ্যে এই হেডিং গণনা করতে পারেন, এতে দুটি from এবং to LatLng অবজেক্ট পাস করতে হবে।

নির্দিষ্ট হেডিং, শুরুর লোকেশন এবং ভ্রমণের দূরত্ব (মিটারে) দেওয়া থাকলে, আপনি computeOffset() ব্যবহার করে গন্তব্যের কোঅর্ডিনেট গণনা করতে পারবেন।

দুটি LatLng অবজেক্ট এবং ০ থেকে ১-এর মধ্যে মান দেওয়া থাকলে, আপনি 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;
উদাহরণ দেখুন

এনকোডিং পদ্ধতি

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;

জাভাস্ক্রিপ্ট

// 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|LatLngLiteral, polygon:Polygon|Circle|CircleLiteral)

প্রদত্ত কোনও পয়েন্ট পলিগন বা সার্কেলের মধ্যে পড়ে কিনা তা জানতে, পয়েন্ট এবং google.maps.Polygon, google.maps.Circle, অথবা google.maps.CircleLiteral পাস করুন google.maps.geometry.poly.containsLocation()-এ। পয়েন্টটি আকারের মধ্যে বা তার প্রান্তে থাকলে ফাংশনটি true রিটার্ন করে।

ব্যবহারকারীর ক্লিক নির্দিষ্ট ত্রিভুজের মধ্যে হলে, নিম্নলিখিত কোড ব্রাউজার কনসোলে 'true' লেখে; অন্যথায়, এটি 'false' লেখে।

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()-এ পাস করুন। বিন্দু এবং রেখা বা প্রান্তের সবচেয়ে কাছের বিন্দুর মধ্যে দূরত্ব নির্দিষ্ট সহনশীলতার মধ্যে থাকলে, ফাংশনটি সত্য রিটার্ন করে। ডিফল্ট টলারেন্স ভ্যালু হল ১০-৯ ডিগ্রি।

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

জিওফেন্স ও নিরাপদ-জোন ব্যাসার্ধ চেক

কোনও লাইভ কোঅর্ডিনেট (যেমন, কোনও গাড়ি, অ্যাসেট বা ব্যবহারকারীর লোকেশন) ম্যাপে জিওফেন্স বা নিরাপদ-জোন পেরিমিটারের মধ্যে আছে কিনা তা চেক করতে, ম্যাপের আকার geometry লাইব্রেরির সাথে একত্রিত করুন: