40 KiB

Raw Permalink Blame History

स्थान डेटा का विज़ुअलाइज़ेशन

स्केच नोट नित्या नरसिम्हन द्वारा। बड़े संस्करण के लिए छवि पर क्लिक करें।

यह वीडियो Azure Maps और IoT का अवलोकन देता है, जो इस पाठ में कवर किया जाएगा।

🎥 वीडियो देखने के लिए ऊपर दी गई छवि पर क्लिक करें

व्याख्यान से पहले का क्विज़

परिचय

पिछले पाठ में आपने सीखा कि अपने सेंसर से GPS डेटा प्राप्त करके उसे सर्वरलेस कोड का उपयोग करके क्लाउड में स्टोरेज कंटेनर में कैसे सहेजें। अब आप यह जानेंगे कि उन बिंदुओं को Azure मानचित्र पर कैसे विज़ुअलाइज़ करें। आप सीखेंगे कि वेब पेज पर मानचित्र कैसे बनाएं, GeoJSON डेटा प्रारूप के बारे में जानें और इसे अपने मानचित्र पर सभी कैप्चर किए गए GPS बिंदुओं को प्लॉट करने के लिए कैसे उपयोग करें।

इस पाठ में हम कवर करेंगे:

💁 इस पाठ में HTML और JavaScript का थोड़ा उपयोग होगा। यदि आप HTML और JavaScript का उपयोग करके वेब विकास के बारे में अधिक जानना चाहते हैं, तो शुरुआती के लिए वेब विकास देखें।

डेटा विज़ुअलाइज़ेशन क्या है

डेटा विज़ुअलाइज़ेशन, जैसा कि नाम से पता चलता है, डेटा को इस तरह से विज़ुअलाइज़ करने के बारे में है जो मनुष्यों के लिए इसे समझना आसान बनाता है। यह आमतौर पर चार्ट और ग्राफ़ से जुड़ा होता है, लेकिन यह डेटा को चित्रात्मक रूप से प्रस्तुत करने का कोई भी तरीका है जो न केवल डेटा को बेहतर ढंग से समझने में मदद करता है, बल्कि निर्णय लेने में भी मदद करता है।

एक साधारण उदाहरण लेते हैं - फार्म प्रोजेक्ट में आपने मिट्टी की नमी के स्तर को कैप्चर किया था। 1 जून 2021 को हर घंटे कैप्चर किए गए मिट्टी की नमी के डेटा की एक तालिका कुछ इस प्रकार हो सकती है:

दिनांक	रीडिंग
01/06/2021 00:00	257
01/06/2021 01:00	268
01/06/2021 02:00	295
01/06/2021 03:00	305
01/06/2021 04:00	325
01/06/2021 05:00	359
01/06/2021 06:00	398
01/06/2021 07:00	410
01/06/2021 08:00	429
01/06/2021 09:00	451
01/06/2021 10:00	460
01/06/2021 11:00	452
01/06/2021 12:00	420
01/06/2021 13:00	408
01/06/2021 14:00	431
01/06/2021 15:00	462
01/06/2021 16:00	432
01/06/2021 17:00	402
01/06/2021 18:00	387
01/06/2021 19:00	360
01/06/2021 20:00	358
01/06/2021 21:00	354
01/06/2021 22:00	356
01/06/2021 23:00	362

एक इंसान के लिए इस डेटा को समझना मुश्किल हो सकता है। यह केवल संख्याओं की एक दीवार है जिसमें कोई अर्थ नहीं है। इस डेटा को विज़ुअलाइज़ करने के पहले चरण के रूप में, इसे एक लाइन चार्ट पर प्लॉट किया जा सकता है:

इसे और बेहतर बनाने के लिए एक रेखा जोड़ी जा सकती है जो यह दिखाती है कि स्वचालित सिंचाई प्रणाली कब मिट्टी की नमी के स्तर 450 पर चालू हुई:

यह चार्ट बहुत जल्दी दिखाता है कि मिट्टी की नमी का स्तर क्या था और सिंचाई प्रणाली कब चालू हुई।

चार्ट डेटा को विज़ुअलाइज़ करने का एकमात्र उपकरण नहीं हैं। IoT डिवाइस जो मौसम को ट्रैक करते हैं, वे वेब ऐप्स या मोबाइल ऐप्स का उपयोग कर सकते हैं जो मौसम की स्थिति को प्रतीकों के माध्यम से विज़ुअलाइज़ करते हैं, जैसे बादल वाले दिनों के लिए बादल का प्रतीक, बारिश वाले दिनों के लिए बारिश का बादल और इसी तरह। डेटा को विज़ुअलाइज़ करने के कई तरीके हैं, कुछ गंभीर, कुछ मज़ेदार।

✅ उन तरीकों के बारे में सोचें जिनसे आपने डेटा को विज़ुअलाइज़ होते देखा है। कौन से तरीके सबसे स्पष्ट थे और निर्णय लेने में सबसे तेज़ मदद की?

सबसे अच्छे विज़ुअलाइज़ेशन वे होते हैं जो मनुष्यों को जल्दी निर्णय लेने में मदद करते हैं। उदाहरण के लिए, औद्योगिक मशीनरी से संबंधित सभी प्रकार की रीडिंग दिखाने वाले गेज की दीवार को समझना कठिन हो सकता है, लेकिन जब कुछ गलत होता है तो एक चमकती लाल बत्ती इंसान को निर्णय लेने की अनुमति देती है। कभी-कभी सबसे अच्छा विज़ुअलाइज़ेशन एक चमकती बत्ती होती है!

GPS डेटा के साथ काम करते समय, सबसे स्पष्ट विज़ुअलाइज़ेशन डेटा को मानचित्र पर प्लॉट करना हो सकता है। उदाहरण के लिए, एक मानचित्र जो डिलीवरी ट्रकों को दिखाता है, एक प्रसंस्करण संयंत्र में काम करने वालों को यह देखने में मदद कर सकता है कि ट्रक कब आएंगे। यदि यह मानचित्र केवल ट्रकों की वर्तमान स्थिति की तस्वीरें दिखाने के बजाय ट्रक की सामग्री का भी संकेत देता है, तो संयंत्र में काम करने वाले तदनुसार योजना बना सकते हैं - यदि वे देखते हैं कि एक रेफ्रिजरेटेड ट्रक पास में है, तो वे फ्रिज में जगह तैयार कर सकते हैं।

मानचित्र सेवाएँ

मानचित्रों के साथ काम करना एक दिलचस्प अभ्यास है, और चुनने के लिए कई विकल्प हैं जैसे Bing Maps, Leaflet, Open Street Maps, और Google Maps। इस पाठ में, आप Azure Maps और उनके माध्यम से अपने GPS डेटा को प्रदर्शित करने के बारे में जानेंगे।

Azure Maps "भौगोलिक सेवाओं और SDKs का एक संग्रह है जो ताज़ा मानचित्र डेटा का उपयोग करके वेब और मोबाइल अनुप्रयोगों को भौगोलिक संदर्भ प्रदान करता है।" डेवलपर्स को सुंदर, इंटरैक्टिव मानचित्र बनाने के लिए उपकरण प्रदान किए जाते हैं जो ट्रैफ़िक मार्गों की सिफारिश करने, ट्रैफ़िक घटनाओं की जानकारी देने, इनडोर नेविगेशन, खोज क्षमताओं, ऊंचाई की जानकारी, मौसम सेवाओं और बहुत कुछ करने में सक्षम होते हैं।

✅ कुछ मानचित्र कोड नमूनों के साथ प्रयोग करें

आप मानचित्रों को एक खाली कैनवास, टाइल्स, उपग्रह छवियों, सड़कों के साथ उपग्रह छवियों, विभिन्न प्रकार के ग्रेस्केल मानचित्र, ऊंचाई दिखाने के लिए छायांकित राहत के साथ मानचित्र, रात दृश्य मानचित्र, और एक उच्च कंट्रास्ट मानचित्र के रूप में प्रदर्शित कर सकते हैं। आप Azure Event Grid के साथ एकीकृत करके अपने मानचित्रों पर वास्तविक समय अपडेट प्राप्त कर सकते हैं। आप मानचित्र को पिंच, ड्रैग और क्लिक जैसी घटनाओं पर प्रतिक्रिया देने की अनुमति देने के लिए विभिन्न नियंत्रण सक्षम करके इसके व्यवहार और रूप को नियंत्रित कर सकते हैं। अपने मानचित्र के रूप को नियंत्रित करने के लिए, आप बबल्स, लाइन्स, पॉलीगन्स, हीट मैप्स और अधिक सहित लेयर्स जोड़ सकते हैं। आप किस प्रकार का मानचित्र लागू करते हैं, यह आपके चुने गए SDK पर निर्भर करता है।

आप Azure Maps APIs तक इसकी REST API, इसके Web SDK, या, यदि आप एक मोबाइल ऐप बना रहे हैं, इसके Android SDK का उपयोग करके पहुंच सकते हैं।

इस पाठ में, आप वेब SDK का उपयोग करके एक मानचित्र खींचने और अपने सेंसर के GPS स्थान के पथ को प्रदर्शित करने का तरीका सीखेंगे।

Azure Maps संसाधन बनाएं

आपका पहला कदम एक Azure Maps खाता बनाना है।

कार्य - Azure Maps संसाधन बनाएं

अपने टर्मिनल या कमांड प्रॉम्प्ट से निम्नलिखित कमांड चलाएं ताकि gps-sensor संसाधन समूह में एक Azure Maps संसाधन बनाया जा सके:
```
az maps account create --name gps-sensor \
                       --resource-group gps-sensor \
                       --accept-tos \
                       --sku S1
```
यह gps-sensor नामक एक Azure Maps संसाधन बनाएगा। उपयोग किया जा रहा टियर S1 है, जो एक पेड टियर है जिसमें कई सुविधाएँ शामिल हैं, लेकिन मुफ्त में एक उदार मात्रा में कॉल्स के साथ।

💁 Azure Maps का उपयोग करने की लागत देखने के लिए, Azure Maps मूल्य निर्धारण पृष्ठ देखें।
आपको मानचित्र संसाधन के लिए एक API कुंजी की आवश्यकता होगी। इस कुंजी को प्राप्त करने के लिए निम्नलिखित कमांड का उपयोग करें:
```
az maps account keys list --name gps-sensor \
                          --resource-group gps-sensor \
                          --output table
```
PrimaryKey मान की एक प्रति लें।

वेब पेज पर मानचित्र दिखाएं

अब आप अगला कदम उठा सकते हैं, जो कि अपने मानचित्र को एक वेब पेज पर प्रदर्शित करना है। हम आपके छोटे वेब ऐप के लिए केवल एक html फ़ाइल का उपयोग करेंगे; ध्यान रखें कि उत्पादन या टीम वातावरण में, आपके वेब ऐप में अधिक भाग हो सकते हैं!

कार्य - वेब पेज पर मानचित्र दिखाएं

अपने स्थानीय कंप्यूटर पर कहीं एक फ़ोल्डर में index.html नामक एक फ़ाइल बनाएं। मानचित्र को होल्ड करने के लिए HTML मार्कअप जोड़ें:
```
<html>
<head>
    <style>
        #myMap {
            width:100%;
            height:100%;
        }
    </style>
</head>

<body onload="init()">
    <div id="myMap"></div>
</body>
</html>
```
मानचित्र myMap div में लोड होगा। कुछ स्टाइल इसे पेज की चौड़ाई और ऊंचाई तक फैलने की अनुमति देते हैं।

🎓 एक div वेब पेज का एक खंड है जिसे नामित और स्टाइल किया जा सकता है।
<head> टैग के नीचे, मानचित्र प्रदर्शन को नियंत्रित करने के लिए एक बाहरी स्टाइल शीट और इसके व्यवहार को प्रबंधित करने के लिए वेब SDK से एक बाहरी स्क्रिप्ट जोड़ें:
```
<link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.css" type="text/css" />
<script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.js"></script>
```
यह स्टाइल शीट मानचित्र के रूप को नियंत्रित करने के लिए सेटिंग्स रखती है, और स्क्रिप्ट फ़ाइल मानचित्र को लोड करने के लिए कोड रखती है। इस कोड को जोड़ना C++ हेडर फ़ाइलों को शामिल करने या Python मॉड्यूल आयात करने के समान है।
उस स्क्रिप्ट के नीचे, मानचित्र लॉन्च करने के लिए एक स्क्रिप्ट ब्लॉक जोड़ें।
```
<script type='text/javascript'>
    function init() {
        var map = new atlas.Map('myMap', {
            center: [-122.26473, 47.73444],
            zoom: 12,
            authOptions: {
                authType: "subscriptionKey",
                subscriptionKey: "<subscription_key>",

            }
        });
    }
</script>
```
<subscription_key> को अपने Azure Maps खाते की API कुंजी से बदलें।

यदि आप अपने index.html पेज को वेब ब्राउज़र में खोलते हैं, तो आपको एक मानचित्र लोड होता हुआ दिखाई देगा, जो सिएटल क्षेत्र पर केंद्रित है।

✅ अपने मानचित्र प्रदर्शन को बदलने के लिए ज़ूम और केंद्र पैरामीटर के साथ प्रयोग करें। आप अपने डेटा के अक्षांश और देशांतर के अनुरूप विभिन्न निर्देशांक जोड़ सकते हैं ताकि मानचित्र को पुनः केंद्रित किया जा सके।

💁 वेब ऐप्स के साथ स्थानीय रूप से काम करने का एक बेहतर तरीका http-server स्थापित करना है। आपको node.js और npm स्थापित करने की आवश्यकता होगी। एक बार ये उपकरण स्थापित हो जाने के बाद, आप अपने index.html फ़ाइल के स्थान पर नेविगेट कर सकते हैं और http-server टाइप कर सकते हैं। वेब ऐप एक स्थानीय वेब सर्वर http://127.0.0.1:8080/ पर खुलेगा।

GeoJSON प्रारूप

अब जब आपका वेब ऐप मानचित्र के साथ प्रदर्शित हो रहा है, तो आपको अपने स्टोरेज खाते से GPS डेटा निकालने और मानचित्र के ऊपर मार्करों की एक परत में प्रदर्शित करने की आवश्यकता है। इससे पहले कि हम ऐसा करें, आइए GeoJSON प्रारूप को देखें जो Azure Maps द्वारा अपेक्षित है।

GeoJSON एक ओपन स्टैंडर्ड JSON विनिर्देश है जिसमें विशेष प्रारूपण है जो भौगोलिक-विशिष्ट डेटा को संभालने के लिए डिज़ाइन किया गया है। आप geojson.io का उपयोग करके नमूना डेटा का परीक्षण करके इसके बारे में जान सकते हैं, जो GeoJSON फ़ाइलों को डिबग करने के लिए भी एक उपयोगी उपकरण है।

नमूना GeoJSON डेटा इस प्रकार दिखता है:

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [
          -2.10237979888916,
          57.164918677004714
        ]
      }
    }
  ]
}

विशेष रूप से ध्यान देने योग्य बात यह है कि डेटा FeatureCollection के भीतर एक Feature के रूप में नेस्टेड है। उस ऑब्जेक्ट के भीतर geometry है जिसमें coordinates अक्षांश और देशांतर को इंगित करता है।

✅ जब आप अपना GeoJSON बना रहे हों, तो ऑब्जेक्ट में latitude और longitude के क्रम पर ध्यान दें, अन्यथा आपके बिंदु वहां नहीं दिखाई देंगे जहां उन्हें होना चाहिए! GeoJSON बिंदुओं के लिए डेटा को lon,lat क्रम में अपेक्षित करता है, न कि lat,lon में।

Geometry के विभिन्न प्रकार हो सकते हैं, जैसे एकल बिंदु या बहुभुज। इस उदाहरण में, यह एक बिंदु है जिसमें दो निर्देशांक निर्दिष्ट हैं, देशांतर और अक्षांश। ✅ Azure Maps मानक GeoJSON का समर्थन करता है और कुछ उन्नत सुविधाएँ प्रदान करता है, जिनमें सर्कल और अन्य ज्यामितीय आकृतियाँ बनाने की क्षमता शामिल है।

GeoJSON का उपयोग करके GPS डेटा को मानचित्र पर प्रदर्शित करें

अब आप उस स्टोरेज से डेटा उपयोग करने के लिए तैयार हैं जिसे आपने पिछले पाठ में बनाया था। याद दिलाने के लिए, यह blob स्टोरेज में कई फाइलों के रूप में संग्रहीत है, इसलिए आपको फाइलों को प्राप्त करना होगा और उन्हें पार्स करना होगा ताकि Azure Maps उस डेटा का उपयोग कर सके।

कार्य - स्टोरेज को वेब पेज से एक्सेस करने के लिए कॉन्फ़िगर करें

यदि आप अपने स्टोरेज से डेटा प्राप्त करने के लिए कॉल करते हैं, तो आप अपने ब्राउज़र के कंसोल में त्रुटियाँ देख सकते हैं। ऐसा इसलिए है क्योंकि आपको इस स्टोरेज पर CORS की अनुमति सेट करनी होगी ताकि बाहरी वेब ऐप्स इसका डेटा पढ़ सकें।

🎓 CORS का मतलब "Cross-Origin Resource Sharing" है और इसे आमतौर पर सुरक्षा कारणों से Azure में स्पष्ट रूप से सेट करने की आवश्यकता होती है। यह उन साइटों को आपके डेटा तक पहुँचने से रोकता है जिनकी आप अपेक्षा नहीं करते।

CORS सक्षम करने के लिए निम्नलिखित कमांड चलाएँ:
```
az storage cors add --methods GET \
                    --origins "*" \
                    --services b \
                    --account-name <storage_name> \
                    --account-key <key1>
```
<storage_name> को अपने स्टोरेज अकाउंट के नाम से बदलें। <key1> को अपने स्टोरेज अकाउंट के अकाउंट की से बदलें।

यह कमांड किसी भी वेबसाइट (वाइल्डकार्ड * का मतलब है कोई भी) को GET अनुरोध करने की अनुमति देता है, यानी आपके स्टोरेज अकाउंट से डेटा प्राप्त करना। --services b का मतलब है कि यह सेटिंग केवल blobs के लिए लागू होगी।

कार्य - स्टोरेज से GPS डेटा लोड करें

init फ़ंक्शन की पूरी सामग्री को निम्नलिखित कोड से बदलें:
```
fetch("https://<storage_name>.blob.core.windows.net/gps-data/?restype=container&comp=list")
    .then(response => response.text())
    .then(str => new window.DOMParser().parseFromString(str, "text/xml"))
    .then(xml => {
        let blobList = Array.from(xml.querySelectorAll("Url"));
            blobList.forEach(async blobUrl => {
                loadJSON(blobUrl.innerHTML)                
    });
})
.then( response => {
    map = new atlas.Map('myMap', {
        center: [-122.26473, 47.73444],
        zoom: 14,
        authOptions: {
            authType: "subscriptionKey",
            subscriptionKey: "<subscription_key>",

        }
    });
    map.events.add('ready', function () {
        var source = new atlas.source.DataSource();
        map.sources.add(source);
        map.layers.add(new atlas.layer.BubbleLayer(source));
        source.add(features);
    })
})
```
<storage_name> को अपने स्टोरेज अकाउंट के नाम से बदलें। <subscription_key> को अपने Azure Maps अकाउंट के API की से बदलें।

यहाँ कई चीजें हो रही हैं। सबसे पहले, कोड आपके blob कंटेनर से GPS डेटा को आपके स्टोरेज अकाउंट नाम का उपयोग करके बनाए गए URL एंडपॉइंट से प्राप्त करता है। यह URL gps-data से डेटा प्राप्त करता है, जो इंगित करता है कि संसाधन प्रकार एक कंटेनर है (restype=container), और सभी blobs की जानकारी सूचीबद्ध करता है। यह सूची blobs को स्वयं वापस नहीं करेगी, लेकिन प्रत्येक blob के लिए एक URL वापस करेगी जिसे blob डेटा लोड करने के लिए उपयोग किया जा सकता है।

💁 आप इस URL को अपने ब्राउज़र में डाल सकते हैं ताकि अपने कंटेनर में सभी blobs का विवरण देख सकें। प्रत्येक आइटम में एक Url प्रॉपर्टी होगी जिसे आप अपने ब्राउज़र में लोड करके blob की सामग्री देख सकते हैं।

यह कोड फिर प्रत्येक blob को लोड करता है, एक loadJSON फ़ंक्शन को कॉल करता है, जिसे अगला बनाया जाएगा। फिर यह मानचित्र नियंत्रण बनाता है और ready इवेंट में कोड जोड़ता है। यह इवेंट तब कॉल किया जाता है जब मानचित्र वेब पेज पर प्रदर्शित होता है।

ready इवेंट एक Azure Maps डेटा स्रोत बनाता है - एक कंटेनर जिसमें GeoJSON डेटा होता है जिसे बाद में भरा जाएगा। इस डेटा स्रोत का उपयोग फिर एक bubble layer बनाने के लिए किया जाता है - यानी GeoJSON में प्रत्येक बिंदु के केंद्र पर मानचित्र पर सर्कल का एक सेट।
अपने स्क्रिप्ट ब्लॉक में, init फ़ंक्शन के नीचे loadJSON फ़ंक्शन जोड़ें:
```
var map, features;

function loadJSON(file) {
    var xhr = new XMLHttpRequest();
    features = [];
    xhr.onreadystatechange = function () {
        if (xhr.readyState === XMLHttpRequest.DONE) {
            if (xhr.status === 200) {
                gps = JSON.parse(xhr.responseText)
                features.push(
                    new atlas.data.Feature(new atlas.data.Point([parseFloat(gps.gps.lon), parseFloat(gps.gps.lat)]))
                )
            }
        }
    };
    xhr.open("GET", file, true);
    xhr.send();
}    
```
यह फ़ंक्शन fetch रूटीन द्वारा JSON डेटा को पार्स करने और इसे GeoJSON के रूप में पढ़ने के लिए longitude और latitude coordinates में बदलने के लिए कॉल किया जाता है। पार्स किए जाने के बाद, डेटा को GeoJSON Feature के हिस्से के रूप में सेट किया जाता है। मानचित्र को इनिशियलाइज़ किया जाएगा और छोटे बबल्स उस पथ के चारों ओर दिखाई देंगे जिसे आपका डेटा प्रदर्शित कर रहा है:
HTML पेज को अपने ब्राउज़र में लोड करें। यह मानचित्र लोड करेगा, फिर स्टोरेज से सभी GPS डेटा लोड करेगा और इसे मानचित्र पर प्रदर्शित करेगा।

💁 आप इस कोड को code फ़ोल्डर में पा सकते हैं।

🚀 चुनौती

मानचित्र पर स्थिर डेटा को मार्कर के रूप में प्रदर्शित करना अच्छा है। क्या आप इस वेब ऐप को बढ़ाकर एनिमेशन जोड़ सकते हैं और समय के साथ मार्करों के पथ को दिखा सकते हैं, टाइमस्टैम्प किए गए JSON फाइलों का उपयोग करके? यहाँ कुछ नमूने हैं जो मानचित्रों में एनिमेशन का उपयोग दिखाते हैं।

पोस्ट-लेक्चर क्विज़

समीक्षा और स्व-अध्ययन

Azure Maps IoT डिवाइस के साथ काम करने के लिए विशेष रूप से उपयोगी है।

Microsoft docs पर Azure Maps दस्तावेज़ में इसके उपयोगों पर शोध करें।
Microsoft Learn पर Azure Maps के साथ अपना पहला रूट फाइंडिंग ऐप बनाएं स्व-निर्देशित लर्निंग मॉड्यूल के साथ मानचित्र निर्माण और वेपॉइंट्स के बारे में अपने ज्ञान को गहरा करें।

असाइनमेंट

अपना ऐप डिप्लॉय करें

अस्वीकरण:
यह दस्तावेज़ AI अनुवाद सेवा Co-op Translator का उपयोग करके अनुवादित किया गया है। जबकि हम सटीकता सुनिश्चित करने का प्रयास करते हैं, कृपया ध्यान दें कि स्वचालित अनुवाद में त्रुटियां या अशुद्धियां हो सकती हैं। मूल भाषा में उपलब्ध मूल दस्तावेज़ को प्रामाणिक स्रोत माना जाना चाहिए। महत्वपूर्ण जानकारी के लिए, पेशेवर मानव अनुवाद की सिफारिश की जाती है। इस अनुवाद के उपयोग से उत्पन्न किसी भी गलतफहमी या गलत व्याख्या के लिए हम उत्तरदायी नहीं हैं।

40 KiB Raw Permalink Blame History