Exercício - Mostrar dados sobre a qualidade do ar num mapa

7 minutos

Nesta unidade, você recupera dados de qualidade do ar de uma API e os converte em GeoJSON. Em seguida, você pode usar os dados em seu aplicativo de mapa como uma camada de bolha de informações para um local.

Obter dados sobre a qualidade do ar

O Índice Mundial de Qualidade do Ar agrega dados sobre a qualidade do ar de todo o mundo. Os dados estão disponíveis através de uma API gratuita como a leitura atual do Índice de Qualidade do Ar (IQA) de várias estações de gravação em todo o mundo. Você pode usar os dados em seu aplicativo.

Quando você solicita dados, você tem duas opções. Pode:

Solicite dados para um único local, para obter a leitura mais próxima de uma cidade ou local.
Solicite dados para todas as estações dentro de um retângulo definido usando as coordenadas nordeste e sudoeste do retângulo.

O mapa deve plotar o máximo de dados possível com base na área visível de um mapa. Os dados AQI podem ser solicitados apenas para estações que estão na área visível do mapa. Restringir sua solicitação torna a chamada de API mais rápida porque apenas os dados necessários são solicitados.

Formato de dados do IQAr

Os dados AQI estão no seguinte formato 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"
            }
        },
        ...
    ]
}

A data propriedade contém uma matriz de objetos JSON para todas as estações de medição que são solicitadas. Os objetos têm locais definidos pela longitude, latitude e medição do IQA. Os dados não podem ser plotados no mapa no formato em que você os recebe. Seu aplicativo deve primeiro converter os dados em uma coleção de recursos GeoJSON.

As etapas a seguir são uma visão geral das etapas que você executa para converter dados AQI em uma coleção de recursos. Mais adiante nesta unidade, você implementará essas etapas no código.

Para converter dados AQI em uma coleção de recursos GeoJSON:

Crie uma coleção de recursos em branco.
Crie uma nova funcionalidade para cada item na matriz data:
1. A geometria do recurso é um local Point, com as coordenadas definidas para a longitude lon e latitude lat.
2. Em vez de plotar a medição do IQA diretamente, é mais fácil representar os dados como uma bolha colorida. Converta a medida AQI em um valor de cor como uma cadeia de caracteres hexadecimal RGB. Em seguida, adicione o valor de cor convertido à matriz do properties recurso.
Aqui está o GeoJSON para os dados neste exemplo:
```
{
    "type": "FeatureCollection",
    "features": [{
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [-123.2321, 42.290094]
            },
            "properties": {
                "color": "#009966"
            }
        }
    ]
}
```

Obter um token de API

Para usar a API WAQI, registre-se para obter uma chave de API. Mais tarde, você adiciona a chave às variáveis de ambiente para o aplicativo.

Para obter a chave da API WAQI:

Vá para a página de solicitação de token da Plataforma de Dados Abertos da Qualidade do Ar no site da WAQI.
Introduza o seu endereço de e-mail e nome.
Revise e concorde com os termos de serviço de uso da API.
Selecione Submeter.
Verifique sua caixa de entrada de e-mail para uma mensagem de confirmação do site da WAQI. Na mensagem de e-mail, selecione o link Confirmar seu endereço de e-mail.
Depois de confirmar seu endereço de e-mail, você será redirecionado para uma nova página da Web que exibe seu token. Copie e salve seu token.

O token é o valor da chave da API WAQI que você usa em uma etapa posterior.

Atualizar o aplicativo para usar o token da API

Quando você tiver o token da API WAQI, adicione o valor da chave do token às variáveis de ambiente do seu aplicativo:

No Visual Studio Code, abra o arquivo .env na pasta de código do aplicativo.
Adicione a seguinte instrução ao final do arquivo .env :
```
WAQI_API_KEY=<your waqi key>
```
Substitua <your waqi key> pelo valor da sua chave de API WAQI.
Salve as alterações no arquivo .env .
No Visual Studio Code, abra o arquivo app.py .
No código app.py, localize a instrução que carrega o MAP_KEY valor. Após essa instrução, adicione as instruções a seguir para carregar a chave da API WAQI. O código define a constante para a WAQI_API_KEY URL da API:
```
# 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={}"
```
O WAQI_API_URL define uma chamada para obter todas as leituras da qualidade do ar para uma região retangular definida pelas lon coordenadas e lat .
Salve as alterações no arquivo app.py .

Adicionar uma fonte de dados ao mapa

A última etapa é adicionar uma fonte de dados ao mapa para renderizar os dados AQI. O Azure Maps usa fontes de dados para plotar camadas. Uma fonte de dados pode obter seus dados de uma coleção de recursos GeoJSON.

No Visual Studio Code, abra o arquivo home.html na pasta templates do seu aplicativo.

Neste arquivo, localize as instruções que manipulam o evento para o ready mapa. Este código deve aparecer nas linhas 46 a 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
    })
})

Substitua esta seção de código pelas seguintes instruções e salve o arquivo:

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

Essa fonte de dados é usada para criar uma camada de bolhas que mostra círculos em um mapa. Esta camada mostra uma bolha para cada recurso na coleção de feições, usando as coordenadas da geometria. As bolhas têm um tamanho fixo e opacidade, mas a cor não é fixa. Em vez disso, o ['get', 'color'] código diz ao mapa para carregar a cor de uma propriedade do recurso chamada color.

A updateAQIData função é adicionada a três eventos de mapa que são acionados quando o mapa é ampliado ou movido, ou o tom é alterado. Toda vez que o usuário move o mapa, a função é chamada. A função obtém os limites atuais da câmera Maps; ou seja, a partir das coordenadas noroeste e sudeste da peça do mapa que é visível na tela. Em seguida, a função passa estes limites para uma chamada à rota da api ao chamar para o código Python, para que este carregue os dados do IQAr. Finalmente, a coleção de recursos é adicionada à fonte de dados.

Carregar os dados sobre a qualidade do ar

O aplicativo Flask precisa chamar a API para carregar os dados para a parte visível de um mapa.

Abra o arquivo app.py .

Adicione o seguinte código à parte inferior do ficheiro:

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

Guarde o ficheiro.

Este código implementa uma chamada de API dentro do aplicativo Flask que carrega os dados AQI da API para um conjunto específico de coordenadas. Os dados AQI são então convertidos em uma coleção de recursos e retornados como uma cadeia de caracteres JSON. Em seguida, a API pode ser chamada a partir da página da Web.

Mostrar os dados sobre a qualidade do ar no mapa

A coleção de recursos que você criou a partir dos dados WAQI está pronta para ser exibida em um mapa.

No Visual Studio Code, certifique-se de que seu arquivo de app.py está aberto. Selecione o ícone Executar na barra de atividades para abrir a visualização Executar. Em seguida, selecione a seta verde para executar o aplicativo Flask e abra-o em um navegador.

Você deve ver círculos coloridos (bolhas) no mapa que mostram os dados WAQI:

Mova-se pelo mapa e veja a atualização de bolhas para corresponder à área que você está visualizando.

Observe as diferentes cores para ver as áreas com qualidade do ar má ou perigosa. Reflita acerca dos motivos pelos quais a qualidade do ar é tão má nestas áreas. Algumas razões são óbvias, como em áreas com grande número de usinas ou usinas que queimam combustíveis fósseis. Outros não são tão óbvios. Encontre aqueles perto de você e pense no que pode causar a poluição.

Continuar