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

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

Цель

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

alt_text

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

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

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

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

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

Выполнение

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

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

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

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

API пыльцы

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

Отображение плиток тепловой карты в Интернете

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

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

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

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

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

В районе:

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

alt_text

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

// geojson sample

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

Вот ссылка на реализациюeckgl :


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

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

Рекомендуемое дальнейшее чтение:

Осведомленность о качестве воздуха для мест с использованием Air Quality API

Авторы

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

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