एयर क्वालिटी और पराग की टाइलें

मकसद

एयर क्वालिटी और पराग एपीआई, किसी भी जगह की यात्रा या मैप में ज़्यादा अहम जानकारी जोड़ने के बेहतरीन अवसर देते हैं. इन एपीआई से मिलने वाले डेटा को दो तरीकों से इस्तेमाल किया जा सकता है: टेक्स्ट के तौर पर इंडेक्स करना या हीटमैप टाइल को रास्टर इमेज के तौर पर इस्तेमाल करना.

alt_text

हीटमैप टाइल एपीआई एंडपॉइंट का इस्तेमाल करते समय, आपको अलग-अलग रास्टर टाइल लोड करने में कुछ समस्याएं आ सकती हैं. जैसे:

  • वेब पर Google मैप पर टाइलें कैसे लोड करें? (साथ ही, एपीआई के इस्तेमाल की शर्तों का पालन करने के लिए)
  • एक्सपेरिमेंट के दौरान, अनुरोधों की संख्या को कैसे मैनेज किया जाए?
  • टाइल की वैल्यू को कैसे पढ़ा जाता है?

सैंपल के तौर पर दिए गए इस्तेमाल के उदाहरण

ऊपर दिए गए सवालों के जवाब देने के लिए, आपको इस्तेमाल के उदाहरण दिखाए जाएंगे.

  • किसी इलाके में एयर क्वालिटी और पराग कणों की जानकारी:एक या एक से ज़्यादा कस्टम पॉलीगॉन में, हीटमैप टाइल (मौजूदा स्थिति) का रास्टर डेटा विज़ुअलाइज़ करें.
  • रास्ते में हवा की क्वालिटी और पराग: रास्ते के वेपॉइंट पर मैप किए गए रास्टर डेटा के हीटमैप टाइल (मौजूदा स्थितियां) को विज़ुअलाइज़ करें.

लागू करना

आपको पता चलेगा कि कौनसी टाइलें उपलब्ध हैं और उन्हें वेब पर कैसे लोड किया जा सकता है. आपको यह भी पता चलेगा कि मैप पर टाइल लोड होने की स्थिति में, अनुरोधों की संख्या को मैनेज करने के लिए क्या किया जा सकता है. आखिर में, आपको टाइलें पढ़ने का तरीका बताया जाएगा.

टाइप के हिसाब से उपलब्ध हीटमैप टाइल

Air Quality API

- UAQI_RED_GREEN (UAQI, लाल-हरे रंग का पैलेट): यूनिवर्सल एयर क्वालिटी इंडेक्स का लाल-हरे रंग का पैलेट.
- UAQI_INDIGO_PERSIAN (UAQI, indigo-persian palette): यूनिवर्सल एयर क्वालिटी इंडेक्स का इंडिगो-पर्शियन पैलेट.
- PM25_INDIGO_PERSIAN: PM2.5 इंडेक्स इंडिगो-पर्शियन पैलेट.
- GBR_DEFRA: यूनाइटेड किंगडम के लिए, डेली एयर क्वालिटी इंडेक्स का कलर पैलेट.
- DEU_UBA: जर्मन लोकल एयर क्वालिटी इंडेक्स की कलर पैलेट.
- CAN_EC: Canadian Air Quality Health Index color palette.
- FRA_ATMO: फ़्रांस के एयर क्वालिटी इंडेक्स का कलर पैलेट.
- US_AQI: यूएस एयर क्वालिटी इंडेक्स का कलर पैलेट.

Pollen API

- TREE_UP: हीटमैप टाइप, ट्री इंडेक्स ग्राफ़िकल मैप को दिखाएगा.
- GRASS_UPI: हीटमैप टाइप, ग्रास इंडेक्स ग्राफ़िकल मैप को दिखाएगा.
- WEED_UPI: हीटमैप का टाइप, खरपतवार इंडेक्स को ग्राफ़िकल मैप के तौर पर दिखाएगा.

वेब पर हीटमैप टाइल दिखाना

टाइल लोड करें और वेक्टर मास्क लागू करें, ताकि मैप के व्यूपोर्ट के सिर्फ़ पसंदीदा हिस्से दिखें.

टाइल लोड हो रही हैं

  • Google के बेस मैप को लोड करने के लिए, Maps JavaScript API का इस्तेमाल करें. साथ ही, रास्टर टाइल इमेज लोड करने के लिए, deckgl लाइब्रेरी लोड करें.
  • एयर क्वालिटी हीटमैप टाइल लोड करने के लिए, deck.gl TileLayer का इस्तेमाल करें. इससे, Google Maps के बेसमैप लेबल, हीटमैप टाइल के ऊपर दिखेंगे. हालांकि, Maps JavaScript की कस्टम ओवरले सुविधा में ऐसा नहीं होता

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;

वेक्टर मास्क लागू करना

हीटमैप टाइल के किसी भी हिस्से को विज़ुअल तौर पर छिपाया या दिखाया जा सकता है. अहम जानकारी: आपको उस डेटा को इकट्ठा करना होगा जिसका इस्तेमाल, हीटमैप टाइल पर लागू किया गया वेक्टर मास्क बनाने के लिए किया जाएगा.

  • किसी इलाके में:

    • एयर क्वालिटी TileLayer पर Mask बनाने के लिए, deck.gl GeoJson का इस्तेमाल करें.

alt_text

यहां दिए गए उदाहरण में, फ़्रांस के मल्टीपॉलीगॉन 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 का इस्तेमाल करके, एयर क्वालिटी के TileLayer पर मास्क बनाएं

यात्रा के ऊपर एयर क्वालिटी का हीटमैप टाइल

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
    ...
 })
  • विज़ुअल डिसप्ले टाइल का साइज़ इस तरह सेट करें कि वह ज़ूम करने के किसी भी लेवल पर पूरे व्यूपोर्ट को कवर करे. हमारा सुझाव है कि साइज़ 256 से 1024 के बीच रखें.

    अहम जानकारी: एपीआई टाइलें 256x256 रिज़ॉल्यूशन पर बनी रहती हैं. हालांकि, विज़ुअल डिसप्ले में बदलाव करने की सुविधा की मदद से, पूरे मैप व्यूपोर्ट को कवर करने के लिए टाइल के अनुरोधों की संख्या बढ़ाई या घटाई जा सकती है

    (पक्का करें कि यह Google मैप के minZoom और maxZoom के साथ काम करता हो. जैसे: tilesize:1024 , ज़ूम 0 या 1 पर टाइल लोड नहीं करेगा).

256x256 पिक्सल बनाम 512x512 पिक्सल टाइल वाले व्यूपोर्ट की इमेज

alt_text alt_text 



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

पिक्सल की वैल्यू पढ़ना

कलर स्केल पर उससे जुड़ी वैल्यू दिखाने के लिए

Luma.gl लाइब्रेरी और उसके readPixelsToArray तरीके का इस्तेमाल किया जा सकता है. इसके लिए, deck.gl लेयर को prop के तौर पर असाइन किए गए onClick इवेंट का इस्तेमाल करें.

पिक्सल की वैल्यू: 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);
    }
  }
  })

नतीजा

आपने जाना कि एयर क्वालिटी और पराग के हीटमैप टाइल एपीआई एंडपॉइंट को कैसे:

  • वेब पर Google Maps पर लोड किया गया हो. साथ ही, यह पक्का किया गया हो कि वह इस्तेमाल की शर्तों के मुताबिक हो
  • आपकी ज़रूरत के हिसाब से ऑप्टिमाइज़ किया गया हो
  • टाइल की वैल्यू पढ़ें

अगली कार्रवाइयां

इस बारे में और पढ़ें:

योगदानकर्ता

मुख्य लेखक:

थॉमस ऐंगलरेट | Google Maps Platform के सलूशन इंजीनियर