Тайлы качества воздуха и пыльцы

Цель

Air Quality API и Pollen API позволяют добавлять на карту или в маршрут дополнительные данные. Данные, доступные через эти API, можно использовать двумя способами: как индекс в виде текста или как фрагменты тепловой карты в виде растровых изображений.

При использовании конечных точек API тепловых карт при загрузке отдельных растровых тайлов могут возникнуть следующие проблемы:

• как загрузить тайлы на карту Google в интернете; (а также для соблюдения Условий использования API).
• Как управлять количеством запросов во время эксперимента?
• Как интерпретировать значения на плитках?

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

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

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

Реализация

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

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

Air Quality API

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

Pollen API

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

Как показывать фрагменты тепловой карты в веб-версии

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

Загрузка карточек

• Используйте Maps JavaScript API, чтобы загрузить базовую карту Google и библиотеку deckgl для подготовки к загрузке растровых изображений фрагментов.
• Используйте TileLayer из deck.gl, чтобы загрузить тайлы тепловой карты качества воздуха . В этом случае метки базовой карты Google будут отображаться поверх фрагментов тепловой карты (в отличие от собственных наложений 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;

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

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

• В области:

используйте GeoJson deck.gl, чтобы создать маску поверх TileLayer качества воздуха.

В примере ниже используется мультиполигон 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.

Фрагмент тепловой карты качества воздуха на маршруте

Как управлять запросами к API и расходами

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

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

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

 // 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 останется прежним (256 x 256), но корректировка визуального отображения позволит вам увеличить или уменьшить количество запросов фрагментов, чтобы охватить всю область просмотра карты.

  (убедитесь, что он работает с параметрами minZoom и maxZoom Google Карт, то есть tilesize:1024 не будет загружать тайлы при масштабе 0 или 1).

Область просмотра с фрагментами 256 x 256 пикселей и 512 x 512 пикселей

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

Совет. Чтобы избежать визуального конфликта между элементами, используйте для настройки отрисовки элементов слоя параметр refinementStrategy:'no-overlap' вместо 'best-available'.

Как читать значения пикселей

Внимание! Вы можете читать и кешировать в течение одного часа (не бессрочно) фрагменты тепловой карты или любые значения, полученные из отдельных пикселей, содержащихся в фрагментах Air Quality или Pollen API. Чтобы проверить реализацию, ознакомьтесь с условиями использования Air Quality API в разделе 16.

Чтобы показать соответствующее значение на цветовой шкале

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

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

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

  // 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 Карты в интернете, соблюдая Условия использования.
• оптимизированные для вашего варианта использования
• прочитать значения карточек

Дальнейшие действия

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

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

Авторы

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

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