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

मकसद

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

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: यूएस एयर क्वालिटी इंडेक्स का रंग पटल.

पोलन एपीआई

- 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;

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

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

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

    • एयर क्वालिटी Tileलेयर पर मास्क बनाने के लिए, 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
  ...
  })
  ]
  • रास्ते के आस-पास मौजूद हैं: एयर क्वालिटी 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 मैप के 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 की लेयर के लिए प्रॉप के तौर पर असाइन किए गए onClick इवेंट पर, Luma.gl लाइब्रेरी और इसके ReadPixelsToArray तरीके का इस्तेमाल किया जा सकता है.

पिक्सल की वैल्यू: आरजीबीए(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 मैप पर लोड करने से यह भी पक्का होता है कि इस्तेमाल की शर्तों का पालन किया जा रहा है
  • आपके इस्तेमाल के उदाहरण से मैच करने के लिए ऑप्टिमाइज़ किया गया
  • टाइल की वैल्यू देखें

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

आगे पढ़ने के लिए सुझाव:

योगदानकर्ता

मुख्य लेखक:

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