Esta página foi traduzida pela API Cloud Translation.

Qualidade do ar e pólen em áreas e rotas

Objetivo

As APIs Air Quality e Pollen oferecem ótimas oportunidades para adicionar mais insights a uma viagem ou mapa em qualquer local. Há duas maneiras de consumir os dados disponíveis dessas APIs: indexar como texto ou blocos de mapa de calor como imagens rasterizadas.

alt_text

Ao usar os endpoints das APIs blocos de mapa de calor, você pode enfrentar alguns desafios ao carregar os blocos raster individuais, como:

como carregar os blocos em um mapa do Google na Web? (também para obedecer aos Termos de Uso das APIs)
como gerenciar o número de solicitações durante a experiência?
Como ler os valores dos blocos?

Exemplos de casos de uso

Você vai receber exemplos de casos de uso para tentar responder às perguntas acima.

Qualidade do ar e pólen em uma área:visualize dados raster de blocos de mapa de calor (condições atuais) dentro de um ou vários polígonos personalizados.
Qualidade do ar e pólen ao longo do trajeto:visualize blocos de mapa de calor (condições atuais), dados raster mapeados em pontos de referência de trajetos.

Implementação

Você vai descobrir quais blocos estão disponíveis e como eles podem ser carregados em uma experiência na Web. Você também vai saber o que pode ser feito para gerenciar o número de solicitações em um cenário em que os blocos são carregados em um mapa. Por fim, você vai aprender a ler os blocos.

Blocos de mapa de calor disponíveis por tipo

API Air Quality

- UAQI_RED_GREEN (UAQI, paleta vermelho-verde): paleta vermelho-verde do Índice Universal de Qualidade do Ar.
- UAQI_INDIGO_PERSIAN (UAQI, paleta índigo-persa): índice universal de qualidade do ar, paleta índigo-persa.
- PM25_INDIGO_PERSIAN: paleta de cores índigo-persa do índice PM2,5.
- GBR_DEFRA: paleta de cores do Índice Diário de Qualidade do Ar (Reino Unido).
- DEU_UBA: paleta de cores do índice de qualidade do ar local da Alemanha.
- CAN_EC: paleta de cores do Índice de Saúde e Qualidade do Ar do Canadá.
- FRA_ATMO: paleta de cores do índice de qualidade do ar da França.
- US_AQI: paleta de cores do índice de qualidade do ar dos EUA.

API Pollen

- TREE_UP: o tipo de mapa de calor vai representar um mapa gráfico de índice de árvore.
- GRASS_UPI: o tipo de mapa de calor vai representar um mapa gráfico de índice de grama.
- WEED_UPI: o tipo de mapa de calor representa um mapa gráfico de índice de ervas daninhas.

Mostrar blocos de mapa de calor na Web

Carregue os blocos e aplique uma máscara vetorial para mostrar apenas as áreas desejadas da janela de visualização do mapa.

Carregar os blocos

Use a API Maps JavaScript para carregar o mapa de base do Google e a biblioteca deckgl para se preparar para carregar imagens de blocos rasterizados.
Use o TileLayer do deck.gl para carregar blocos de mapa de calor da Qualidade do ar . Isso exibirá o Google Maps.Rótulos do mapa base sobrepostos aos mosaicos do mapa de calor (diferenteSobreposições personalizadas em JavaScript para mapas )

import { TileLayer } from "deck.gl";
import { GoogleMapsOverlay } from "@deck.gl/google-maps";

// const TileLayer = deck.TileLayer;
// const GoogleMapsOverlay = deck.GoogleMapsOverlay;

// Initialize and add the map
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: 40, lng: -110 },
    zoom: 4,
  });

  const apiKey = 'YOUR_API_KEY';
 const airqualityType = 'UAQI_RED_GREEN' // AirQuality API heatmap type
  const deckOverlay = new GoogleMapsOverlay({
    layers: [
       // Heatmap Tiles layer
new TileLayer({
    id: 'heatmap-tiles',
    data: 'https://airquality.googleapis.com/v1/mapTypes/'+ heatmapType + +'/heatmapTiles/{z}/{x}/{y}?key=' + apiKey,
...
 })
    ],
  });

  deckOverlay.setMap(map);
}

window.initMap = initMap;

Aplicando uma máscara vetorial

Você pode ocultar ou exibir visualmente qualquer parte dos mosaicos do mapa de calor. Importante: Você precisará adquirir os dados que serão usados para criar a máscara vetorial aplicada aos mosaicos do mapa de calor.

Em uma área:

use deck.gl GeoJson para criar uma máscara sobre a camada de mosaico de qualidade do ar.

alt_text

O exemplo abaixo utiliza um GeoJSON multipolígono da França.

// geojson sample

{  "type": "Feature",
  "geometry": {
    "type": "MultiPolygon",
    "coordinates": [[[[-54.111527,2.11427],...[-54.194491,2.163073]]]]
  },
  "properties": {
    "name": "France"
  }
}

Confira uma referência para a implementação do deckgl:

  // Loaded layers in maps overlay
  const deckOverlay = new GoogleMapsOverlay({ layers: layers });
  const MaskExtension = deck.MaskExtension; // or import extension
  ...

  // As part of object containing the different layers
  const layers = [
    // Masking layer
  new GeoJsonLayer({
    id: 'country-vector',
    operation: 'mask',
    data: "geojson.json", // <-- any custom geometry
  })
  ...
  ...

  // Heatmap Tiles layer
  new TileLayer({
      id: 'heatmap-tiles',
      maskId: 'country-vector', // <-- same as mask id
    extensions: [new MaskExtension()],  // <-- enable mask extension
  ...
  })
  ]

Ao longo de uma rota: Use deck.gl com sua TripsLayer para criar uma Mask sobre a camada de qualidade do ar (Air Quality TileLayer).

Mapa de calor da qualidade do ar em mosaico ao longo de uma viagem

alt_text

Gerenciar solicitações de API e custos

Embora o comportamento padrão do navegador seja geralmente armazenar em cache todos os blocos carregados no armazenamento local (dentro da mesma sessão), você pode otimizar ainda mais:

Restringir a área de carregamento: crie uma caixa delimitadora (em vermelho) e atribua-a à camada; somente os mosaicos do mapa de calor (em azul) que cobrem a caixa delimitadora serão carregados em qualquer nível de zoom.

Caixa delimitadora (em vermelho), mosaicos do mapa de calor (em azul)

alt_text

 // Heatmap Tile layer
 new TileLayer({
    id: 'heatmap-tiles',
    extent: [minX, minY, maxX, maxY] // bounding box: southwest lat, southwest lng, northeast lat, northeast lng
    ...
 })

Defina o tamanho do bloco de exibição visual para cobrir toda a janela de visualização em qualquer nível de zoom. Recomendação: entre 256 e 1.024.
Importante: os blocos de APIs permanecem na resolução de 256 x 256, mas o ajuste da exibição visual permite aumentar/diminuir o número de solicitações de blocos para cobrir toda a janela de visualização do mapa.

Verifique se ele funciona com minZoom e maxZoom do Google Maps. Por exemplo, tilesize:1024 não vai carregar blocos no zoom 0 ou 1.

Janela de visualização com blocos de 256 x 256 pixels x 512 x 512 pixels

alt_text

    // Heatmap Tile layer
    new TileLayer({
        id: 'heatmap-tiles',
        tilesize:256, // <-- change to 512 for instance
        ...
    })

Ler valores de pixel

Para mostrar o valor correspondente em uma escala de cores

Você pode usar a biblioteca Luma.gl e o método readPixelsToArray em um evento onClick atribuído como prop à camada deck.gl.

Valor do pixel: rgba(128,0,0,255)

alt_text

BAIXO alt_text ALTO

  // Uint8Array pixel sample
  import { readPixelsToArray } from "@luma.gl/core";
  ...

  // assign on the TileLayer
  new TileLayer({
      id: 'heatmap-tiles',
  ...
    onClick: ({
    bitmap,
    layer
  }) => {
    if (bitmap) {
      const pixel = readPixelsToArray(layer.props.image, {
        sourceX: bitmap.pixel[0],
        sourceY: bitmap.pixel[1],
        sourceWidth: 1,
        sourceHeight: 1
      });
      // console.log("color picked:"+ pixel);
    }
  }
  })

Conclusão

Você descobriu como os endpoints da API de mapas de calor de Qualidade do Ar e Pólen podem ser:

carregado em um mapa do Google na Web, garantindo também estar em conformidade com os Termos de uso
Otimizado para atender ao seu caso de uso.
leia os valores dos ladrilhos

Próximas ações

Leitura adicional sugerida:

Conscientização sobre a qualidade do ar para locais que utilizam a API de Qualidade do Ar

Colaboradores

Principais autores:

Thomas Anglaret | Engenheiro de soluções da Plataforma Google Maps