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

উদ্দেশ্য

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

হিটম্যাপ টাইলস API-এর এন্ডপয়েন্ট ব্যবহার করার সময়, পৃথক রাস্টার টাইলস লোড করার সময় আপনি কয়েকটি চ্যালেঞ্জের সম্মুখীন হতে পারেন যেমন:

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

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

উপরের প্রশ্নের উত্তর দেওয়ার চেষ্টা করার জন্য আপনাকে নমুনা ব্যবহারের উদাহরণ উপস্থাপন করা হবে।

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

বাস্তবায়ন

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

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

বায়ুর গুণমান API

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

পরাগ API

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

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

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

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

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

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;

ভেক্টর মাস্ক প্রয়োগ করা হচ্ছে

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

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

deck.gl GeoJson ব্যবহার করে এয়ার কোয়ালিটি টাইললেয়ারের উপর একটি মাস্ক তৈরি করুন ।

নীচের উদাহরণটি ফ্রান্সের একটি বহুবচন জিওজসন ব্যবহার করছে

// 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 ব্যবহার করে এয়ার কোয়ালিটি টাইললেয়ারের উপর একটি মাস্ক তৈরি করুন

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

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

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

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

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

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

• যেকোনো জুম লেভেলে পুরো ভিউপোর্ট কভার করার জন্য ভিজ্যুয়াল ডিসপ্লে টাইলের আকার সেট করুন; প্রস্তাবিত: 256 থেকে 1024 এর মধ্যে।

  গুরুত্বপূর্ণ: API গুলির টাইলস 256x256 রেজোলিউশনে থাকে কিন্তু ভিজ্যুয়াল ডিসপ্লে অ্যাডজাস্টমেন্ট আপনাকে পুরো মানচিত্রটি কভার করার জন্য টাইলসের অনুরোধের সংখ্যা বাড়াতে/কমাতে সাহায্য করবে ভিউপোর্ট

  (নিশ্চিত করুন যে এটি গুগল ম্যাপের minZoom এবং maxZoom এর সাথে কাজ করে, অর্থাৎ: tilesize:1024 জুম 0 বা 1 এ টাইলস লোড করবে না)।

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

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

টিপস: রিফাইন লেয়ার টাইল রেন্ডার সেটিং রিফাইনমেন্টের সাথে করুন। কৌশল: টাইলসের মধ্যে দৃশ্যমান সংঘর্ষ এড়াতে 'সেরা-উপলব্ধ' এর উপর 'নো-ওভারল্যাপ' ব্যবহার করুন।

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

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

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

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

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

কম উচ্চ

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

উপসংহার

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

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

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

আরও পড়ার পরামর্শ দেওয়া হচ্ছে:

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

অবদানকারীরা

প্রধান লেখক:

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