Esta página foi traduzida pela API Cloud Translation.

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

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: indexando como blocos de texto ou de mapa de calor como imagens rasterizadas.

alt_text

Ao usar os endpoints das APIs de blocos de mapa de calor, você pode enfrentar alguns desafios ao carregar os blocos rasterizados 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?

Casos de uso de exemplo

Você verá exemplos de casos de uso para tentar responder às perguntas acima.

Qualidade do ar e Pólen em uma área:veja dados rasterizados de blocos do 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: visualizar dados rasterizados de blocos de mapa de calor (condições atuais) mapeados em waypoints dos trajetos;

Implementação

Você descobrirá quais blocos estão disponíveis e como eles podem ser carregados em uma experiência da Web. Você também verá 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): paleta de índigo-persa do índice universal de qualidade do ar.
- PM25_INDIGO_PERSIAN: paleta de índice índigo-persa com índice PM2,5.
- GBR_DEFRA: paleta de cores do índice diário de qualidade do ar (Reino Unido).
- DEU_UBA: paleta de cores da Alemanha para o índice de qualidade do ar local da Alemanha.
- CAN_EC: paleta de cores do índice de saúde da qualidade do ar canadense.
- 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 representará um mapa gráfico com índice de árvore.
- GRASS_UPI: o tipo de mapa de calor representará um mapa gráfico com índice de grama.
- WEED_UPI: o tipo de mapa de calor representa um mapa de índice de ervas daninhas graficamente.

Mostrar blocos de mapa de calor na Web

Carregar os blocos e aplicar uma máscara vetorial para exibir somente áreas desejadas da janela de visualização do mapa.

Como carregar os blocos

Use a API Maps JavaScript para carregar o mapa básico do Google e a biblioteca deckgl a fim de se preparar para o carregamento de imagens de blocos rasterizadas.
Use a TileLayer do deck.gl para carregar blocos do mapa de calor Qualidade do ar . Isso vai mostrar os marcadores do mapa de base do Google Maps na parte de cima dos blocos do mapa de calor (diferente das sobreposições personalizadas do Maps JavaScript).


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;

Como aplicar uma máscara vetorial

É possível ocultar ou mostrar visualmente qualquer parte dos blocos do mapa de calor. Importante: é necessário adquirir os dados que serão usados para criar a máscara vetorial aplicada aos blocos do mapa de calor.

Em uma área:

Use o GeoJson do deck.gl para criar uma máscara na TileLayer da qualidade do ar.

alt_text

O exemplo abaixo usa 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"
  }
}

Esta é 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 um trajeto: use o arquivo deck.gl com a TripsLayer para criar uma máscara sobre a TileLayer da qualidade do ar

Bloco do mapa de calor da Qualidade do ar em uma viagem

alt_text

Gerenciar o custo e as solicitações de API

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

Restrinja a área de carregamento: crie uma caixa delimitadora (em vermelho) e a atribua à camada. Somente os blocos do mapa de calor (em azul) que cobrem a caixa delimitadora serão carregados em qualquer nível de zoom especificado.

Caixa delimitadora (em vermelho), blocos de 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
    ...
 })

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

Certifique-se de que ele funciona com minZoom e maxZoom do Google Maps, isto é, tilesize:1024 não carregará blocos com zoom 0 ou 1.

Janela de visualização com blocos de 256 x 256 pixels vs. 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

Mostrar o valor correspondente em uma escala de cores

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

Valor de pixel: RGBa(128,0,0,255)

alt_text

MÍNIMO alt_text ALTA


  // 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 blocos de mapa de calor Air Quality e Pollen podem ser:

carregados em um mapa do Google na Web, seguindo os Termos de Uso
otimizada para seu caso de uso
Ler os valores dos blocos

Próximas ações

Leitura adicional sugerida:

Reconhecimento da qualidade do ar para locais usando a API Air Quality

Colaboradores

Autores principais:

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