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

বিভিন্ন এলাকা ও রুটে বায়ুর গুণমান এবং পরাগরেণু

উদ্দেশ্য

বায়ুর গুণমান এবং পরাগরেণু এপিআইগুলো কোনো ভ্রমণ বা মানচিত্রে যেকোনো নির্দিষ্ট স্থান সম্পর্কে আরও গভীর তথ্য যোগ করার দারুণ সুযোগ দেয়। এই এপিআইগুলো থেকে প্রাপ্ত ডেটা ব্যবহারের দুটি উপায় রয়েছে: টেক্সট হিসেবে ইনডেক্স অথবা রাস্টার ইমেজ হিসেবে হিটম্যাপ টাইলস।

alt_text

হিটম্যাপ টাইলস এপিআই এন্ডপয়েন্টগুলো ব্যবহার করার সময়, স্বতন্ত্র রাস্টার টাইলস লোড করতে আপনি কয়েকটি সমস্যার সম্মুখীন হতে পারেন, যেমন:

ওয়েবে গুগল ম্যাপে টাইলসগুলো কীভাবে লোড করা যায়? (এছাড়াও এপিআই ব্যবহারের শর্তাবলী মেনে চলতে হবে)
অভিজ্ঞতা চলাকালীন অনুরোধের সংখ্যা কীভাবে পরিচালনা করবেন?
টাইলগুলোর মান কীভাবে পড়তে হয়?

নমুনা ব্যবহারের ক্ষেত্র

উপরোক্ত প্রশ্নগুলোর উত্তর খোঁজার জন্য আপনাকে কিছু নমুনা ব্যবহারিক উদাহরণ দেওয়া হবে।

কোনো এলাকার বায়ুর গুণমান ও পরাগরেণু: এক বা একাধিক কাস্টম পলিগনের অভ্যন্তরে হিটম্যাপ টাইলস (বর্তমান অবস্থা) এবং রাস্টার ডেটা ভিজ্যুয়ালাইজ করুন।
পথ বরাবর বায়ুর গুণমান ও পরাগরেণু: রুটের ওয়েপয়েন্টগুলিতে ম্যাপ করা রাস্টার ডেটার হিটম্যাপ টাইলস (বর্তমান অবস্থা) ভিজ্যুয়ালাইজ করুন।

বাস্তবায়ন

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

প্রকারভেদে উপলব্ধ হিটম্যাপ টাইলস

বায়ুর গুণমান এপিআই

- UAQI_RED_GREEN (UAQI, লাল-সবুজ প্যালেট): সার্বজনীন বায়ু গুণমান সূচকের লাল-সবুজ প্যালেট।
- UAQI_INDIGO_PERSIAN (UAQI, ইন্ডিগো-পার্সিয়ান প্যালেট): সার্বজনীন বায়ু গুণমান সূচক ইন্ডিগো-পার্সিয়ান প্যালেট।
- PM25_INDIGO_PERSIAN: পিএম২.৫ ইনডেক্স ইন্ডিগো-পার্সিয়ান প্যালেট।
- GBR_DEFRA: দৈনিক বায়ু গুণমান সূচক (যুক্তরাজ্য) রঙের প্যালেট।
- DEU_UBA: জার্মান স্থানীয় বায়ুর গুণমান সূচকের রঙের প্যালেট।
- CAN_EC: কানাডিয়ান এয়ার কোয়ালিটি হেলথ ইনডেক্স-এর কালার প্যালেট।
- FRA_ATMO: ফ্রান্সের বায়ুর গুণমান সূচকের রঙের প্যালেট।
- US_AQI: মার্কিন বায়ুর গুণমান সূচকের রঙের প্যালেট।

পরাগরেণু এপিআই

- TREE_UP: হিটম্যাপ টাইপটি একটি বৃক্ষ সূচক গ্রাফিক্যাল মানচিত্র উপস্থাপন করবে।
- GRASS_UPI: হিটম্যাপের ধরণটি একটি ঘাস সূচক গ্রাফিক্যাল মানচিত্র উপস্থাপন করবে।
- WEED_UPI: হিটম্যাপের ধরণটি একটি আগাছা সূচকের গ্রাফিক মানচিত্র উপস্থাপন করবে।

ওয়েবে হিটম্যাপ টাইলস প্রদর্শন করুন

টাইলগুলো লোড করুন এবং ম্যাপের ভিউপোর্টের শুধুমাত্র কাঙ্ক্ষিত এলাকাগুলো প্রদর্শন করতে একটি ভেক্টর মাস্ক প্রয়োগ করুন।

টাইলস লোড করা হচ্ছে

গুগল বেসম্যাপ লোড করতে Maps JavaScript API ব্যবহার করুন এবং রাস্টার টাইল ইমেজ লোড করার প্রস্তুতি হিসেবে deckgl লাইব্রেরি লোড করুন।
বায়ুর গুণমান হিটম্যাপ টাইলস লোড করতে deck.gl TileLayer ব্যবহার করুন। এটি হিটম্যাপ টাইলসের উপরে গুগল ম্যাপস বেসম্যাপ লেবেল প্রদর্শন করবে ( ম্যাপস জাভাস্ক্রিপ্ট কাস্টম ওভারলেগুলির থেকে ভিন্ন)।

import { TileLayer } from "deck.gl";
import { GoogleMapsOverlay } from "@deck.gl/google-maps";

// const TileLayer = deck.TileLayer;
// const GoogleMapsOverlay = deck.GoogleMapsOverlay;

// Initialize and add the map
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: 40, lng: -110 },
    zoom: 4,
  });

  const apiKey = 'YOUR_API_KEY';
 const airqualityType = 'UAQI_RED_GREEN' // AirQuality API heatmap type
  const deckOverlay = new GoogleMapsOverlay({
    layers: [
       // Heatmap Tiles layer
new TileLayer({
    id: 'heatmap-tiles',
    data: 'https://airquality.googleapis.com/v1/mapTypes/'+ heatmapType + +'/heatmapTiles/{z}/{x}/{y}?key=' + apiKey,
...
 })
    ],
  });

  deckOverlay.setMap(map);
}

window.initMap = initMap;

একটি ভেক্টর মাস্ক প্রয়োগ করা

আপনি হিটম্যাপ টাইলগুলির যেকোনো অংশ দৃশ্যত লুকাতে বা দেখাতে পারেন। গুরুত্বপূর্ণ: হিটম্যাপ টাইলগুলিতে প্রয়োগ করা ভেক্টর মাস্ক তৈরি করতে যে ডেটা ব্যবহার করা হবে, তা আপনাকে সংগ্রহ করতে হবে।

একটি এলাকায়:

Air Quality TileLayer-এর উপর একটি মাস্ক তৈরি করতে deck.gl GeoJson ব্যবহার করুন।

alt_text

নিচের উদাহরণটিতে ফ্রান্সের একটি মাল্টিপলিগন জিওজেসন ব্যবহার করা হয়েছে।

// geojson sample

{  "type": "Feature",
  "geometry": {
    "type": "MultiPolygon",
    "coordinates": [[[[-54.111527,2.11427],...[-54.194491,2.163073]]]]
  },
  "properties": {
    "name": "France"
  }
}

deckgl ইমপ্লিমেন্টেশনের জন্য এখানে একটি রেফারেন্স দেওয়া হল:

  // Loaded layers in maps overlay
  const deckOverlay = new GoogleMapsOverlay({ layers: layers });
  const MaskExtension = deck.MaskExtension; // or import extension
  ...

  // As part of object containing the different layers
  const layers = [
    // Masking layer
  new GeoJsonLayer({
    id: 'country-vector',
    operation: 'mask',
    data: "geojson.json", // <-- any custom geometry
  })
  ...
  ...

  // Heatmap Tiles layer
  new TileLayer({
      id: 'heatmap-tiles',
      maskId: 'country-vector', // <-- same as mask id
    extensions: [new MaskExtension()],  // <-- enable mask extension
  ...
  })
  ]

একটি পথ বরাবর: বায়ুর গুণমান টাইললেয়ারের উপর একটি মাস্ক তৈরি করতে deck.gl এবং এর TripsLayer ব্যবহার করুন।

ভ্রমণের সময় বায়ুর গুণমান হিটম্যাপ টাইল

alt_text

এপিআই অনুরোধ এবং খরচ পরিচালনা করুন

যদিও ব্রাউজারের ডিফল্ট আচরণ সাধারণত একই সেশনের মধ্যে লোড হওয়া সমস্ত টাইলকে লোকাল স্টোরেজে ক্যাশ করে রাখে, আপনি এটিকে আরও অপ্টিমাইজ করতে পারেন:

লোডিং এলাকা সীমাবদ্ধ করুন: একটি বাউন্ডিং বক্স (লাল রঙে) তৈরি করুন এবং এটিকে লেয়ারে যুক্ত করুন, যেকোনো জুম লেভেলে শুধুমাত্র বাউন্ডিং বক্সটি আবৃতকারী হিটম্যাপ টাইলগুলোই (নীল রঙে) লোড হবে।

বাউন্ডিং বক্স (লাল রঙে), হিটম্যাপ টাইলস (নীল রঙে)

alt_text

 // Heatmap Tile layer
 new TileLayer({
    id: 'heatmap-tiles',
    extent: [minX, minY, maxX, maxY] // bounding box: southwest lat, southwest lng, northeast lat, northeast lng
    ...
 })

যেকোনো জুম লেভেলে সম্পূর্ণ ভিউপোর্ট জুড়ে ভিজ্যুয়াল ডিসপ্লে টাইলের আকার সেট করুন; প্রস্তাবিত: ২৫৬ থেকে ১০২৪-এর মধ্যে।
গুরুত্বপূর্ণ: এপিআই টাইলগুলি 256x256 রেজোলিউশনেই থাকে, কিন্তু ভিজ্যুয়াল ডিসপ্লে অ্যাডজাস্টমেন্ট আপনাকে সম্পূর্ণ ম্যাপ ভিউপোর্টটি কভার করার জন্য টাইল রিকোয়েস্টের সংখ্যা বাড়াতে/কমাতে দেবে।
(নিশ্চিত করুন যে এটি গুগল ম্যাপের minZoom এবং maxZoom- এর সাথে সামঞ্জস্যপূর্ণ, যেমন: tilesize:1024 ব্যবহার করলে জুম ০ বা ১-এর টাইলস লোড হবে না)।

২৫৬x২৫৬ পিক্সেল বনাম ৫১২x৫১২ পিক্সেল টাইলস সহ ভিউপোর্ট

alt_text

    // Heatmap Tile layer
    new TileLayer({
        id: 'heatmap-tiles',
        tilesize:256, // <-- change to 512 for instance
        ...
    })

পিক্সেল মান পড়ুন

সতর্কীকরণ: আপনি এয়ার কোয়ালিটি বা পোলেন এপিআই টাইলগুলিতে থাকা হিটম্যাপ টাইলগুলি অথবা স্বতন্ত্র পিক্সেল থেকে পঠিত যেকোনো মান ১ ঘন্টার জন্য (অনির্দিষ্টকালের জন্য নয়) পড়তে এবং ক্যাশ করতে পারবেন। আপনার ইমপ্লিমেন্টেশন যাচাই করার জন্য '১৬ এয়ার কোয়ালিটি এপিআই' বিভাগে বিস্তারিত এপিআই-এর নির্দিষ্ট শর্তাবলী দেখুন।

একটি রঙের স্কেলে সংশ্লিষ্ট মান প্রদর্শন করতে

deck.gl লেয়ারে প্রপ হিসেবে অ্যাসাইন করা onClick ইভেন্টে আপনি Luma.gl লাইব্রেরি এবং এর readPixelsToArray মেথডটি ব্যবহার করতে পারেন।

পিক্সেল মান: rgba(128,0,0,255)

alt_text

নিম্ন alt_text উচ্চ

  // Uint8Array pixel sample
  import { readPixelsToArray } from "@luma.gl/core";
  ...

  // assign on the TileLayer
  new TileLayer({
      id: 'heatmap-tiles',
  ...
    onClick: ({
    bitmap,
    layer
  }) => {
    if (bitmap) {
      const pixel = readPixelsToArray(layer.props.image, {
        sourceX: bitmap.pixel[0],
        sourceY: bitmap.pixel[1],
        sourceWidth: 1,
        sourceHeight: 1
      });
      // console.log("color picked:"+ pixel);
    }
  }
  })

উপসংহার

আপনি জানতে পেরেছেন যে বায়ুর গুণমান এবং পরাগের হিটম্যাপ টাইলস এপিআই এন্ডপয়েন্টগুলো কেমন হতে পারে:

ওয়েবে গুগল ম্যাপে লোড করা এবং ব্যবহারের শর্তাবলীর সাথে সঙ্গতি নিশ্চিত করা।
আপনার ব্যবহারের ক্ষেত্র অনুযায়ী অপ্টিমাইজ করা হয়েছে
টাইলগুলির মান পড়ুন

পরবর্তী পদক্ষেপ

আরও পড়ার জন্য পরামর্শ:

এয়ার কোয়ালিটি এপিআই ব্যবহার করে স্থানসমূহের জন্য বায়ুর গুণমান সম্পর্কে সচেতনতা

অবদানকারীরা

প্রধান লেখকগণ:

টমাস অ্যাংলারেট | গুগল ম্যাপস প্ল্যাটফর্ম সলিউশনস ইঞ্জিনিয়ার