নতুন মানচিত্র স্টাইলিং শীঘ্রই Google Maps প্ল্যাটফর্মে আসছে৷ মানচিত্র স্টাইলিংয়ের এই আপডেটে একটি নতুন ডিফল্ট রঙ প্যালেট এবং মানচিত্রের অভিজ্ঞতা এবং ব্যবহারযোগ্যতার উন্নতি অন্তর্ভুক্ত রয়েছে। সমস্ত মানচিত্রের শৈলী মার্চ 2025-এ স্বয়ংক্রিয়ভাবে আপডেট হবে। প্রাপ্যতা এবং আগে কীভাবে নির্বাচন করবেন সে সম্পর্কে আরও তথ্যের জন্য, Google Maps প্ল্যাটফর্মের জন্য নতুন মানচিত্রের শৈলী দেখুন।

এই পৃষ্ঠাটি Cloud Translation API অনুবাদ করেছে।

জ্যামিতি লাইব্রেরি

ওভারভিউ
গোলাকার জ্যামিতি ধারণা
1. দূরত্ব এবং এলাকা ফাংশন
2. নেভিগেশন ফাংশন
জ্যামিতি এনকোডিং
বহুভুজ এবং পলিলাইন ফাংশন
1. রয়েছে অবস্থান()
2. isLocationOnEdge()

ওভারভিউ

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

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

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

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

গোলাকার জ্যামিতি ধারণা

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

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

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

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

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

আপনি পরিবর্তে একটি প্রদত্ত পথের দৈর্ঘ্য গণনা করতে computeLength() ব্যবহার করতে পারেন যদি আপনার একাধিক অবস্থান থাকে।

দূরত্বের ফলাফল মিটারে প্রকাশ করা হয়।

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

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

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

দুটি LatLng বস্তু এবং 0 এবং 1 এর মধ্যে মান দেওয়া হলে, আপনি interpolate() পদ্ধতি ব্যবহার করে তাদের মধ্যে একটি গন্তব্য গণনা করতে পারেন, যা দুটি অবস্থানের মধ্যে গোলাকার রৈখিক ইন্টারপোলেশন সঞ্চালন করে, যেখানে মানটি থেকে পথ বরাবর ভ্রমণের ভগ্নাংশের দূরত্ব নির্দেশ করে গন্তব্যে উৎপত্তি।

নিম্নলিখিত উদাহরণটি দুটি পলিলাইন তৈরি করে যখন আপনি মানচিত্রে দুটি বিন্দুতে ক্লিক করেন — একটি জিওডেসিক এবং একটি "সরল" লাইন দুটি অবস্থানকে সংযুক্ত করে — এবং দুটি বিন্দুর মধ্যে ভ্রমণের জন্য শিরোনাম গণনা করে:

টাইপস্ক্রিপ্ট

// 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

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

// 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

উদাহরণ দেখুন

নমুনা চেষ্টা করুন

JSFiddle.net গুগল ক্লাউড শেল

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

Maps JavaScript API-এর মধ্যে পাথগুলি প্রায়ই LatLng অবজেক্টের Array হিসাবে নির্দিষ্ট করা হয়। যাইহোক, এই ধরনের একটি অ্যারের কাছাকাছি পাস প্রায়ই ভারী হয়. আপনি পরিবর্তে Google এর পলিলাইন এনকোডিং অ্যালগরিদম ব্যবহার করতে পারেন একটি প্রদত্ত পথ সংকুচিত করতে, যা আপনি পরে ডিকোডিংয়ের মাধ্যমে ডিকম্প্রেস করতে পারেন।

geometry লাইব্রেরিতে পলিলাইনগুলিকে এনকোড এবং ডিকোড করার জন্য ইউটিলিটিগুলির জন্য একটি encoding নামস্থান রয়েছে৷

স্ট্যাটিক পদ্ধতি encodePath() প্রদত্ত পথকে এনকোড করে। আপনি LatLng s এর একটি অ্যারে বা একটি MVCArray পাস করতে পারেন (যা Polyline.getPath() দ্বারা ফেরত দেওয়া হয়)৷

একটি এনকোড করা পাথ ডিকোড করতে, এনকোড করা স্ট্রিং পদ্ধতিটি পাস করে decodePath() কল করুন।

নিম্নলিখিত উদাহরণটি অক্সফোর্ড, মিসিসিপির একটি মানচিত্র প্রদর্শন করে। মানচিত্রে ক্লিক করা একটি পলিলাইনে একটি বিন্দু যোগ করে। পলিলাইনটি তৈরি হওয়ার সাথে সাথে এর এনকোডিং নীচে প্রদর্শিত হয়।

টাইপস্ক্রিপ্ট

// 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

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

// 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

উদাহরণ দেখুন

নমুনা চেষ্টা করুন

JSFiddle.net গুগল ক্লাউড শেল

বহুভুজ এবং পলিলাইন ফাংশন

জ্যামিতি লাইব্রেরির poly নেমস্পেসে ইউটিলিটি ফাংশন রয়েছে যা নির্ধারণ করে যে প্রদত্ত বিন্দুটি বহুভুজ বা পলিলাইনের ভিতরে বা কাছাকাছি।

রয়েছে অবস্থান()

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

জ্যামিতি লাইব্রেরি

ওভারভিউ

গোলাকার জ্যামিতি ধারণা

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

নেভিগেশন ফাংশন

টাইপস্ক্রিপ্ট

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

নমুনা চেষ্টা করুন

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

টাইপস্ক্রিপ্ট

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

নমুনা চেষ্টা করুন

বহুভুজ এবং পলিলাইন ফাংশন

রয়েছে অবস্থান()

isLocationOnEdge()