Alıştırma - Hava kalitesi verilerini haritada gösterme

Tamamlandı

Bu ünitede, bir API'den hava kalitesi verilerini alıp GeoJSON'a dönüştürebilirsiniz. Ardından harita uygulamanızdaki verileri bir konum için kabarcık katmanı olarak kullanabilirsiniz.

Hava kalitesi verilerini alma

Dünya Hava Kalitesi Endeksi, dünyanın dört bir yanından hava kalitesi verilerini toplar. Veriler, dünyanın dört bir yanındaki birden çok kayıt istasyonundan okunan mevcut Hava Kalitesi Dizini (AQI) olarak ücretsiz bir API aracılığıyla kullanılabilir. Verileri uygulamanızda kullanabilirsiniz.

Veri istediğinizde iki seçeneğiniz vardır. Şunları yapabilirsiniz:

  • Bir şehir veya konumun en yakın okumasını almak için tek bir konum için veri isteyin.
  • Dikdörtgenin kuzey-doğu ve güney-batı koordinatları kullanılarak tanımlanan bir dikdörtgen içindeki tüm istasyonlar için veri isteyin.

Harita, haritanın görünür alanına göre mümkün olduğunca çok veri çizmelidir. AQI verileri yalnızca haritanın görünür alanındaki istasyonlar için istenebilir. yalnızca gerekli veriler istendiğinden isteğinizin daraltılması API çağrısını hızlandırır.

AQI veri biçimi

AQI verileri aşağıdaki JSON biçimindedir:

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

özelliği, data istenen tüm ölçüm istasyonları için bir JSON nesneleri dizisi içerir. Nesnelerin boylam, enlem ve AQI ölçümüyle tanımlanan konumları vardır. Veriler, harita üzerinde aldığınız biçimde çizilemiyor. Uygulamanızın önce verileri bir GeoJSON özellik koleksiyonuna dönüştürmesi gerekir.

Aşağıdaki adımlar, AQI verilerini bir özellik koleksiyonuna dönüştürmek için gerçekleştirdiğiniz adımlara genel bir bakış sağlar. Bu ünitenin ilerleyen bölümlerinde kodda bu adımları uygulayacaksınız.

AQI verilerini GeoJSON özellik koleksiyonuna dönüştürmek için:

  1. Boş bir özellik koleksiyonu oluşturun.

  2. data dizisindeki her öğe için yeni bir özellik oluşturun:

    1. Özelliğin geometrisi, koordinatları boylam lon ve enlem latolarak ayarlanmış bir konumdurPoint.

    2. AQI ölçümünün çizimini doğrudan yapmak yerine, verileri renkli bir kabarcık olarak göstermek daha kolaydır. AQI ölçümlerini RGB onaltılık dize olarak bir renk değerine dönüştürün. Ardından, dönüştürülen renk değerini özelliğin properties dizisine ekleyin.

    Bu örnekteki verilerin GeoJSON'unu aşağıda bulabilirsiniz:

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

API belirteci alma

WAQI API'sini kullanmak için bir API anahtarına kaydolun. Daha sonra, anahtarı uygulamanın ortam değişkenlerine eklersiniz.

WAQI API anahtarını almak için:

  1. WAQI web sitesindeki Hava Kalitesi Açık Veri Platformu belirteç isteği sayfasına gidin.

  2. E-posta adresinizi ve adınızı girin.

  3. API kullanım koşullarını gözden geçirin ve kabul edin.

  4. Gönder'i seçin.

  5. WAQI web sitesinden bir onay iletisi için e-posta gelen kutunuzu kontrol edin. E-posta iletisinde E-posta adresinizi onaylayın bağlantısını seçin.

  6. E-posta adresinizi onayladıktan sonra belirtecinizi görüntüleyen yeni bir web sayfasına yönlendirilirsiniz. Belirtecinizi kopyalayın ve kaydedin.

    Belirteç, sonraki bir adımda kullandığınız WAQI API anahtar değeridir.

API belirtecini kullanmak için uygulamayı güncelleştirme

WAQI API belirtecine sahip olduğunuzda, uygulamanızın ortam değişkenlerine belirteç anahtarı değerini ekleyin:

  1. Visual Studio Code'da uygulama kodu klasörünüzde .env dosyasını açın.

  2. .env dosyasının sonuna aşağıdaki deyimi ekleyin:

    WAQI_API_KEY=<your waqi key>
    

    değerini WAQI API anahtarınızın değeriyle değiştirin <your waqi key> .

  3. Değişiklikleri .env dosyasına kaydedin.

  4. Visual Studio Code'da app.py dosyanızı açın.

  5. app.py kodunda değeri yükleyen deyimini MAP_KEY bulun. Bu deyimden sonra WAQI API anahtarını yüklemek için aşağıdaki deyimleri ekleyin. Kod, API URL'si WAQI_API_KEY için sabiti tanımlar:

    # 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 ve lat koordinatları tarafından lon tanımlanan dikdörtgen bir bölge için tüm hava kalitesi okumalarını almak için bir çağrı tanımlar.

  6. Değişiklikleri app.py dosyasına kaydedin.

Haritaya veri kaynağı ekleme

Son adım, AQI verilerini işlemek için haritaya bir veri kaynağı eklemektir. Azure Haritalar katmanları çizmek için veri kaynaklarını kullanır. Veri kaynağı, verilerini bir GeoJSON özellik koleksiyonundan alabilir.

  1. Visual Studio Code'da, uygulamanızın templates klasöründe home.html dosyasını açın.

  2. Bu dosyada, harita için olayı işleyen ready deyimleri bulun. Bu kod 46 ile 52 arasında satırlarda görünmelidir:

    // 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. Kodun bu bölümünü aşağıdaki deyimlerle değiştirin ve dosyayı kaydedin:

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

    Bu veri kaynağı, haritadaki daireleri gösteren bir kabarcık katmanı oluşturmak için kullanılır. Bu katman, geometrinin koordinatlarını kullanarak özellik koleksiyonundaki her özellik için bir kabarcık gösterir. Kabarcıkların sabit bir boyutu ve opaklığı vardır, ancak renk sabit değildir. Bunun yerine kod, ['get', 'color'] eşlemeye özelliğin adlı colorözelliğinden rengi yüklemesini söyler.

    İşlev updateAQIData , harita yakınlaştırıldığında veya taşındığında ya da perde değiştirildiğinde tetiklenen üç harita olayına eklenir. Kullanıcı haritayı her hareketinde işlev çağrılır. İşlev geçerli sınırları Haritalar kameradan, yani ekranda görünen harita parçasının kuzey-batı ve güneydoğu koordinatlarından alır. Daha sonra bu işlev, bu sınırları Python koduna AQI verilerini yükleme çağrısı yapan api rotasına yönelik bir çağrıya geçirir. Son olarak, özellik koleksiyonu veri kaynağına eklenir.

Hava kalitesi verilerini yükleme

Flask uygulamasının haritanın görünür bölümüne ait verileri yüklemek için API'yi çağırması gerekir.

  1. app.py dosyasını açın.

  2. Dosyanın en altına aşağıdaki kodu ekleyin:

    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. Dosyayı kaydedin.

Bu kod, Flask uygulamasının içinde belirli bir koordinat kümesi için API'den AQI verilerini yükleyen bir API çağrısı uygular. Ardından AQI verileri bir özellik koleksiyonuna dönüştürülür ve JSON dizesi olarak döndürülür. Ardından API web sayfasından çağrılabilir.

Hava kalitesi verilerini haritada gösterme

WAQI verilerinden oluşturduğunuz özellik koleksiyonu haritada gösterilmeye hazırdır.

Visual Studio Code'da app.py dosyanızın açık olduğundan emin olun. Çalıştır görünümünü açmak için Etkinlik Çubuğu'ndaki Çalıştır simgesini seçin. Ardından flask uygulamasını çalıştırmak için yeşil oku seçin ve tarayıcıda açın.

Haritada WAQI verilerini gösteren renkli daireler (kabarcıklar) görmeniz gerekir:

Screenshot that shows a map with air quality shown as colored circles.

Haritada gezinin ve kabarcıkların görüntülediğiniz alanla eşleşecek şekilde güncelleştirildiğini görün.

Kötü veya tehlikeli hava kalitesine sahip alanları görmek için farklı renklere göz atın. Bu alanlarda hava kalitesinin neden düşük olduğunu düşünün. Bazı nedenler, çok sayıda fosil yakıt yakan enerji istasyonu veya fabrikanın bulunduğu alanlarda olduğu gibi açıktır. Diğerleri o kadar açık değil. Yakınınızda olanları bulun ve kirliliğe neyin neden olabileceğini düşünün.