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

मकसद

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

alt_text

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

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

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

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

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

लागू करना

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

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

एयर क्वालिटी एपीआई

- 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
  ...
  })
  ]
  • रास्ते के आस-पास मौजूद हैं: एयर क्वालिटी Tileलेयरdeck.glTripsLayer

किसी यात्रा के दौरान एयर क्वालिटी का हीटमैप

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 सलूशन इंजीनियर