التمرين - إظهار بيانات جودة الهواء على الخريطة

مكتمل

في هذه الوحدة، سوف تقوم باسترداد بيانات جودة الهواء من واجهة برمجة تطبيقات وتحويلها إلى GeoJSON. بعد ذلك، يمكنك استخدام البيانات في تطبيق الخريطة كطبقة فقاعة من المعلومات لموقع ما.

الحصول على بيانات جودة الهواء

يجمع المؤشر العالمي لجودة الهواء بيانات جودة الهواء من جميع أنحاء العالم. وتتوفر البيانات من خلال واجهة برمجة تطبيقات مجانية كمؤشر جودة الهواء الحالي (AQI) الذي يقرأ من محطات تسجيل متعددة في جميع أنحاء العالم. ويمكنك استخدام البيانات في تطبيقك.

عند طلب البيانات، يكون لديك خياران. يمكنك:

  • طلب بيانات لموقع واحد، للحصول على أقرب قراءة لمدينة أو موقع.
  • طلب بيانات لكافة المحطات الموجودة داخل مستطيل يتم تعريفه باستخدام الإحداثيات الشمالية الشرقية والجنوبية الغربية للمستطيل.

ويجب أن ترسم الخريطة أكبر قدر ممكن من البيانات استنادًا إلى المساحة المرئية للخريطة. يمكن طلب بيانات مؤشر جودة الهواء للمحطات الموجودة في المنطقة المرئية من الخريطة فقط. حيث إن تضييق الطلب يجعل استدعاء واجهة برمجة التطبيقات أسرع لأنه يتم طلب البيانات المطلوبة فقط.

تنسيق بيانات مؤشر جودة الهواء

بيانات مؤشر جودة الهواء في تنسيق JSON التالي:

{
    "status": "ok",
    "data": [
        {
            "lat": 42.290094,
            "lon": -123.2321,
            "uid": 68,
            "aqi": "12",
            "station": {
                "name": "Applegate Valley, Oregon, USA",
                "time": "2020-04-21T17:00:00-07:00"
            }
        },
        ...
    ]
}

تحتوي الخاصية dataعلى صفيف من كائنات JSON لجميع محطات القياس المطلوبة. كما تحتوي العناصر على مواقع محددة بواسطة خط الطول، والعرض، وقياس مؤشر جودة الهواء. ولا يمكن رسم البيانات على الخريطة بالتنسيق الذي تتلقاه. إذ يجب أن يقوم تطبيقك أولاً بتحويل البيانات إلى مجموعة معالم GeoJSON.

وتعد الخطوات التالية مجرد نظرة عامة على الخطوات التي تتخذها لتحويل بيانات مؤشر جودة الهواء إلى مجموعة معالم. وستقوم بتنفيذ هذه الخطوات في التعليمات البرمجية لاحقًا في هذه الوحدة.

لتحويل بيانات مؤشر جودة الهواء إلى مجموعة معالم GeoJSON:

  1. إنشاء مجموعة معالم فارغة.

  2. لكل عنصر في الصفيف data، قم بإنشاء معلم جديد:

    1. أما هندسة الميزة هي موقع Point، مع تعيين الإحداثيات إلى خط الطول lon وخط العرض lat.

    2. بدلاً من رسم قياس مؤشر جودة الهواء مباشرة، من الأسهل تمثيل البيانات على أنها فقاعة ملونة. قم بتحويل قياس مؤشر جودة الهواء إلى قيمة لون كسلسلة RGB سداسية عشرية. ثم قم بإضافة قيمة اللون المحولة إلى صفيف properties الخاص بالمعلم.

    فيما يلي GeoJSON للبيانات في هذا المثال:

    {
        "type": "FeatureCollection",
        "features": [{
                "type": "Feature",
                "geometry": {
                    "type": "Point",
                    "coordinates": [-123.2321, 42.290094]
                },
                "properties": {
                    "color": "#009966"
                }
            }
        ]
    }
    

الحصول على رمز مميز لواجهة برمجة التطبيقات

لاستخدام واجهة برمجة تطبيقات WAQI، قم بالتسجيل للحصول على مفتاح واجهة برمجة التطبيقات. لاحقًا، ستقوم بإضافة المفتاح إلى متغيرات البيئة للتطبيق.

للحصول على مفتاح واجهة برمجة تطبيقات WAQI:

  1. انتقل إلى صفحة طلب الرمز المميز للنظام الأساسي للبيانات المفتوحة لجودة الهواء على موقع WAQI.

  2. أدخل عنوان البريد الإلكتروني واسمك.

  3. قم بمراجعة شروط استخدام واجهة برمجة التطبيقات والموافقة عليها.

  4. حدد "Submit".

  5. تحقق من البريد الإلكتروني الخاص بك للحصول على رسالة تأكيد من موقع ويب WAQI. في رسالة البريد الإلكتروني، حدد الارتباط «Confirm your email address».

  6. بعد تأكيد عنوان بريدك الإلكتروني، تتم إعادة توجيهك إلى صفحة ويب جديدة تعرض الرمز المميز. انسخ الرمز المميز الخاص بك واحفظه.

    إذ يعد الرمز المميز قيمة مفتاح واجهة برمجة تطبيقات WAQI التي ستستخدمها في خطوة لاحقة.

تحديث التطبيق لاستخدام الرمز المميز لواجهة برمجة التطبيقات

عندما يكون لديك الرمز المميز لواجهة برمجة تطيبقات WAQI، أضف قيمة مفتاح الرمز المميز إلى متغيرات البيئة لتطبيقك:

  1. في Visual Studio Code، افتح الملف .env في مجلد التعليمات البرمجية للتطبيق.

  2. أضف العبارة التالية إلى نهاية ملف .env:

    WAQI_API_KEY=<your waqi key>
    

    استبدل <your waqi key> بقيمة مفتاح واجهة برمجة تطبيقات WAQI.

  3. احفظ التغييرات إلى ملف .env.

  4. في Visual Studio Code، افتح الملف app.py.

  5. في التعليمات البرمجية app.py ابحث عن العبارة التي تقوم بتحميل القيمة MAP_KEY. بعد هذه العبارة، أضف العبارات التالية لتحميل مفتاح واجهة برمجة تطبيقات WAQI. تقوم التعليمة البرمجية WAQI_API_KEY بتعريف الثابت لواجهة برمجة تطبيقات عنوان الويب:

    # Load the World Air Quality Index key from the .env file.
    WAQI_API_KEY = os.environ["WAQI_API_KEY"]
    WAQI_API_URL = https://api.waqi.info/map/bounds/?latlng={},{},{},{}&token={}
    

    ويحدد WAQI_API_URL استدعاءً للحصول على جميع قراءات نوعية الهواء لمنطقة مستطيلة التي يتم تعريفها عن طريق الإحداثيات lon وlat.

  6. احفظ التغييرات إلى ملف app.py.

أضف مصدر بيانات إلى الخريطة

فيما تكون الخطوة الأخيرة عبارة عن إضافة مصدر بيانات إلى الخريطة لتقديم بيانات مؤشر جودة الهواء. وتستخدم Azure Maps مصادر البيانات لرسم الطبقات. ويمكن لمصدر البيانات الحصول على البيانات الخاصة به من مجموعة معالم GeoJSON.

  1. في Visual Studio Code، افتح الملف home.html في مجلد Templates للتطبيق الخاص بك.

  2. في التعليمات البرمجية app.py، ابحث عن العبارات التي تعالج الحدث ready الخاص بالخريطة. ويجب أن تظهر هذه التعليمة البرمجية على خطوط 46 إلى 52:

    // When the map is ready, center the map on the user's location.
    map.events.add('ready', function () {
        map.setCamera({
            center: map_center,
            zoom: 5
        })
    })
    
  3. استبدل هذا المقطع من التعليمات البرمجية مع العبارات التالية ثم قم بحفظ الملف:

    // When the map is ready, center the map on the user's location.
    map.events.add('ready', function () {
        // Declare a data source for the AQI data.
        var datasource = new atlas.source.DataSource();
        map.sources.add(datasource);
    
        // Declare a function to update the AQI data.
        function updateAQIData(e) {
            // Get the current bounds on the screen.
            bounds = map.getCamera().bounds
    
            // Set the data source data to results of the AQI call.
            // This is a feature collection that contains the AQI measurements.
            fetch('./aqi?bounds=' + bounds)
                .then(res => {
                    return res.json()
                }).then(response => {
                    datasource.clear()
                    datasource.setShapes(response)
                })
        }
    
        // Add a bubble layer.
        map.layers.add(new atlas.layer.BubbleLayer(datasource, null, {
            radius: 10,
            opacity: 0.5,
            strokeOpacity: 0,
            // Get the color from the color property.
            color: ['get', 'color']
        }));
    
        // Handle any events that change the bounds of the map.
        map.events.add('zoomend', updateAQIData)
        map.events.add('dragend', updateAQIData)
        map.events.add('pitchend', updateAQIData)
    
        map.setCamera({
            center: map_center,
            zoom: 5
        })
    })
    

    يتم استخدام مصدر البيانات هذا لإنشاء طبقة فقاعة تعرض الدوائر على الخريطة. وتعرض هذه الطبقة فقاعة واحدة لكل معلم في مجموعة المعالم، باستخدام إحداثيات الهندسة. الفقاعات لها حجم ومعدل شفافية ثابت، ولكن اللون غير ثابت. بدلاً من ذلك، تخبر التعليمة البرمجية ['get', 'color'] الخريطة لتحميل اللون من خاصية المعلم التي تسمى color.

    تتم إضافة الوظيفة updateAQIData إلى ثلاثة أحداث خريطة يتم إطلاقها عند تكبير الخريطة أو تحريكها أو تغيير درجة الدوران. وفي كل مرة يقوم فيها المستخدم بتحريك الخريطة، يتم استدعاء الوظيفة. وتحصل الوظيفة على الحدود الحالية من كاميرا الخرائط، أي من الإحداثيات الشمالية الغربية والجنوبية الشرقية من خريطة القطعة التي تظهر على الشاشة. ثم تمر الوظيفة من هذه الحدود إلى استدعاء إلى الطريق api، مع استدعاء في رمز python لتحميل بيانات مؤشر جودة الهواء. وأخيرًا، تتم إضافة مجموعة المعالم إلى مصدر البيانات.

تحميل بيانات جودة الهواء

يحتاج تطبيق Flask إلى استدعاء واجهة برمجة التطبيقات لتحميل البيانات للجزء المرئي من الخريطة.

  1. افتح ملف app.py.

  2. أضف التعليمة البرمجية التالية إلى الجزء السفلي من الملف:

    def get_color(aqi):
        # Convert the AQI value to a color.
        if aqi <= 50: return "#009966"
        if aqi <= 100: return "#ffde33"
        if aqi <= 150: return "#ff9933"
        if aqi <= 200: return "#cc0033"
        if aqi <= 300: return "#660099"
        return "#7e0023"
    
    def load_aqi_data(lon1, lat1, lon2, lat2):
        # Load the air quality data.
        url = WAQI_API_URL.format(lat1, lon1, lat2, lon2, WAQI_API_KEY)
        aqi_data = requests.get(url)
    
        # Create a GeoJSON feature collection from the data.
        feature_collection = {
            "type" : "FeatureCollection",
            "features" : []
        }
    
        for value in aqi_data.json()["data"]:
            # Filter out empty values.
            if value["aqi"] != "-":
                feature_collection["features"].append({
                    "type" : "Feature",
                    "properties" : {
                        "color" : get_color(int(value["aqi"]))
                    },
                    "geometry" : {
                        "type":"Point",
                        "coordinates":[value['lon'], value['lat']]
                    }
                    })
    
        return feature_collection
    
    @app.route("/aqi", methods = ["GET"])
    def get_aqi():
        # Get the bounds from the request.
        bounds = request.args["bounds"].split(",")
    
        # Load the AQI data and create the GeoJSON for the specified bounds.
        return json.dumps(load_aqi_data(bounds[0], bounds[1], bounds[2], bounds[3]))
    
  3. احفظ الملف.

ينفذ هذا الرمز استدعاء واجهة برمجة التطبيقات داخل تطبيق Flask الذي يقوم بتحميل بيانات مؤشر جودة الهواء من واجهة برمجة التطبيقات الخاصة بمجموعة محددة من الإحداثيات. ثم يتم تحويل بيانات مؤشر جودة الهواء إلى مجموعة معالم ثم إرجاعها كسلسلة JSON. ثم، يمكن استدعاء واجهة برمجة التطبيقات من صفحة ويب.

عرض بيانات جودة الهواء على الخريطة

مجموعة المعالم التي أنشأتها من بيانات WAQI جاهزة للعرض على الخريطة.

في Visual Studio Code، تأكد من فتح ملف app.py. حدد رمز «Run» في شريط النشاطات لفتح طريقة العرض "Run". ثم، حدد السهم الأخضر لتشغيل تطبيق القارورة وافتحه في متصفح.

يجب أن تشاهد الدوائر الملونة (الفقاعات) على الخريطة التي تعرض بيانات WAQI:

لقطة شاشة تعرض خريطة بجودة هواء تظهر كدوائر ملونة.

تنقل على الخريطة وسترى تحديث الفقاعات ليتناسب مع المنطقة التي تعرضها.

قم بإلقاء نظرة على ألوان مختلفة لرؤية المناطق من نوعية الهواء سيئ أو خطر. تدبر في سبب سوء نوعية الهواء في هذه المناطق. بعض الأسباب واضحة، كما هو الحال في المناطق التي بها أعداد كبيرة من محطات الطاقة أو المصانع التي تعمل بحرق الوقود الأحفوري. والبعض الآخر ليس واضحًا جدًا. ابحث عن إحدى الفقاعات القريبة منك تلك وتدبر فيما يمكن أن يمثل سببًا للتلوث.