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

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

মানচিত্র প্রকার

প্ল্যাটফর্ম নির্বাচন করুন: অ্যান্ড্রয়েড আইওএস জাভাস্ক্রিপ্ট

এই নথিতে আপনি Maps JavaScript API ব্যবহার করে প্রদর্শন করতে পারেন এমন মানচিত্রের ধরন নিয়ে আলোচনা করে। API এই মানচিত্র সম্পর্কে তথ্য ধারণ করার জন্য একটি MapType অবজেক্ট ব্যবহার করে। একটি MapType হল একটি ইন্টারফেস যা মানচিত্র টাইলগুলির প্রদর্শন এবং ব্যবহার এবং স্ক্রীন স্থানাঙ্ক থেকে বিশ্ব স্থানাঙ্কে (মানচিত্রে) স্থানাঙ্ক সিস্টেমের অনুবাদ সংজ্ঞায়িত করে। প্রতিটি MapType টাইলস পুনরুদ্ধার এবং রিলিজ পরিচালনা করার জন্য কয়েকটি পদ্ধতি এবং বৈশিষ্ট্যগুলি থাকতে হবে যা এর চাক্ষুষ আচরণকে সংজ্ঞায়িত করে।

Maps JavaScript API-এর মধ্যে মানচিত্রের প্রকারের অভ্যন্তরীণ কাজগুলি একটি উন্নত বিষয়। বেশিরভাগ বিকাশকারীরা নীচে উল্লিখিত মৌলিক মানচিত্র প্রকারগুলি ব্যবহার করতে পারেন৷ যাইহোক, আপনি স্টাইল করা মানচিত্র ব্যবহার করে বিদ্যমান মানচিত্রের প্রকারের উপস্থাপনাও সংশোধন করতে পারেন বা কাস্টম মানচিত্র প্রকারগুলি ব্যবহার করে আপনার নিজস্ব মানচিত্র টাইলস সংজ্ঞায়িত করতে পারেন। কাস্টম মানচিত্রের প্রকারগুলি প্রদান করার সময়, আপনাকে মানচিত্রের মানচিত্র প্রকার রেজিস্ট্রি কীভাবে সংশোধন করতে হবে তা বুঝতে হবে।

মৌলিক মানচিত্র প্রকার

Maps JavaScript API-এর মধ্যে চার ধরনের মানচিত্র পাওয়া যায়। পরিচিত "পেইন্টেড" রোড ম্যাপ টাইলস ছাড়াও, Maps JavaScript API অন্যান্য মানচিত্র প্রকারগুলিকেও সমর্থন করে৷

নিম্নলিখিত মানচিত্র প্রকারগুলি মানচিত্র জাভাস্ক্রিপ্ট API-এ উপলব্ধ:

roadmap ডিফল্ট রোড ম্যাপ ভিউ প্রদর্শন করে। এটি ডিফল্ট মানচিত্র প্রকার।
satellite গুগল আর্থ স্যাটেলাইট ছবি প্রদর্শন করে।
hybrid স্বাভাবিক এবং স্যাটেলাইট দৃশ্যের মিশ্রণ প্রদর্শন করে।
terrain ভূখণ্ডের তথ্যের উপর ভিত্তি করে একটি ভৌত মানচিত্র প্রদর্শন করে।

আপনি Map দ্বারা ব্যবহৃত মানচিত্রের ধরনটি পরিবর্তন করুন এর mapTypeId বৈশিষ্ট্য সেট করে, হয় কনস্ট্রাক্টরের মধ্যে এর Map options অবজেক্ট সেট করে, অথবা মানচিত্রের setMapTypeId() পদ্ধতিতে কল করে। mapTypeID প্রপার্টি roadmap ডিফল্ট।

নির্মাণের সময় mapTypeId সেট করা হচ্ছে:

var myLatlng = new google.maps.LatLng(-34.397, 150.644);
var mapOptions = {
  zoom: 8,
  center: myLatlng,
  mapTypeId: 'satellite'
};
var map = new google.maps.Map(document.getElementById('map'),
    mapOptions);

গতিশীলভাবে mapTypeId পরিবর্তন করা হচ্ছে:

map.setMapTypeId('terrain');

মনে রাখবেন যে আপনি প্রকৃতপক্ষে মানচিত্রের মানচিত্র প্রকারটি সরাসরি সেট করেন না, তবে এর পরিবর্তে একটি শনাক্তকারী ব্যবহার করে একটি MapType উল্লেখ করার জন্য এর mapTypeId সেট করুন৷ মানচিত্র জাভাস্ক্রিপ্ট API এই রেফারেন্সগুলি পরিচালনা করার জন্য নীচে ব্যাখ্যা করা একটি মানচিত্রের প্রকার রেজিস্ট্রি ব্যবহার করে৷

45° চিত্র

মানচিত্র জাভাস্ক্রিপ্ট API নির্দিষ্ট অবস্থানের জন্য বিশেষ 45° চিত্র সমর্থন করে। এই উচ্চ-রেজোলিউশন চিত্রাবলী প্রতিটি মূল দিক (উত্তর, দক্ষিণ, পূর্ব, পশ্চিম) প্রতি দৃষ্টিভঙ্গি দেখায়। সমর্থিত মানচিত্র প্রকারের জন্য এই ছবিগুলি উচ্চতর জুম স্তরে উপলব্ধ।

নিম্নলিখিত চিত্রটি নিউ ইয়র্ক সিটির একটি 45° দৃষ্টিকোণ দেখায়:

satellite এবং hybrid মানচিত্রের ধরনগুলি যেখানে উপলব্ধ সেখানে উচ্চ জুম স্তরে (12 এবং তার বেশি) 45° চিত্র সমর্থন করে৷ যদি ব্যবহারকারী এমন একটি অবস্থানে জুম করে যার জন্য এই ধরনের চিত্র বিদ্যমান, এই মানচিত্র প্রকারগুলি স্বয়ংক্রিয়ভাবে নিম্নলিখিত পদ্ধতিতে তাদের দৃষ্টিভঙ্গি পরিবর্তন করে:

স্যাটেলাইট বা হাইব্রিড চিত্রগুলি বর্তমান অবস্থানকে কেন্দ্র করে 45° দৃষ্টিকোণ প্রদান করে চিত্রগুলির সাথে প্রতিস্থাপিত হয়৷ ডিফল্টরূপে, এই ধরনের দৃষ্টিভঙ্গি উত্তর দিকে ভিত্তিক। ব্যবহারকারী জুম আউট করলে, ডিফল্ট স্যাটেলাইট বা হাইব্রিড চিত্র আবার প্রদর্শিত হবে। জুম লেভেল এবং tilt মানের উপর নির্ভর করে আচরণ পরিবর্তিত হয়:

জুম লেভেল 12 এবং 18 এর মধ্যে টপ-ডাউন বেসম্যাপ (0°) ডিফল্টভাবে প্রদর্শিত হয় যদি না tilt 45 এ সেট করা হয়।
18 বা তার বেশি জুম লেভেলে 45° বেসম্যাপ দেখায় যদি না tilt 0 এ সেট করা হয়।

ঘূর্ণন নিয়ন্ত্রণ দৃশ্যমান হয়ে ওঠে. ঘূর্ণন নিয়ন্ত্রণ বিকল্পগুলি প্রদান করে যা ব্যবহারকারীকে টিল্ট টগল করতে এবং উভয় দিকে 90° বৃদ্ধিতে ভিউ ঘোরাতে সক্ষম করে। রোটেট কন্ট্রোল লুকানোর জন্য, rotateControl false এ সেট করুন।

45° চিত্র প্রদর্শন করে একটি মানচিত্রের ধরন থেকে জুম আউট করা এই প্রতিটি পরিবর্তনকে ফিরিয়ে দেয়, মূল মানচিত্রের প্রকারগুলিকে পুনঃপ্রতিষ্ঠা করে।

45° চিত্রাবলী সক্ষম এবং অক্ষম করুন৷

আপনি Map বস্তুতে setTilt(0) কল করে 45° চিত্র অক্ষম করতে পারেন। সমর্থিত মানচিত্র প্রকারের জন্য 45° চিত্র সক্ষম করতে, setTilt(45) কল করুন। Map getTilt() পদ্ধতি সর্বদা মানচিত্রে প্রদর্শিত বর্তমান tilt প্রতিফলিত করবে; যদি আপনি একটি মানচিত্রে একটি tilt সেট করেন এবং তারপরে সেই tilt সরিয়ে দেন (উদাহরণস্বরূপ, মানচিত্রটি জুম করে), মানচিত্রের getTilt() পদ্ধতিটি 0 ফেরত দেবে।

গুরুত্বপূর্ণ: 45° চিত্র শুধুমাত্র রাস্টার মানচিত্রে সমর্থিত; এই চিত্র ভেক্টর মানচিত্রে ব্যবহার করা যাবে না।

নিম্নলিখিত উদাহরণটি নিউ ইয়র্ক সিটির 45° দৃশ্য প্রদর্শন করে:

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

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      center: { lat: 40.76, lng: -73.983 },
      zoom: 15,
      mapTypeId: "satellite",
    }
  );

  map.setTilt(45);
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;index.ts

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

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: 40.76, lng: -73.983 },
    zoom: 15,
    mapTypeId: "satellite",
  });

  map.setTilt(45);
}

window.initMap = initMap;index.js

উদাহরণ দেখুন

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

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

উদাহরণ দেখুন ।

45° চিত্র ঘোরান

45° চিত্রে প্রকৃতপক্ষে প্রতিটি মূল দিক (উত্তর, দক্ষিণ, পূর্ব, পশ্চিম) ছবির একটি সংগ্রহ রয়েছে। একবার আপনার মানচিত্র 45° চিত্র প্রদর্শন করলে, আপনি Map অবজেক্টে setHeading() কল করে, উত্তর থেকে ডিগ্রী হিসাবে প্রকাশ করা একটি সংখ্যা মান পাস করে চিত্রটিকে এর মূল দিকগুলির একটির দিকে অভিমুখ করতে পারেন।

নিম্নলিখিত উদাহরণটি একটি বায়বীয় মানচিত্র দেখায় এবং বোতামটি ক্লিক করা হলে প্রতি 3 সেকেন্ডে মানচিত্রটি স্বয়ংক্রিয়ভাবে ঘোরে:

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

let map: google.maps.Map;

function initMap(): void {
  map = new google.maps.Map(document.getElementById("map") as HTMLElement, {
    center: { lat: 40.76, lng: -73.983 },
    zoom: 15,
    mapTypeId: "satellite",
    heading: 90,
    tilt: 45,
  });

  // add listener to button
  document.getElementById("rotate")!.addEventListener("click", autoRotate);
}

function rotate90(): void {
  const heading = map.getHeading() || 0;

  map.setHeading(heading + 90);
}

function autoRotate(): void {
  // Determine if we're showing aerial imagery.
  if (map.getTilt() !== 0) {
    window.setInterval(rotate90, 3000);
  }
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;index.ts

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

let map;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: 40.76, lng: -73.983 },
    zoom: 15,
    mapTypeId: "satellite",
    heading: 90,
    tilt: 45,
  });
  // add listener to button
  document.getElementById("rotate").addEventListener("click", autoRotate);
}

function rotate90() {
  const heading = map.getHeading() || 0;

  map.setHeading(heading + 90);
}

function autoRotate() {
  // Determine if we're showing aerial imagery.
  if (map.getTilt() !== 0) {
    window.setInterval(rotate90, 3000);
  }
}

window.initMap = initMap;index.js

উদাহরণ দেখুন

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

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

উদাহরণ দেখুন ।

ম্যাপ টাইপ রেজিস্ট্রি পরিবর্তন করুন

একটি মানচিত্রের mapTypeId হল একটি স্ট্রিং শনাক্তকারী যা একটি MapType একটি অনন্য মানের সাথে সংযুক্ত করতে ব্যবহৃত হয়। প্রতিটি Map অবজেক্ট একটি MapTypeRegistry বজায় রাখে যাতে সেই মানচিত্রের জন্য উপলব্ধ MapType s এর সংগ্রহ থাকে। এই রেজিস্ট্রিটি ম্যাপের ম্যাপ টাইপ নিয়ন্ত্রণে উপলব্ধ মানচিত্রের ধরন নির্বাচন করতে ব্যবহৃত হয়, উদাহরণস্বরূপ।

আপনি ম্যাপ টাইপ রেজিস্ট্রি থেকে সরাসরি পড়েন না। পরিবর্তে, আপনি কাস্টম মানচিত্রের প্রকারগুলি যোগ করে এবং আপনার পছন্দের একটি স্ট্রিং শনাক্তকারীর সাথে সংযুক্ত করে রেজিস্ট্রিটি সংশোধন করুন৷ আপনি মৌলিক মানচিত্রের প্রকারগুলি পরিবর্তন বা পরিবর্তন করতে পারবেন না (যদিও আপনি মানচিত্রের সংশ্লিষ্ট mapTypeControlOptions এর চেহারা পরিবর্তন করে মানচিত্র থেকে সেগুলি সরাতে পারেন)।

নিম্নলিখিত কোডটি মানচিত্রের মানচিত্রের মানচিত্র mapTypeControlOptions শুধুমাত্র দুটি মানচিত্র প্রকার দেখানোর জন্য মানচিত্রকে সেট করে এবং MapType ইন্টারফেসের প্রকৃত বাস্তবায়নে এই শনাক্তকারীর সাথে অ্যাসোসিয়েশন যোগ করার জন্য রেজিস্ট্রি সংশোধন করে।

// Modify the control to only display two maptypes, the
// default ROADMAP and the custom 'mymap'.
// Note that because this is an association, we
// don't need to modify the MapTypeRegistry beforehand.

var MY_MAPTYPE_ID = 'mymaps';

var mapOptions = {
  zoom: 12,
  center: brooklyn,
  mapTypeControlOptions: {
     mapTypeIds: ['roadmap', MY_MAPTYPE_ID]
  },
  mapTypeId: MY_MAPTYPE_ID
};

// Create our map. This creation will implicitly create a
// map type registry.
map = new google.maps.Map(document.getElementById('map'),
    mapOptions);

// Create your custom map type using your own code.
// (See below.)
var myMapType = new MyMapType();

// Set the registry to associate 'mymap' with the
// custom map type we created, and set the map to
// show that map type.
map.mapTypes.set(MY_MAPTYPE_ID, myMapType);

স্টাইল করা মানচিত্র

StyledMapType আপনাকে স্ট্যান্ডার্ড Google বেস ম্যাপের উপস্থাপনা কাস্টমাইজ করতে দেয়, রাস্তা, পার্ক এবং বিল্ট-আপ এলাকার মতো উপাদানগুলির ভিজ্যুয়াল ডিসপ্লে পরিবর্তন করে ডিফল্ট মানচিত্রের ধরণে ব্যবহৃত একটি ভিন্ন শৈলী প্রতিফলিত করতে।

StyledMapType সম্পর্কে আরও তথ্যের জন্য, এমবেডেড JSON শৈলী ঘোষণার ব্যবহার দেখুন।

কাস্টম মানচিত্র প্রকার

মানচিত্র জাভাস্ক্রিপ্ট API কাস্টম মানচিত্র প্রকারের প্রদর্শন এবং পরিচালনা সমর্থন করে, যা আপনাকে আপনার নিজস্ব মানচিত্র চিত্র বা টাইল ওভারলে বাস্তবায়ন করতে দেয়।

মানচিত্র জাভাস্ক্রিপ্ট API-এর মধ্যে বেশ কিছু সম্ভাব্য মানচিত্র প্রকার বাস্তবায়ন বিদ্যমান:

স্ট্যান্ডার্ড টাইল সেটে ছবি থাকে যা সম্মিলিতভাবে সম্পূর্ণ কার্টোগ্রাফিক মানচিত্র গঠন করে। এই টাইল সেটগুলি বেস মানচিত্র প্রকার হিসাবেও পরিচিত। এই মানচিত্র প্রকারগুলি বিদ্যমান ডিফল্ট মানচিত্র প্রকারের মতো কাজ করে এবং আচরণ করে: roadmap , satellite , hybrid এবং terrain ৷ আপনি মানচিত্র জাভাস্ক্রিপ্ট API-এর মধ্যে UI-কে আপনার কাস্টম মানচিত্রের ধরনটিকে একটি আদর্শ মানচিত্র প্রকার হিসাবে বিবেচনা করার অনুমতি দেওয়ার জন্য একটি মানচিত্রের mapTypes অ্যারেতে আপনার কাস্টম মানচিত্রের ধরণ যোগ করতে পারেন (উদাহরণস্বরূপ, এটিকে MapType নিয়ন্ত্রণে অন্তর্ভুক্ত করে)।
ইমেজ টাইল ওভারলে যা বিদ্যমান বেস মানচিত্রের প্রকারের উপরে প্রদর্শিত হয়। সাধারণত, এই মানচিত্র প্রকারগুলিকে অতিরিক্ত তথ্য প্রদর্শনের জন্য একটি বিদ্যমান মানচিত্রের ধরন বাড়ানোর জন্য ব্যবহার করা হয় এবং প্রায়শই নির্দিষ্ট অবস্থান এবং/অথবা জুম স্তরে সীমাবদ্ধ থাকে। মনে রাখবেন যে এই টাইলগুলি স্বচ্ছ হতে পারে, যা আপনাকে বিদ্যমান মানচিত্রে বৈশিষ্ট্য যোগ করতে দেয়।
নন-ইমেজ মানচিত্র প্রকার, যা আপনাকে মানচিত্র তথ্য প্রদর্শনের সবচেয়ে মৌলিক স্তরে ম্যানিপুলেট করতে দেয়।

এই বিকল্পগুলির প্রতিটি একটি ক্লাস তৈরির উপর নির্ভর করে যা MapType ইন্টারফেস প্রয়োগ করে। অতিরিক্তভাবে, ImageMapType ক্লাস চিত্রের মানচিত্র প্রকারগুলি তৈরিকে সহজ করার জন্য কিছু অন্তর্নির্মিত আচরণ প্রদান করে।

`MapType` ইন্টারফেস

আপনি MapType প্রয়োগ করে এমন ক্লাস তৈরি করার আগে, Google Maps কীভাবে স্থানাঙ্ক নির্ধারণ করে এবং মানচিত্রের কোন অংশগুলি দেখানো হবে তা নির্ধারণ করে তা বোঝা গুরুত্বপূর্ণ। যেকোন বেস বা ওভারলে মানচিত্র প্রকারের জন্য আপনাকে অনুরূপ যুক্তি প্রয়োগ করতে হবে। মানচিত্র এবং টাইল স্থানাঙ্কের নির্দেশিকা পড়ুন।

কাস্টম মানচিত্রের ধরন অবশ্যই MapType ইন্টারফেস বাস্তবায়ন করবে। এই ইন্টারফেসটি নির্দিষ্ট বৈশিষ্ট্য এবং পদ্ধতিগুলি নির্দিষ্ট করে যা API-কে আপনার মানচিত্র প্রকার(গুলি) এর অনুরোধগুলি শুরু করার অনুমতি দেয় যখন API নির্ধারণ করে যে এটি বর্তমান ভিউপোর্ট এবং জুম স্তরের মধ্যে মানচিত্রের টাইলগুলি প্রদর্শন করতে হবে৷ কোন টাইল লোড করতে হবে তা নির্ধারণ করতে আপনি এই অনুরোধগুলি পরিচালনা করেন।

দ্রষ্টব্য : আপনি এই ইন্টারফেসটি বাস্তবায়ন করতে আপনার নিজস্ব ক্লাস তৈরি করতে পারেন। বিকল্পভাবে, আপনার যদি সামঞ্জস্যপূর্ণ চিত্র থাকে তবে আপনি ImageMapType ক্লাস ব্যবহার করতে পারেন যা ইতিমধ্যে এই ইন্টারফেসটি প্রয়োগ করে।

MapType ইন্টারফেস বাস্তবায়নকারী ক্লাসগুলির জন্য আপনাকে নিম্নলিখিত বৈশিষ্ট্যগুলিকে সংজ্ঞায়িত এবং পপুলেট করতে হবে:

tileSize (প্রয়োজনীয়) টাইলের আকার নির্দিষ্ট করে ( google.maps.Size টাইপ)। আকারগুলি অবশ্যই আয়তক্ষেত্রাকার হতে হবে যদিও সেগুলি বর্গক্ষেত্র হতে হবে না।
maxZoom (প্রয়োজনীয়) সর্বাধিক জুম স্তর নির্দিষ্ট করে যেখানে এই মানচিত্র প্রকারের টাইলগুলি প্রদর্শন করতে হবে৷
minZoom (ঐচ্ছিক) ন্যূনতম জুম স্তর নির্দিষ্ট করে যেখানে এই মানচিত্র প্রকারের টাইল প্রদর্শন করতে হবে। ডিফল্টরূপে, এই মানটি 0 ইঙ্গিত করে যে কোন ন্যূনতম জুম স্তর বিদ্যমান নেই।
name (ঐচ্ছিক) এই মানচিত্রের প্রকারের নাম নির্দিষ্ট করে। এই বৈশিষ্ট্যটি শুধুমাত্র তখনই প্রয়োজনীয় যদি আপনি চান যে এই মানচিত্রের ধরনটি একটি MapType নিয়ন্ত্রণের মধ্যে নির্বাচনযোগ্য। ( নিয়ন্ত্রণ বিকল্প দেখুন।)
alt (ঐচ্ছিক) এই মানচিত্র প্রকারের জন্য বিকল্প পাঠ্য নির্দিষ্ট করে, হোভার টেক্সট হিসাবে প্রদর্শিত। এই বৈশিষ্ট্যটি শুধুমাত্র তখনই প্রয়োজনীয় যদি আপনি চান যে এই মানচিত্রের ধরনটি একটি MapType নিয়ন্ত্রণের মধ্যে নির্বাচনযোগ্য। ( নিয়ন্ত্রণ বিকল্প দেখুন।)

উপরন্তু, MapType ইন্টারফেস বাস্তবায়নকারী ক্লাসগুলিকে নিম্নলিখিত পদ্ধতিগুলি বাস্তবায়ন করতে হবে:

getTile() (প্রয়োজনীয়) বলা হয় যখনই API নির্ধারণ করে যে মানচিত্রটিকে প্রদত্ত ভিউপোর্টের জন্য নতুন টাইলস প্রদর্শন করতে হবে। getTile() পদ্ধতিতে নিম্নলিখিত স্বাক্ষর থাকতে হবে:
getTile(tileCoord:Point,zoom:number,ownerDocument:Document):Node
MapType এর tileSize , minZoom , এবং maxZoom বৈশিষ্ট্য এবং মানচিত্রের বর্তমান ভিউপোর্ট এবং জুম স্তরের উপর ভিত্তি করে এপিআই এটিকে getTile() কল করতে হবে কিনা তা নির্ধারণ করে। এই পদ্ধতির জন্য হ্যান্ডলারকে একটি পাস করা স্থানাঙ্ক, জুম স্তর এবং DOM উপাদান দিয়ে একটি HTML উপাদান ফেরত দেওয়া উচিত যাতে টাইল চিত্রটি যুক্ত করতে হয়।
releaseTile() (ঐচ্ছিক) বলা হয় যখনই API নির্ধারণ করে যে মানচিত্রটি একটি টাইল অপসারণ করতে হবে কারণ এটি দৃশ্যের বাইরে পড়ে যায়। এই পদ্ধতিতে নিম্নলিখিত স্বাক্ষর থাকতে হবে:
releaseTile(tile:Node)
ম্যাপ যুক্ত করার সময় ম্যাপের টাইলসের সাথে সংযুক্ত যেকোন উপাদানগুলিকে অপসারণ করার জন্য আপনাকে সাধারণত পরিচালনা করতে হবে। উদাহরণস্বরূপ, যদি আপনি ইভেন্ট শ্রোতাদের ম্যাপ টাইল ওভারলেতে সংযুক্ত করেন, তাহলে আপনার সেগুলিকে এখান থেকে সরানো উচিত।

getTile() পদ্ধতি একটি প্রদত্ত ভিউপোর্টের মধ্যে কোন টাইলগুলি লোড করতে হবে তা নির্ধারণের জন্য প্রধান নিয়ামক হিসাবে কাজ করে।

ভিত্তি মানচিত্র প্রকার

আপনি এই পদ্ধতিতে যে মানচিত্রের প্রকারগুলি তৈরি করেন সেগুলি হয় একা দাঁড়াতে পারে বা ওভারলে হিসাবে অন্যান্য মানচিত্রের প্রকারগুলির সাথে একত্রিত হতে পারে৷ স্বতন্ত্র মানচিত্রের প্রকারগুলি বেস মানচিত্র প্রকার হিসাবে পরিচিত। আপনি এপিআই-এর সাথে এমন কাস্টম MapType গুলি ব্যবহার করতে চাইতে পারেন যেমন এটি অন্য যেকোন বিদ্যমান বেস মানচিত্র প্রকার ( ROADMAP , TERRAIN , ইত্যাদি)। এটি করার জন্য, আপনার কাস্টম MapType যোগ করুন Map mapTypes বৈশিষ্ট্যে। এই সম্পত্তি MapTypeRegistry ধরনের।

নিম্নলিখিত কোডটি একটি মানচিত্রের টাইল স্থানাঙ্ক প্রদর্শন করতে একটি বেস MapType তৈরি করে এবং টাইলগুলির একটি রূপরেখা আঁকে:

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

/*
 * This demo demonstrates how to replace default map tiles with custom imagery.
 * In this case, the CoordMapType displays gray tiles annotated with the tile
 * coordinates.
 *
 * Try panning and zooming the map to see how the coordinates change.
 */

class CoordMapType {
  tileSize: google.maps.Size;
  maxZoom = 19;
  name = "Tile #s";
  alt = "Tile Coordinate Map Type";

  constructor(tileSize: google.maps.Size) {
    this.tileSize = tileSize;
  }

  getTile(
    coord: google.maps.Point,
    zoom: number,
    ownerDocument: Document
  ): HTMLElement {
    const div = ownerDocument.createElement("div");

    div.innerHTML = String(coord);
    div.style.width = this.tileSize.width + "px";
    div.style.height = this.tileSize.height + "px";
    div.style.fontSize = "10";
    div.style.borderStyle = "solid";
    div.style.borderWidth = "1px";
    div.style.borderColor = "#AAAAAA";
    div.style.backgroundColor = "#E5E3DF";
    return div;
  }

  releaseTile(tile: HTMLElement): void {}
}

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 10,
      center: { lat: 41.85, lng: -87.65 },
      streetViewControl: false,
      mapTypeId: "coordinate",
      mapTypeControlOptions: {
        mapTypeIds: ["coordinate", "roadmap"],
        style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
      },
    }
  );

  map.addListener("maptypeid_changed", () => {
    const showStreetViewControl =
      (map.getMapTypeId() as string) !== "coordinate";

    map.setOptions({
      streetViewControl: showStreetViewControl,
    });
  });

  // Now attach the coordinate map type to the map's registry.
  map.mapTypes.set(
    "coordinate",
    new CoordMapType(new google.maps.Size(256, 256))
  );
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;index.ts

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

/*
 * This demo demonstrates how to replace default map tiles with custom imagery.
 * In this case, the CoordMapType displays gray tiles annotated with the tile
 * coordinates.
 *
 * Try panning and zooming the map to see how the coordinates change.
 */
class CoordMapType {
  tileSize;
  maxZoom = 19;
  name = "Tile #s";
  alt = "Tile Coordinate Map Type";
  constructor(tileSize) {
    this.tileSize = tileSize;
  }
  getTile(coord, zoom, ownerDocument) {
    const div = ownerDocument.createElement("div");

    div.innerHTML = String(coord);
    div.style.width = this.tileSize.width + "px";
    div.style.height = this.tileSize.height + "px";
    div.style.fontSize = "10";
    div.style.borderStyle = "solid";
    div.style.borderWidth = "1px";
    div.style.borderColor = "#AAAAAA";
    div.style.backgroundColor = "#E5E3DF";
    return div;
  }
  releaseTile(tile) {}
}

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 10,
    center: { lat: 41.85, lng: -87.65 },
    streetViewControl: false,
    mapTypeId: "coordinate",
    mapTypeControlOptions: {
      mapTypeIds: ["coordinate", "roadmap"],
      style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
    },
  });

  map.addListener("maptypeid_changed", () => {
    const showStreetViewControl = map.getMapTypeId() !== "coordinate";

    map.setOptions({
      streetViewControl: showStreetViewControl,
    });
  });
  // Now attach the coordinate map type to the map's registry.
  map.mapTypes.set(
    "coordinate",
    new CoordMapType(new google.maps.Size(256, 256)),
  );
}

window.initMap = initMap;index.js

উদাহরণ দেখুন

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

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

ওভারলে মানচিত্র প্রকার

কিছু মানচিত্রের ধরন বিদ্যমান মানচিত্রের প্রকারের উপরে কাজ করার জন্য ডিজাইন করা হয়েছে। এই ধরনের মানচিত্রের প্রকারে স্বচ্ছ স্তর থাকতে পারে যা আগ্রহের পয়েন্টগুলি নির্দেশ করে বা ব্যবহারকারীকে অতিরিক্ত ডেটা দেখায়।

এই ক্ষেত্রে, আপনি মানচিত্রের ধরনটিকে একটি পৃথক সত্তা হিসাবে বিবেচনা না করে একটি ওভারলে হিসাবে চান৷ আপনি সরাসরি Map এর overlayMapTypes বৈশিষ্ট্য ব্যবহার করে একটি বিদ্যমান MapType এ মানচিত্রের প্রকার যোগ করে এটি করতে পারেন। এই সম্পত্তিতে MapType s-এর একটি MVCArray রয়েছে৷ সমস্ত মানচিত্র প্রকার (বেস এবং ওভারলে) mapPane স্তরের মধ্যে রেন্ডার করা হয়। ওভারলে মানচিত্রের প্রকারগুলি তারা সংযুক্ত বেস মানচিত্রের উপরে প্রদর্শিত হবে, যে ক্রমে তারা Map.overlayMapTypes অ্যারেতে প্রদর্শিত হবে (উচ্চ সূচক মান সহ ওভারলেগুলি নিম্ন সূচক মান সহ ওভারলেগুলির সামনে প্রদর্শিত হয়)।

নিম্নলিখিত উদাহরণটি পূর্ববর্তীটির সাথে অভিন্ন ব্যতীত যে আমরা ROADMAP মানচিত্রের প্রকারের উপরে একটি টাইল ওভারলে MapType তৈরি করেছি:

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

/*
 * This demo illustrates the coordinate system used to display map tiles in the
 * API.
 *
 * Tiles in Google Maps are numbered from the same origin as that for
 * pixels. For Google's implementation of the Mercator projection, the origin
 * tile is always at the northwest corner of the map, with x values increasing
 * from west to east and y values increasing from north to south.
 *
 * Try panning and zooming the map to see how the coordinates change.
 */

class CoordMapType implements google.maps.MapType {
  tileSize: google.maps.Size;
  alt: string|null = null;
  maxZoom: number = 17;
  minZoom: number = 0;
  name: string|null = null;
  projection: google.maps.Projection|null = null;
  radius: number = 6378137;

  constructor(tileSize: google.maps.Size) {
    this.tileSize = tileSize;
  }
  getTile(
    coord: google.maps.Point,
    zoom: number,
    ownerDocument: Document
  ): HTMLElement {
    const div = ownerDocument.createElement("div");

    div.innerHTML = String(coord);
    div.style.width = this.tileSize.width + "px";
    div.style.height = this.tileSize.height + "px";
    div.style.fontSize = "10";
    div.style.borderStyle = "solid";
    div.style.borderWidth = "1px";
    div.style.borderColor = "#AAAAAA";
    return div;
  }
  releaseTile(tile: Element): void {}
}

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 10,
      center: { lat: 41.85, lng: -87.65 },
    }
  );

  // Insert this overlay map type as the first overlay map type at
  // position 0. Note that all overlay map types appear on top of
  // their parent base map.
  const coordMapType = new CoordMapType(new google.maps.Size(256, 256))
  map.overlayMapTypes.insertAt(
    0,
    coordMapType
  );
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;index.ts

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

/*
 * This demo illustrates the coordinate system used to display map tiles in the
 * API.
 *
 * Tiles in Google Maps are numbered from the same origin as that for
 * pixels. For Google's implementation of the Mercator projection, the origin
 * tile is always at the northwest corner of the map, with x values increasing
 * from west to east and y values increasing from north to south.
 *
 * Try panning and zooming the map to see how the coordinates change.
 */
class CoordMapType {
  tileSize;
  alt = null;
  maxZoom = 17;
  minZoom = 0;
  name = null;
  projection = null;
  radius = 6378137;
  constructor(tileSize) {
    this.tileSize = tileSize;
  }
  getTile(coord, zoom, ownerDocument) {
    const div = ownerDocument.createElement("div");

    div.innerHTML = String(coord);
    div.style.width = this.tileSize.width + "px";
    div.style.height = this.tileSize.height + "px";
    div.style.fontSize = "10";
    div.style.borderStyle = "solid";
    div.style.borderWidth = "1px";
    div.style.borderColor = "#AAAAAA";
    return div;
  }
  releaseTile(tile) {}
}

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 10,
    center: { lat: 41.85, lng: -87.65 },
  });
  // Insert this overlay map type as the first overlay map type at
  // position 0. Note that all overlay map types appear on top of
  // their parent base map.
  const coordMapType = new CoordMapType(new google.maps.Size(256, 256));

  map.overlayMapTypes.insertAt(0, coordMapType);
}

window.initMap = initMap;index.js

উদাহরণ দেখুন

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

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

চিত্র মানচিত্র প্রকার

একটি বেস ম্যাপ টাইপ হিসাবে কাজ করার জন্য একটি MapType বাস্তবায়ন করা একটি সময়সাপেক্ষ এবং শ্রমসাধ্য কাজ হতে পারে। API একটি বিশেষ শ্রেণী প্রদান করে যা সবচেয়ে সাধারণ মানচিত্র প্রকারের জন্য MapType ইন্টারফেস প্রয়োগ করে: মানচিত্রের ধরন যা একক ইমেজ ফাইল দিয়ে তৈরি টাইলস নিয়ে গঠিত।

এই ক্লাস, ImageMapType ক্লাস, নিম্নলিখিত প্রয়োজনীয় বৈশিষ্ট্যগুলিকে সংজ্ঞায়িত করে একটি ImageMapTypeOptions অবজেক্ট স্পেসিফিকেশন ব্যবহার করে তৈরি করা হয়েছে:

tileSize (প্রয়োজনীয়) টাইলের আকার নির্দিষ্ট করে ( google.maps.Size টাইপ)। আকারগুলি অবশ্যই আয়তক্ষেত্রাকার হতে হবে যদিও সেগুলি বর্গক্ষেত্র হতে হবে না।
getTileUrl (প্রয়োজনীয়) ফাংশনটি নির্দিষ্ট করে, সাধারণত একটি ইনলাইন ফাংশন আক্ষরিক হিসাবে সরবরাহ করা হয়, সরবরাহ করা বিশ্ব স্থানাঙ্ক এবং জুম স্তরের উপর ভিত্তি করে সঠিক চিত্র টাইলের নির্বাচন পরিচালনা করতে।

নিম্নলিখিত কোডটি Google এর চাঁদের টাইলস ব্যবহার করে একটি মৌলিক ImageMapType প্রয়োগ করে৷ উদাহরণটি একটি স্বাভাবিককরণ ফাংশন ব্যবহার করে তা নিশ্চিত করতে যে টাইলসগুলি x-অক্ষ বরাবর পুনরাবৃত্তি হয়, কিন্তু আপনার মানচিত্রের y-অক্ষ বরাবর নয়।

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

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      center: { lat: 0, lng: 0 },
      zoom: 1,
      streetViewControl: false,
      mapTypeControlOptions: {
        mapTypeIds: ["moon"],
      },
    }
  );

  const moonMapType = new google.maps.ImageMapType({
    getTileUrl: function (coord, zoom): string {
      const normalizedCoord = getNormalizedCoord(coord, zoom);

      if (!normalizedCoord) {
        return "";
      }

      const bound = Math.pow(2, zoom);
      return (
        "https://mw1.google.com/mw-planetary/lunar/lunarmaps_v1/clem_bw" +
        "/" +
        zoom +
        "/" +
        normalizedCoord.x +
        "/" +
        (bound - normalizedCoord.y - 1) +
        ".jpg"
      );
    },
    tileSize: new google.maps.Size(256, 256),
    maxZoom: 9,
    minZoom: 0,
    // @ts-ignore TODO 'radius' does not exist in type 'ImageMapTypeOptions'
    radius: 1738000,
    name: "Moon",
  });

  map.mapTypes.set("moon", moonMapType);
  map.setMapTypeId("moon");
}

// Normalizes the coords that tiles repeat across the x axis (horizontally)
// like the standard Google map tiles.
function getNormalizedCoord(coord, zoom) {
  const y = coord.y;
  let x = coord.x;

  // tile range in one direction range is dependent on zoom level
  // 0 = 1 tile, 1 = 2 tiles, 2 = 4 tiles, 3 = 8 tiles, etc
  const tileRange = 1 << zoom;

  // don't repeat across y-axis (vertically)
  if (y < 0 || y >= tileRange) {
    return null;
  }

  // repeat across x-axis
  if (x < 0 || x >= tileRange) {
    x = ((x % tileRange) + tileRange) % tileRange;
  }

  return { x: x, y: y };
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;index.ts

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

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: 0, lng: 0 },
    zoom: 1,
    streetViewControl: false,
    mapTypeControlOptions: {
      mapTypeIds: ["moon"],
    },
  });
  const moonMapType = new google.maps.ImageMapType({
    getTileUrl: function (coord, zoom) {
      const normalizedCoord = getNormalizedCoord(coord, zoom);

      if (!normalizedCoord) {
        return "";
      }

      const bound = Math.pow(2, zoom);
      return (
        "https://mw1.google.com/mw-planetary/lunar/lunarmaps_v1/clem_bw" +
        "/" +
        zoom +
        "/" +
        normalizedCoord.x +
        "/" +
        (bound - normalizedCoord.y - 1) +
        ".jpg"
      );
    },
    tileSize: new google.maps.Size(256, 256),
    maxZoom: 9,
    minZoom: 0,
    // @ts-ignore TODO 'radius' does not exist in type 'ImageMapTypeOptions'
    radius: 1738000,
    name: "Moon",
  });

  map.mapTypes.set("moon", moonMapType);
  map.setMapTypeId("moon");
}

// Normalizes the coords that tiles repeat across the x axis (horizontally)
// like the standard Google map tiles.
function getNormalizedCoord(coord, zoom) {
  const y = coord.y;
  let x = coord.x;
  // tile range in one direction range is dependent on zoom level
  // 0 = 1 tile, 1 = 2 tiles, 2 = 4 tiles, 3 = 8 tiles, etc
  const tileRange = 1 << zoom;

  // don't repeat across y-axis (vertically)
  if (y < 0 || y >= tileRange) {
    return null;
  }

  // repeat across x-axis
  if (x < 0 || x >= tileRange) {
    x = ((x % tileRange) + tileRange) % tileRange;
  }
  return { x: x, y: y };
}

window.initMap = initMap;index.js

উদাহরণ দেখুন

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

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

অনুমান

পৃথিবী একটি ত্রিমাত্রিক গোলক (প্রায়), যখন একটি মানচিত্র একটি সমতল দ্বি-মাত্রিক পৃষ্ঠ। আপনি মানচিত্রের জাভাস্ক্রিপ্ট API-এর মধ্যে যে মানচিত্রটি দেখতে পান, পৃথিবীর যেকোনো সমতল মানচিত্রের মতো, এটি একটি সমতল পৃষ্ঠের উপর সেই গোলকের একটি অভিক্ষেপ । এর সহজ শর্তে, একটি অভিক্ষেপকে অভিক্ষেপের মানচিত্রে স্থানাঙ্কে অক্ষাংশ/দ্রাঘিমাংশের মানগুলির ম্যাপিং হিসাবে সংজ্ঞায়িত করা যেতে পারে।

মানচিত্র জাভাস্ক্রিপ্ট এপিআই-এ প্রজেকশনগুলি অবশ্যই Projection ইন্টারফেস বাস্তবায়ন করবে। একটি Projection বাস্তবায়ন অবশ্যই একটি স্থানাঙ্ক সিস্টেম থেকে অন্য একটি ম্যাপিং প্রদান করবে না, তবে একটি দ্বি-নির্দেশিক ম্যাপিং প্রদান করবে। অর্থাৎ, আপনাকে অবশ্যই নির্ধারণ করতে হবে কিভাবে আর্থ কোঅর্ডিনেট ( LatLng অবজেক্ট) থেকে Projection ক্লাসের ওয়ার্ল্ড কোঅর্ডিনেট সিস্টেমে এবং ওয়ার্ল্ড কোঅর্ডিনেট সিস্টেম থেকে আবার আর্থ কোঅর্ডিনেটে অনুবাদ করতে হবে। Google Maps ভৌগলিক ডেটা থেকে এর মানচিত্র তৈরি করতে এবং মানচিত্রের ইভেন্টগুলিকে ভৌগলিক স্থানাঙ্কে রূপান্তর করতে Mercator প্রজেকশন ব্যবহার করে। আপনি Map (অথবা স্ট্যান্ডার্ড বেস MapType প্রকারের যেকোনো একটি getProjection() কল করে এই প্রজেকশনটি পেতে পারেন, বেশিরভাগ ব্যবহারের জন্য, এই স্ট্যান্ডার্ড Projection যথেষ্ট হবে, তবে আপনি আপনার নিজস্ব কাস্টম প্রজেকশনও সংজ্ঞায়িত করতে এবং ব্যবহার করতে পারেন।

একটি অভিক্ষেপ বাস্তবায়ন

একটি কাস্টম প্রজেকশন বাস্তবায়ন করার সময়, আপনাকে কয়েকটি জিনিস সংজ্ঞায়িত করতে হবে:

ম্যাপিং অক্ষাংশ এবং দ্রাঘিমাংশের জন্য সূত্রগুলি একটি কার্টেসিয়ান সমতলে এবং একটি কার্টেসিয়ান সমতল থেকে অক্ষাংশ এবং দ্রাঘিমাংশ স্থানাঙ্কে ম্যাপিংয়ের জন্য সংশ্লিষ্ট সূত্রগুলি। ( Projection ইন্টারফেস শুধুমাত্র রেক্টিলাইনার কোঅর্ডিনেটে রূপান্তরকে সমর্থন করে।)
বেস টালি আকার. সমস্ত টাইলস আয়তক্ষেত্রাকার হতে হবে।
বেস টাইল ব্যবহার করে একটি মানচিত্রের "বিশ্বের আকার" জুম স্তর 0 এ সেট করা হয়েছে। মনে রাখবেন যে জুম 0 এ একটি টাইল সমন্বিত মানচিত্রের জন্য, বিশ্বের আকার এবং বেস টাইলের আকার অভিন্ন।

অভিক্ষেপে রূপান্তর সমন্বয় করুন

প্রতিটি অভিক্ষেপ দুটি পদ্ধতি প্রদান করে যা এই দুটি স্থানাঙ্ক সিস্টেমের মধ্যে অনুবাদ করে, আপনাকে ভৌগলিক এবং বিশ্ব স্থানাঙ্কের মধ্যে রূপান্তর করার অনুমতি দেয়:

Projection.fromLatLngToPoint() পদ্ধতি একটি LatLng মানকে একটি বিশ্ব স্থানাঙ্কে রূপান্তর করে। এই পদ্ধতিটি মানচিত্রে ওভারলেগুলির অবস্থানের জন্য (এবং মানচিত্রের অবস্থানের জন্য) ব্যবহার করা হয়।
Projection.fromPointToLatLng() পদ্ধতি একটি বিশ্ব স্থানাঙ্ককে একটি LatLng মানতে রূপান্তর করে। এই পদ্ধতিটি ম্যাপে ঘটে যাওয়া ক্লিকের মতো ঘটনাগুলিকে ভৌগলিক স্থানাঙ্কে রূপান্তর করতে ব্যবহৃত হয়।

Google মানচিত্র অনুমান করে যে অনুমানগুলি রেকটিলিয়ার।

সাধারণত, আপনি দুটি ক্ষেত্রে একটি অভিক্ষেপ ব্যবহার করতে পারেন: বিশ্বের একটি মানচিত্র তৈরি করতে, অথবা একটি স্থানীয় এলাকার মানচিত্র তৈরি করতে৷ পূর্বের ক্ষেত্রে, আপনাকে নিশ্চিত করতে হবে যে আপনার প্রক্ষেপণটিও সমস্ত দ্রাঘিমাংশে রেকটিলিয়ার এবং স্বাভাবিক। কিছু অনুমান (বিশেষত শঙ্কু অভিক্ষেপ) "স্থানীয়ভাবে স্বাভাবিক" (অর্থাৎ উত্তর বিন্দু) হতে পারে কিন্তু প্রকৃত উত্তর থেকে বিচ্যুত হয়; উদাহরণস্বরূপ, কিছু রেফারেন্স দ্রাঘিমাংশের সাপেক্ষে মানচিত্রটি আরও অবস্থান করে। আপনি স্থানীয়ভাবে এই ধরনের একটি অভিক্ষেপ ব্যবহার করতে পারেন, কিন্তু সচেতন থাকুন যে অভিক্ষেপটি অগত্যা অশুদ্ধ এবং রূপান্তর ত্রুটিগুলি স্পষ্টতই আপনি যে রেফারেন্স দ্রাঘিমাংশ থেকে বিচ্যুত হবেন তার থেকে আরও দূরে হয়ে যাবে।

অভিক্ষেপে মানচিত্র টাইল নির্বাচন

অনুমানগুলি কেবল অবস্থান বা ওভারলেগুলির অবস্থান নির্ধারণের জন্যই কার্যকর নয়, তবে মানচিত্রের টাইলগুলির অবস্থান নির্ধারণের জন্যও কার্যকর। Maps JavaScript API একটি MapType ইন্টারফেস ব্যবহার করে বেস ম্যাপ রেন্ডার করে, যা অবশ্যই মানচিত্রের অভিক্ষেপ সনাক্তকরণের জন্য একটি projection সম্পত্তি এবং টাইল সমন্বয় মানগুলির উপর ভিত্তি করে মানচিত্র টাইলগুলি পুনরুদ্ধার করার জন্য একটি getTile() পদ্ধতি উভয়ই ঘোষণা করতে হবে৷ টাইল স্থানাঙ্কগুলি আপনার মৌলিক টাইল আকার (যা আয়তক্ষেত্রাকার হতে হবে) এবং আপনার মানচিত্রের "বিশ্বের আকার" উভয়ের উপর ভিত্তি করে, যা জুম স্তর 0 এ আপনার মানচিত্রের বিশ্বের পিক্সেল আকার। (জুম 0 এ একটি টাইল সমন্বিত মানচিত্রের জন্য , টাইলের আকার এবং বিশ্বের আকার অভিন্ন।)

আপনি আপনার MapType এর tileSize সম্পত্তির মধ্যে বেস টাইলের আকার নির্ধারণ করুন। আপনি আপনার প্রজেকশনের fromLatLngToPoint() এবং fromPointToLatLng() পদ্ধতির মধ্যে অন্তর্নিহিতভাবে বিশ্বের আকার সংজ্ঞায়িত করেন।

যেহেতু ছবি নির্বাচন এই পাস করা মানগুলির উপর নির্ভর করে, map _ zoom _ tileX _ tileY .png মতো এই পাস করা মানগুলিকে প্রোগ্রাম্যাটিকভাবে নির্বাচন করা যেতে পারে এমন ছবিগুলির নাম দেওয়া দরকারী।

নিম্নলিখিত উদাহরণটি গ্যাল-পিটার্স প্রজেকশন ব্যবহার করে একটি ImageMapType সংজ্ঞায়িত করে:

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

// This example defines an image map type using the Gall-Peters
// projection.
// https://en.wikipedia.org/wiki/Gall%E2%80%93Peters_projection

function initMap(): void {
  // Create a map. Use the Gall-Peters map type.
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 0,
      center: { lat: 0, lng: 0 },
      mapTypeControl: false,
    }
  );

  initGallPeters();
  map.mapTypes.set("gallPeters", gallPetersMapType);
  map.setMapTypeId("gallPeters");

  // Show the lat and lng under the mouse cursor.
  const coordsDiv = document.getElementById("coords") as HTMLElement;

  map.controls[google.maps.ControlPosition.TOP_CENTER].push(coordsDiv);
  map.addListener("mousemove", (event: google.maps.MapMouseEvent) => {
    coordsDiv.textContent =
      "lat: " +
      Math.round(event.latLng!.lat()) +
      ", " +
      "lng: " +
      Math.round(event.latLng!.lng());
  });

  // Add some markers to the map.
  map.data.setStyle((feature) => {
    return {
      title: feature.getProperty("name") as string,
      optimized: false,
    };
  });
  map.data.addGeoJson(cities);
}

let gallPetersMapType;

function initGallPeters() {
  const GALL_PETERS_RANGE_X = 800;
  const GALL_PETERS_RANGE_Y = 512;

  // Fetch Gall-Peters tiles stored locally on our server.
  gallPetersMapType = new google.maps.ImageMapType({
    getTileUrl: function (coord, zoom) {
      const scale = 1 << zoom;

      // Wrap tiles horizontally.
      const x = ((coord.x % scale) + scale) % scale;

      // Don't wrap tiles vertically.
      const y = coord.y;

      if (y < 0 || y >= scale) return "";

      return (
        "https://developers.google.com/maps/documentation/" +
        "javascript/examples/full/images/gall-peters_" +
        zoom +
        "_" +
        x +
        "_" +
        y +
        ".png"
      );
    },
    tileSize: new google.maps.Size(GALL_PETERS_RANGE_X, GALL_PETERS_RANGE_Y),
    minZoom: 0,
    maxZoom: 1,
    name: "Gall-Peters",
  });

  // Describe the Gall-Peters projection used by these tiles.
  gallPetersMapType.projection = {
    fromLatLngToPoint: function (latLng) {
      const latRadians = (latLng.lat() * Math.PI) / 180;
      return new google.maps.Point(
        GALL_PETERS_RANGE_X * (0.5 + latLng.lng() / 360),
        GALL_PETERS_RANGE_Y * (0.5 - 0.5 * Math.sin(latRadians))
      );
    },
    fromPointToLatLng: function (point, noWrap) {
      const x = point.x / GALL_PETERS_RANGE_X;
      const y = Math.max(0, Math.min(1, point.y / GALL_PETERS_RANGE_Y));

      return new google.maps.LatLng(
        (Math.asin(1 - 2 * y) * 180) / Math.PI,
        -180 + 360 * x,
        noWrap
      );
    },
  };
}

// GeoJSON, describing the locations and names of some cities.
const cities = {
  type: "FeatureCollection",
  features: [
    {
      type: "Feature",
      geometry: { type: "Point", coordinates: [-87.65, 41.85] },
      properties: { name: "Chicago" },
    },
    {
      type: "Feature",
      geometry: { type: "Point", coordinates: [-149.9, 61.218] },
      properties: { name: "Anchorage" },
    },
    {
      type: "Feature",
      geometry: { type: "Point", coordinates: [-99.127, 19.427] },
      properties: { name: "Mexico City" },
    },
    {
      type: "Feature",
      geometry: { type: "Point", coordinates: [-0.126, 51.5] },
      properties: { name: "London" },
    },
    {
      type: "Feature",
      geometry: { type: "Point", coordinates: [28.045, -26.201] },
      properties: { name: "Johannesburg" },
    },
    {
      type: "Feature",
      geometry: { type: "Point", coordinates: [15.322, -4.325] },
      properties: { name: "Kinshasa" },
    },
    {
      type: "Feature",
      geometry: { type: "Point", coordinates: [151.207, -33.867] },
      properties: { name: "Sydney" },
    },
    {
      type: "Feature",
      geometry: { type: "Point", coordinates: [0, 0] },
      properties: { name: "0°N 0°E" },
    },
  ],
};

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;index.ts

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

// This example defines an image map type using the Gall-Peters
// projection.
// https://en.wikipedia.org/wiki/Gall%E2%80%93Peters_projection
function initMap() {
  // Create a map. Use the Gall-Peters map type.
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 0,
    center: { lat: 0, lng: 0 },
    mapTypeControl: false,
  });

  initGallPeters();
  map.mapTypes.set("gallPeters", gallPetersMapType);
  map.setMapTypeId("gallPeters");

  // Show the lat and lng under the mouse cursor.
  const coordsDiv = document.getElementById("coords");

  map.controls[google.maps.ControlPosition.TOP_CENTER].push(coordsDiv);
  map.addListener("mousemove", (event) => {
    coordsDiv.textContent =
      "lat: " +
      Math.round(event.latLng.lat()) +
      ", " +
      "lng: " +
      Math.round(event.latLng.lng());
  });
  // Add some markers to the map.
  map.data.setStyle((feature) => {
    return {
      title: feature.getProperty("name"),
      optimized: false,
    };
  });
  map.data.addGeoJson(cities);
}

let gallPetersMapType;

function initGallPeters() {
  const GALL_PETERS_RANGE_X = 800;
  const GALL_PETERS_RANGE_Y = 512;

  // Fetch Gall-Peters tiles stored locally on our server.
  gallPetersMapType = new google.maps.ImageMapType({
    getTileUrl: function (coord, zoom) {
      const scale = 1 << zoom;
      // Wrap tiles horizontally.
      const x = ((coord.x % scale) + scale) % scale;
      // Don't wrap tiles vertically.
      const y = coord.y;

      if (y < 0 || y >= scale) return "";
      return (
        "https://developers.google.com/maps/documentation/" +
        "javascript/examples/full/images/gall-peters_" +
        zoom +
        "_" +
        x +
        "_" +
        y +
        ".png"
      );
    },
    tileSize: new google.maps.Size(GALL_PETERS_RANGE_X, GALL_PETERS_RANGE_Y),
    minZoom: 0,
    maxZoom: 1,
    name: "Gall-Peters",
  });
  // Describe the Gall-Peters projection used by these tiles.
  gallPetersMapType.projection = {
    fromLatLngToPoint: function (latLng) {
      const latRadians = (latLng.lat() * Math.PI) / 180;
      return new google.maps.Point(
        GALL_PETERS_RANGE_X * (0.5 + latLng.lng() / 360),
        GALL_PETERS_RANGE_Y * (0.5 - 0.5 * Math.sin(latRadians)),
      );
    },
    fromPointToLatLng: function (point, noWrap) {
      const x = point.x / GALL_PETERS_RANGE_X;
      const y = Math.max(0, Math.min(1, point.y / GALL_PETERS_RANGE_Y));
      return new google.maps.LatLng(
        (Math.asin(1 - 2 * y) * 180) / Math.PI,
        -180 + 360 * x,
        noWrap,
      );
    },
  };
}

// GeoJSON, describing the locations and names of some cities.
const cities = {
  type: "FeatureCollection",
  features: [
    {
      type: "Feature",
      geometry: { type: "Point", coordinates: [-87.65, 41.85] },
      properties: { name: "Chicago" },
    },
    {
      type: "Feature",
      geometry: { type: "Point", coordinates: [-149.9, 61.218] },
      properties: { name: "Anchorage" },
    },
    {
      type: "Feature",
      geometry: { type: "Point", coordinates: [-99.127, 19.427] },
      properties: { name: "Mexico City" },
    },
    {
      type: "Feature",
      geometry: { type: "Point", coordinates: [-0.126, 51.5] },
      properties: { name: "London" },
    },
    {
      type: "Feature",
      geometry: { type: "Point", coordinates: [28.045, -26.201] },
      properties: { name: "Johannesburg" },
    },
    {
      type: "Feature",
      geometry: { type: "Point", coordinates: [15.322, -4.325] },
      properties: { name: "Kinshasa" },
    },
    {
      type: "Feature",
      geometry: { type: "Point", coordinates: [151.207, -33.867] },
      properties: { name: "Sydney" },
    },
    {
      type: "Feature",
      geometry: { type: "Point", coordinates: [0, 0] },
      properties: { name: "0°N 0°E" },
    },
  ],
};

window.initMap = initMap;index.js

উদাহরণ দেখুন

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

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

মানচিত্র প্রকার

মৌলিক মানচিত্র প্রকার

45° চিত্র

45° চিত্রাবলী সক্ষম এবং অক্ষম করুন৷

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

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

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

45° চিত্র ঘোরান

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

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

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

ম্যাপ টাইপ রেজিস্ট্রি পরিবর্তন করুন

স্টাইল করা মানচিত্র

কাস্টম মানচিত্র প্রকার

MapType ইন্টারফেস

ভিত্তি মানচিত্র প্রকার

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

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

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

ওভারলে মানচিত্র প্রকার

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

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

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

চিত্র মানচিত্র প্রকার

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

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

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

অনুমান

একটি অভিক্ষেপ বাস্তবায়ন

অভিক্ষেপে রূপান্তর সমন্বয় করুন

অভিক্ষেপে মানচিত্র টাইল নির্বাচন

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

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

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

`MapType` ইন্টারফেস