Gyakorlat – Levegőminőségi adatok megjelenítése térképen

7 perc

Ebben a leckében levegőminőségi adatokat kér le egy API-ból, és GeoJSON-ra konvertálja azokat. Ezután a térképalkalmazásban lévő adatokat buborékos információrétegként használhatja egy helyhez.

Levegőminőségi adatok lekérése

A Világ levegőminőségi indexe a világ minden tájáról összesíti a levegőminőségi adatokat. Az adatok egy ingyenes API-n keresztül érhetők el, mivel az aktuális levegőminőségi index (AQI) a világ több felvételi állomásáról olvas be. Az alkalmazásban lévő adatokat használhatja.

Amikor adatokat kér, két lehetősége van. You can:

Egyetlen hely adatainak lekérése egy város vagy hely legközelebbi olvasásának lekéréséhez.
Adatok kérése egy téglalapon belüli összes állomáshoz, amely a téglalap északkeleti és délnyugati koordinátáinak használatával van meghatározva.

A térképnek a térkép látható területe alapján a lehető legtöbb adatot kell ábrázolnia. Az AQI-adatok csak a térkép látható területén lévő állomásokra kérhetők le. A kérés szűkítése felgyorsítja az API-hívásokat, mert csak a szükséges adatokra van szükség.

Az AQI-adatok formátuma

Az AQI-adatok a következő JSON-formátumban vannak:

{
    "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"
            }
        },
        ...
    ]
}

A data tulajdonság az összes kért mérőállomás JSON-objektumainak tömbjéből áll. Az objektumok a hosszúság, a szélesség és az AQI-mérés által meghatározott helyekkel rendelkeznek. Az adatok nem ábrázolhatók a térképen a kapott formátumban. Az alkalmazásnak először GeoJSON-funkciógyűjteménysé kell konvertálnia az adatokat.

Az alábbi lépések áttekintést adnak az AQI-adatok funkciógyűjteménysé alakításához szükséges lépésekről. A lecke későbbi részében ezeket a lépéseket a kódban implementálhatja.

Az AQI-adatok GeoJSON-szolgáltatásgyűjteménysé alakítása:

Hozzon létre egy üres funkciógyűjteményt.
A data tömb minden eleméhez hozzon létre egy új jellemzőt:
1. A funkció geometriája egy hely Point, ahol a koordináták a hosszúságra lon és a szélességre latkerülnek.
2. Az AQI-mérés közvetlen ábrázolása helyett egyszerűbb színes buborékként ábrázolni az adatokat. Az AQI-mérés átalakítása színértékké RGB hexa sztringként. Ezután adja hozzá a konvertált színértéket a funkció tömbjének properties .
Ebben a példában az adatok geoJSON-ját vizsgáljuk meg:
```
{
    "type": "FeatureCollection",
    "features": [{
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [-123.2321, 42.290094]
            },
            "properties": {
                "color": "#009966"
            }
        }
    ]
}
```

API-jogkivonat lekérése

A WAQI API használatához regisztráljon egy API-kulcsot. Később hozzáadja a kulcsot az alkalmazás környezeti változóihoz.

A WAQI API-kulcs lekérése:

Nyissa meg az Air Quality Open Data Platform jogkivonat-kérési oldalát a WAQI webhelyén.
Adja meg az e-mail-címét és a nevét.
Tekintse át és fogadja el az API használati feltételeit.
Válassza a Küldés lehetőséget.
Ellenőrizze az e-mail-postaládájában a WAQI webhelyről érkező megerősítési üzenetet. Az e-mailben válassza az E-mail-cím megerősítése hivatkozást.
Az e-mail-cím megerősítése után a rendszer átirányítja a jogkivonatot megjelenítő új weblapra. Másolja és mentse a jogkivonatot.

A jogkivonat egy későbbi lépésben használt WAQI API-kulcsérték.

Az alkalmazás frissítése az API-jogkivonat használatára

Ha rendelkezik a WAQI API-jogkivonattal, adja hozzá a tokenkulcs értékét az alkalmazás környezeti változóihoz:

A Visual Studio Code-ban nyissa meg az .env fájlt az alkalmazáskód mappájában.
Adja hozzá a következő utasítást az .env fájl végéhez:
```
WAQI_API_KEY=<your waqi key>
```
Cserélje le <your waqi key> a WAQI API-kulcs értékét.
Mentse az .env fájl módosításait.
Nyissa meg a app.py fájlt a Visual Studio Code-ban.
A app.py kódban keresse meg az értéket betöltő utasítástMAP_KEY. Az utasítás után adja hozzá a következő utasításokat a WAQI API-kulcs betöltéséhez. A kód határozza meg az WAQI_API_KEY API URL-címének állandóját:
```
# 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={}"
```
A WAQI_API_URL rendszer egy olyan hívást határoz meg, amely lekéri az összes levegőminőség-mérést egy téglalap alakú régióban, amelyet a koordináták és lat a lon koordináták határoznak meg.
Mentse a app.py fájl módosításait.

Adatforrás hozzáadása a térképhez

Az utolsó lépés egy adatforrás hozzáadása a térképhez az AQI-adatok megjelenítéséhez. Az Azure Térképek adatforrásokat használ a rétegek ábrázolásához. Az adatforrások egy GeoJSON-funkciógyűjteményből szerezhetik be az adatait.

A Visual Studio Code-ban nyissa meg a home.html fájlt az alkalmazás sablonmappájában .

Ebben a fájlban keresse meg a térkép eseményét ready kezelő utasításokat. Ennek a kódnak a 46–52. sorban kell megjelennie:

// 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
    })
})

Cserélje le a kód ezen szakaszát a következő utasításokra, majd mentse a fájlt:

// 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
    })
})

Ez az adatforrás egy buborékréteg létrehozásához használható, amely köröket jelenít meg egy térképen. Ez a réteg egy buborékot jelenít meg a funkciógyűjtemény egyes funkcióihoz a geometria koordinátáinak használatával. A buborékok mérete és átlátszósága rögzített, de a szín nem rögzített. Ehelyett a ['get', 'color'] kód arra utasítja a térképet, hogy betöltse a színt a funkció egyik tulajdonságából, az úgynevezett color.

A updateAQIData függvény három térképes eseményhez lesz hozzáadva, amelyek a térkép nagyítása vagy áthelyezése, illetve a pálya módosításakor aktiválódik. A rendszer minden alkalommal meghívja a függvényt, amikor a felhasználó áthelyezi a térképet. A függvény a Térképek kamerából szerzi be az aktuális határokat, vagyis a képernyőn látható térképdarab észak-nyugati és délkeleti koordinátáiból. A függvény ezután továbbítja ezeket a határokat az api útvonalra irányuló hívásnak, amely a Python-kódban hívja meg a AQI-adatok betöltését. Végül a rendszer hozzáadja a funkciógyűjteményt az adatforráshoz.

Levegőminőségi adatok betöltése

A Flask alkalmazásnak meg kell hívnia az API-t a térkép látható részének adatainak betöltéséhez.

Nyissa meg a app.py fájlt.

Adja hozzá a következő kódot a fájl aljára:

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]))

Mentse a fájlt.

Ez a kód implementál egy API-hívást a Flask-alkalmazásban, amely betölti az AQI-adatokat az API-ból egy adott koordinátákhoz. Az AQI-adatok ezután szolgáltatásgyűjteményré alakulnak, és JSON-sztringként lesznek visszaadva. Ezután az API meghívható a weblapról.

A levegőminőségi adatok megjelenítése a térképen

A WAQI-adatokból létrehozott funkciógyűjtemény készen áll a térképen való megjelenítésre.

A Visual Studio Code-ban győződjön meg arról, hogy a app.py fájl meg van nyitva. Válassza a Futtatás ikont a tevékenységsávon a Futtatás nézet megnyitásához. Ezután a zöld nyílra kattintva futtassa a Flask alkalmazást, és nyissa meg egy böngészőben.

A WAQI-adatokat megjelenítő térképen színes köröknek (buborékoknak) kell megjelennie:

Mozogjon a térképen, és tekintse meg a buborékok frissítését a megtekintett területnek megfelelően.

Figyelje meg, hogy a rossz vagy veszélyes szintű levegőminőséget különböző színek jelzik. Gondolja át, hogy a levegőminőség miért annyira gyenge ezekben a területeken. Bizonyos okok nyilvánvalóak, például olyan területeken, ahol nagy számban találhatók fosszilis tüzelőanyag-égető erőművek vagy gyárak. Mások nem annyira nyilvánvalóak. Keresse meg a közelben lévőket, és gondolja át, mi okozhatja a szennyezést.

Folytatás