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

मकसद

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

alt_text

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

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

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

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

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

लागू करना

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

अलग-अलग तरह की हीटमैप टाइल

Air Quality API

- UAQI_RED_GREEN (UAQI, लाल-हरा पैलेट): यूनिवर्सल एयर क्वालिटी इंडेक्स का लाल-हरा पैलेट.
- UAQI_INDIGO_PERSIAN (UAQI, इंडिगो-पर्शियन पैलेट): यूनिवर्सल एयर क्वालिटी इंडेक्स इंडिगो-पर्शियन पैलेट.
- PM25_INDIGO_PERSIAN: PM2.5 इंडेक्स इंडिगो-पर्शियन पैलेट.
- GBR_DEFRA: डेली एयर क्वालिटी इंडेक्स (यूके) का कलर पैलेट.
- DEU_UBA: जर्मन लोकल एयर क्वालिटी इंडेक्स का कलर पैलेट.
- CAN_EC: कनाडा के एयर क्वालिटी हेल्थ इंडेक्स का कलर पैलेट.
- 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;

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

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

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

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

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

    (पक्का करें कि यह Google Maps के 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
        ...
    })

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

कलर स्केल पर मिलती-जुलती वैल्यू दिखाने के लिए

deck.gl लेयर के लिए प्रॉप के तौर पर असाइन किए गए क्लिक करने पर होने वाले इवेंट के बाद, 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);
    }
  }
  })

नतीजा

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

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

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

इस बारे में और जानने के लिए, ये लेख पढ़ें:

योगदानकर्ता

मुख्य लेखक:

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