হিটম্যাপ স্তর

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

1. ওভারভিউ
2. ভিজ্যুয়ালাইজেশন লাইব্রেরি লোড করুন
3. ওজনযুক্ত ডেটা পয়েন্ট যোগ করুন
4. একটি হিটম্যাপ স্তর কাস্টমাইজ করুন

হিটম্যাপ লেয়ারটি হিটম্যাপের ক্লায়েন্ট সাইড রেন্ডারিং প্রদান করে।

ওভারভিউ

একটি হিটম্যাপ হল একটি ভিজ্যুয়ালাইজেশন যা ভৌগলিক পয়েন্টগুলিতে ডেটার তীব্রতা চিত্রিত করতে ব্যবহৃত হয়। যখন হিটম্যাপ স্তর সক্রিয় করা হয়, তখন মানচিত্রের উপরে একটি রঙিন ওভারলে প্রদর্শিত হবে। ডিফল্টরূপে, উচ্চতর তীব্রতার ক্ষেত্রগুলি লাল রঙের হবে, এবং নিম্ন তীব্রতার এলাকাগুলি সবুজ দেখাবে৷

ভিজ্যুয়ালাইজেশন লাইব্রেরি লোড করুন

হিটম্যাপ লেয়ারটি google.maps.visualization লাইব্রেরির অংশ, এবং ডিফল্টরূপে লোড হয় না। ভিজ্যুয়ালাইজেশন ক্লাসগুলি হল একটি স্বয়ংসম্পূর্ণ লাইব্রেরি, প্রধান মানচিত্র জাভাস্ক্রিপ্ট API কোড থেকে আলাদা৷ এই লাইব্রেরির মধ্যে থাকা কার্যকারিতা ব্যবহার করতে, আপনাকে প্রথমে মানচিত্র জাভাস্ক্রিপ্ট API বুটস্ট্র্যাপ URL-এ libraries প্যারামিটার ব্যবহার করে এটি লোড করতে হবে:

<script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&loading=async&libraries=visualization&callback=initMap">
</script>

একটি হিটম্যাপ স্তর যোগ করুন

একটি হিটম্যাপ লেয়ার যোগ করতে, আপনাকে প্রথমে একটি নতুন HeatmapLayer অবজেক্ট তৈরি করতে হবে এবং এটিকে একটি অ্যারে বা একটি MVCArray[] অবজেক্টের আকারে কিছু ভৌগলিক ডেটা প্রদান করতে হবে। ডেটা হয় একটি LatLng অবজেক্ট বা একটি WeightedLocation অবজেক্ট হতে পারে। HeatmapLayer অবজেক্টটি ইনস্ট্যান্ট করার পরে, setMap() পদ্ধতিতে কল করে মানচিত্রে যোগ করুন।

নিম্নলিখিত উদাহরণটি সান ফ্রান্সিসকোর মানচিত্রে 14টি ডেটা পয়েন্ট যোগ করে।

/* Data points defined as an array of LatLng objects */
var heatmapData = [
  new google.maps.LatLng(37.782, -122.447),
  new google.maps.LatLng(37.782, -122.445),
  new google.maps.LatLng(37.782, -122.443),
  new google.maps.LatLng(37.782, -122.441),
  new google.maps.LatLng(37.782, -122.439),
  new google.maps.LatLng(37.782, -122.437),
  new google.maps.LatLng(37.782, -122.435),
  new google.maps.LatLng(37.785, -122.447),
  new google.maps.LatLng(37.785, -122.445),
  new google.maps.LatLng(37.785, -122.443),
  new google.maps.LatLng(37.785, -122.441),
  new google.maps.LatLng(37.785, -122.439),
  new google.maps.LatLng(37.785, -122.437),
  new google.maps.LatLng(37.785, -122.435)
];

var sanFrancisco = new google.maps.LatLng(37.774546, -122.433523);

map = new google.maps.Map(document.getElementById('map'), {
  center: sanFrancisco,
  zoom: 13,
  mapTypeId: 'satellite'
});

var heatmap = new google.maps.visualization.HeatmapLayer({
  data: heatmapData
});
heatmap.setMap(map);

ওজনযুক্ত ডেটা পয়েন্ট যোগ করুন

একটি হিটম্যাপ LatLng বা WeightedLocation অবজেক্ট বা দুটির সংমিশ্রণ রেন্ডার করতে পারে। উভয় বস্তুই একটি মানচিত্রে একটি একক ডেটা পয়েন্টকে উপস্থাপন করে, কিন্তু একটি WeightedLocation অবজেক্ট আপনাকে সেই ডেটা পয়েন্টের জন্য অতিরিক্ত একটি ওজন নির্দিষ্ট করতে দেয়। একটি ডেটা পয়েন্টে ওজন প্রয়োগ করা হলে WeightedLocation একটি সাধারণ LatLng বস্তুর চেয়ে বেশি তীব্রতার সাথে রেন্ডার করা হবে। ওজন হল একটি রৈখিক স্কেল, যেখানে প্রতিটি LatLng বস্তুর অন্তর্নিহিত ওজন রয়েছে 1 — {location: new google.maps.LatLng(37.782, -122.441), weight: 3} -এর একটি একক WeightedLocation যোগ করলে একই প্রভাব পড়বে google.maps.LatLng(37.782, -122.441) তিনবার যোগ করা হচ্ছে। আপনি একটি একক অ্যারেতে weightedLocation এবং LatLng বস্তুগুলিকে মিশ্রিত করতে পারেন।

একটি LatLng এর জায়গায় একটি WeightedLocation অবজেক্ট ব্যবহার করা দরকারী হতে পারে যখন:

• একক অবস্থানে প্রচুর পরিমাণে ডেটা যোগ করা। 1000 ওজন সহ একটি একক WeightedLocation অবজেক্ট রেন্ডার করা 1000 LatLng অবজেক্ট রেন্ডার করার চেয়ে দ্রুত হবে৷
• নির্বিচারে মানগুলির উপর ভিত্তি করে আপনার ডেটাতে জোর দেওয়া। উদাহরণস্বরূপ, ভূমিকম্পের ডেটা প্লট করার সময় আপনি LatLng বস্তুগুলি ব্যবহার করতে পারেন, তবে আপনি রিক্টার স্কেলে প্রতিটি ভূমিকম্পের মাত্রা পরিমাপ করতে একটি WeightedLocation ব্যবহার করতে চাইতে পারেন।

/* Data points defined as a mixture of WeightedLocation and LatLng objects */
var heatMapData = [
  {location: new google.maps.LatLng(37.782, -122.447), weight: 0.5},
  new google.maps.LatLng(37.782, -122.445),
  {location: new google.maps.LatLng(37.782, -122.443), weight: 2},
  {location: new google.maps.LatLng(37.782, -122.441), weight: 3},
  {location: new google.maps.LatLng(37.782, -122.439), weight: 2},
  new google.maps.LatLng(37.782, -122.437),
  {location: new google.maps.LatLng(37.782, -122.435), weight: 0.5},

  {location: new google.maps.LatLng(37.785, -122.447), weight: 3},
  {location: new google.maps.LatLng(37.785, -122.445), weight: 2},
  new google.maps.LatLng(37.785, -122.443),
  {location: new google.maps.LatLng(37.785, -122.441), weight: 0.5},
  new google.maps.LatLng(37.785, -122.439),
  {location: new google.maps.LatLng(37.785, -122.437), weight: 2},
  {location: new google.maps.LatLng(37.785, -122.435), weight: 3}
];

var sanFrancisco = new google.maps.LatLng(37.774546, -122.433523);

map = new google.maps.Map(document.getElementById('map'), {
  center: sanFrancisco,
  zoom: 13,
  mapTypeId: 'satellite'
});

var heatmap = new google.maps.visualization.HeatmapLayer({
  data: heatMapData
});
heatmap.setMap(map);

একটি হিটম্যাপ স্তর কাস্টমাইজ করুন

নিম্নলিখিত হিটম্যাপ বিকল্পগুলির সাথে আপনার হিটম্যাপ কীভাবে রেন্ডার করা হবে তা আপনি কাস্টমাইজ করতে পারেন। আরও তথ্যের জন্য HeatmapLayerOptions ডকুমেন্টেশন দেখুন।

• dissipating : জুমে হিটম্যাপ নষ্ট হয় কিনা তা নির্দিষ্ট করে। যখন অপসারণ মিথ্যা হয় তখন প্রভাবের ব্যাসার্ধ জুম স্তরের সাথে বৃদ্ধি পায় যাতে নিশ্চিত করা যায় যে কোনও নির্দিষ্ট ভৌগলিক অবস্থানে রঙের তীব্রতা সংরক্ষিত হয়। ডিফল্ট থেকে সত্য।
• gradient : হিটম্যাপের রঙের গ্রেডিয়েন্ট, CSS রঙের স্ট্রিংগুলির একটি অ্যারে হিসাবে নির্দিষ্ট করা হয়েছে। সমস্ত CSS3 রঙ — RGBA সহ — বর্ধিত নামযুক্ত রঙ এবং HSL(A) মান ব্যতীত সমর্থিত।
• maxIntensity : হিটম্যাপের সর্বাধিক তীব্রতা। ডিফল্টরূপে, হিটম্যাপের রঙগুলি মানচিত্রের যেকোনো নির্দিষ্ট পিক্সেলে বিন্দুর সর্বাধিক ঘনত্ব অনুসারে গতিশীলভাবে স্কেল করা হয়। এই সম্পত্তি আপনাকে একটি নির্দিষ্ট সর্বোচ্চ নির্দিষ্ট করার অনুমতি দেয়। সর্বাধিক তীব্রতা সেট করা সহায়ক হতে পারে যখন আপনার ডেটাসেটে অস্বাভাবিকভাবে উচ্চ তীব্রতা সহ কয়েকটি আউটলায়ার থাকে।
• radius : প্রতিটি ডেটা পয়েন্টের প্রভাবের ব্যাসার্ধ, পিক্সেলে।
• opacity : হিটম্যাপের অস্বচ্ছতা, 0 এবং 1 এর মধ্যে একটি সংখ্যা হিসাবে প্রকাশ করা হয়।

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

উদাহরণ দেখুন