Эта страница переведена с помощью Cloud Translation API.

Качество воздуха и содержание пыльцы в районах и на маршрутах.

Цель

API-интерфейсы для анализа качества воздуха и содержания пыльцы предоставляют отличные возможности для получения дополнительной информации о поездке или карте в любом заданном месте. Доступные через эти API данные можно использовать двумя способами: индексирование в виде текста или отображение в виде растровых изображений для тепловых карт.

alt_text

При использовании API-интерфейсов для загрузки отдельных растровых тайлов тепловых карт вы можете столкнуться с рядом проблем, таких как:

Как загрузить тайлы на карту Google Maps в веб-версии? (также в соответствии с условиями использования API)
Как управлять количеством запросов во время работы?
Как считывать значения тайлов?

Примеры использования

Вам будут представлены примеры использования, чтобы вы могли попытаться ответить на вышеуказанные вопросы.

Качество воздуха и содержание пыльцы в районе: визуализация тепловых карт (текущие условия) на основе растровых данных внутри одного или нескольких пользовательских полигонов.
Качество воздуха и содержание пыльцы вдоль маршрута: визуализация тепловых карт (текущие условия) на основе растровых данных, нанесенных на путевые точки маршрута.

Выполнение

Вы узнаете, какие тайлы доступны и как их можно загрузить в веб-интерфейс. Вы также увидите, как управлять количеством запросов в сценарии загрузки тайлов на карту. Наконец, вам будет показано, как считывать данные с тайлов.

Доступные фрагменты тепловой карты по типам

API качества воздуха

- UAQI_RED_GREEN (UAQI, красно-зеленая палитра): Красно-зеленая палитра Универсального индекса качества воздуха.
- UAQI_INDIGO_PERSIAN (UAQI, палитра indigo-persian): Универсальный индекс качества воздуха, палитра indigo-persian.
- PM25_INDIGO_PERSIAN: PM2.5 index indigo-persian palette.
- GBR_DEFRA: Цветовая палитра ежедневного индекса качества воздуха (Великобритания).
- DEU_UBA: цветовая палитра немецкого локального индекса качества воздуха.
- CAN_EC: Цветовая палитра Канадского индекса качества воздуха для здоровья.
- FRA_ATMO: Цветовая палитра Индекса качества воздуха во Франции.
- US_AQI: Цветовая палитра индекса качества воздуха в США.

API пыльцы

- TREE_UP: Тип тепловой карты будет представлять собой графическую карту древовидного индекса.
- GRASS_UPI: Тип тепловой карты будет представлять собой графическую карту индекса травы.
- WEED_UPI: Тип тепловой карты будет представлять собой графическое отображение индекса сорняков.

Отображение фрагментов тепловой карты в веб-версии

Загрузите тайлы и примените векторную маску, чтобы отображать только нужные области в окне просмотра карты.

Загрузка плиток

Используйте API JavaScript для карт , чтобы загрузить базовую карту Google , и загрузите библиотеку DeckGL для подготовки к загрузке растровых изображений.
Используйте deck.gl TileLayer для загрузки тайлов тепловой карты качества воздуха . Это позволит отображать метки базовой карты Google Maps поверх тайлов тепловой карты (в отличие от пользовательских наложений JavaScript в Google Maps ).

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;

Применение векторной маски

Вы можете визуально скрывать или отображать любую часть фрагментов тепловой карты. Важно: вам потребуется получить данные , которые будут использоваться для создания векторной маски, применяемой к фрагментам тепловой карты.

В данной местности:

Используйте файл deck.gl GeoJson для создания маски поверх слоя с данными о качестве воздуха.

alt_text

В приведенном ниже примере используется многоугольный GeoJSON-файл с изображением Франции.

// geojson sample

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

Вот ссылка на реализацию 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
  ...
  })
  ]

Вдоль маршрута: используйте deck.gl с его TripsLayer для создания маски поверх слоя Air Quality TileLayer.

Плитка тепловой карты качества воздуха за поездку

alt_text

Управление запросами API и их стоимостью.

Хотя браузер по умолчанию обычно кэширует все загруженные элементы в локальном хранилище (в рамках одной сессии), вы можете дополнительно оптимизировать этот процесс:

Ограничьте область загрузки: создайте ограничивающую рамку (красного цвета) и назначьте её слою; при любом уровне масштабирования будут загружаться только фрагменты тепловой карты (синего цвета), покрывающие эту ограничивающую рамку.

Ограничивающая рамка (красным цветом), фрагменты тепловой карты (синим цветом)

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

Установите размер визуального фрагмента таким образом, чтобы он покрывал всю область просмотра при любом уровне масштабирования; рекомендуется: от 256 до 1024.
Важно: разрешение тайлов API остается 256x256, но визуальная настройка отображения позволит вам увеличить/уменьшить количество запросов тайлов для покрытия всей области просмотра карты.
(Убедитесь, что это работает с параметрами minZoom и maxZoom карты Google, т.е.: tilesize:1024 не будет загружать тайлы при масштабе 0 или 1).

Область просмотра с тайлами 256x256 пикселей против 512x512 пикселей

alt_text

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

Считывание значений пикселей

Для отображения соответствующего значения на цветовой шкале

Вы можете использовать библиотеку Luma.gl и её метод readPixelsToArray при событии onClick, назначенном в качестве свойства слою deck.gl.

Значение пикселя: rgba(128,0,0,255)

alt_text

НИЗКИЙ alt_text ВЫСОКИЙ

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

Заключение

Вы узнали, как можно использовать API-интерфейсы для отображения тепловых карт качества воздуха и пыльцы :

Размещено на карте Google в веб-версии, при этом необходимо соблюдать условия использования.
оптимизировано под ваш сценарий использования
прочтите значения плиток

Следующие действия

Рекомендуемая дополнительная литература:

Информация о качестве воздуха в населенных пунктах, использующих API качества воздуха.

Авторы

Основные авторы:

Томас Англаре | Инженер по решениям для платформы Google Maps