Визуализируйте свои данные с помощью BigQuery и Datasets API

В этом документе представлена ​​эталонная архитектура и пример создания визуализаций данных карты с данными о местоположении в Google Cloud BigQuery и API наборов данных платформы Google Карт , например, для анализа открытых муниципальных данных, создания карты покрытия телекоммуникациями или визуализации следов перемещения парка мобильных транспортных средств.

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

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

Референтная архитектура

Разработка приложений с визуализацией больших объемов данных требует двух основных компонентов.

  1. Бэкэнд клиента — все данные и сервисы бэкэнд-приложения, такие как обработка и хранение.
  2. Клиентская часть — пользовательский интерфейс вашего приложения с компонентом визуализации карты.

Ниже представлена ​​системная диаграмма того, как эти два компонента взаимодействуют с пользователем приложения, Google Cloud и платформой Google Maps для создания большого приложения для визуализации данных.

architecture diagram

Конструктивные соображения

Чтобы создать эффективную визуализацию данных с использованием Google Cloud и платформы Google Maps, необходимо учитывать ряд проектных соображений.

  1. Размер исходных данных и частота обновления .
    1. Если исходные данные в формате geojson <5 МБ или обновляются очень часто, например, прогноз погоды с радара в реальном времени, рассмотрите возможность предоставления данных в виде объекта geojson на стороне клиента в вашем приложении и визуализации с помощью слоя deck.gl.
    2. Если размер ваших данных превышает 5 МБ и они обновляются не чаще одного раза в час, рассмотрите архитектуру API наборов данных, представленную в этом документе.
      1. Наборы данных поддерживают файлы размером до 350 МБ .
      2. Если объем ваших данных превышает 350 МБ, рассмотрите возможность сокращения или упрощения геометрических данных в исходном файле перед передачей их в наборы данных (см. раздел «Обрезка данных» ниже).
  2. Схема и формат
    1. Убедитесь, что ваши данные имеют глобально уникальное свойство ID для каждой функции. Уникальный ID позволяет вам выбирать и стилизовать определенную функцию или присоединять данные к функции для визуализации, например, стилизовать выбранную функцию для пользовательского события «щелчок».
    2. Отформатируйте данные как CSV или GeoJSON в соответствии со спецификацией API наборов данных, указав допустимые имена столбцов, типы данных и типы объектов GeoJSON.
    3. Для простого создания наборов данных из BigQuery создайте столбец с именем wkt в экспорте SQL CSV. Наборы данных поддерживают импорт геометрии из CSV в формате Well-Known Text (WKT) из столбца с именем wkt .
    4. Проверьте, что ваши данные имеют допустимую геометрию и типы данных. Например, GeoJSON должен быть в системе координат WGS84, геометрический порядок намотки и т. д.
    5. Используйте такой инструмент, как geojson-validate , чтобы убедиться, что все геометрии в исходном файле являются допустимыми, или ogr2ogr для преобразования исходного файла между форматами или системами координат.
  3. Сокращение данных
    1. Минимизируйте количество свойств функций. Вы можете присоединить дополнительные свойства к функции во время выполнения по уникальному ключу идентификатора ( пример ).
    2. По возможности используйте целочисленные типы данных для объектов свойств, чтобы минимизировать пространство для хранения плиток, сохраняя производительность загрузки плиток по HTTPS в клиентском приложении.
    3. Упростите и/или агрегируйте очень сложную геометрию объектов; рассмотрите возможность использования функций BigQuery, таких как ST_Simplify, для сложной полигональной геометрии, чтобы уменьшить размер исходного файла и улучшить производительность карты.
  4. Плиточный
    1. API наборов данных Google Карт создает фрагменты карты из исходного файла данных для использования с веб- или мобильным SDK Карт.
    2. Фрагменты карты — это система индексации на основе масштабирования, которая обеспечивает более эффективные способы загрузки данных в визуальное приложение.
    3. Плитки карты могут отбрасывать плотные или сложные объекты на более низких уровнях масштабирования. Когда пользователь уменьшает масштаб до штата или страны (например, z5-z12), может выглядеть иначе, чем при увеличении до города или района (например, z13-z18).

Пример - Железные дороги в Лондоне

В этом примере мы применим эталонную архитектуру для создания веб-приложения с Google Cloud и Google Maps, которое визуализирует все железные дороги Лондона на основе данных Open Street Map (OSM).

Предпосылки

  1. Доступ к BigQuery Sandbox и Cloud Console
  2. Убедитесь, что у вас есть проект Google Cloud и настроенный платежный аккаунт.

Шаг 1 — Запрос данных в BigQuery

Перейдите в BigQuery Public Datasets . Набор данных bigquery-public-data и таблица geo_openstreetmap.planet_features содержат все данные Open Street Map (OSM) по всему миру, включая все возможные функции. Откройте для себя все доступные функции для запроса в OSM Wiki, включая amenity , road и landuse .

Используйте Cloud Shell или BigQuery Cloud Console для запроса таблицы с помощью SQL. Фрагмент кода ниже использует команду bq query для запроса всех железных дорог, отфильтрованных только по Лондону, с помощью ограничивающего прямоугольника и функции ST_Intersects() .

Чтобы выполнить этот запрос из Cloud Shell, запустите следующий фрагмент кода, обновив идентификатор проекта, набор данных и имя таблицы для вашей среды.

bq query --use_legacy_sql=false \
--destination_table PROJECTID:DATASET.TABLENAME \
--replace \
'SELECT
osm_id, 
feature_type,
(SELECT value
         FROM   unnest(all_tags)
         WHERE  KEY = "name") AS name,
(SELECT value
         FROM   unnest(all_tags)
         WHERE  KEY = "railway") AS railway,
geometry as wkt
FROM   bigquery-public-data.geo_openstreetmap.planet_features
WHERE ("railway") IN (SELECT key FROM unnest(all_tags)) 
    AND ST_Intersects(
    geometry,
ST_MakePolygon(ST_MakeLine(
      [ST_GeogPoint(-0.549370, 51.725346),
      ST_GeogPoint(-0.549370, 51.2529407),
      ST_GeogPoint(0.3110581, 51.25294),
      ST_GeogPoint(0.3110581, 51.725346),
      ST_GeogPoint(-0.549370, 51.725346)]
    ))
   )'

Запрос возвращает:

  1. уникальный идентификатор для каждой функции osm_id
  2. feature_type например, точки, линии и т. д.
  3. name объекта, например, Paddington Station
  4. Тип railway , например, магистральная, туристическая, военная и т. д.
  5. wkt объекта — геометрия точки, линии или полигона в формате WKT. WKT — это стандартный формат данных, который столбцы BigQuery Geography возвращают в запросе.

Примечание. Чтобы визуально проверить результаты запроса перед созданием набора данных, вы можете быстро визуализировать данные на панели мониторинга BigQuery с помощью Looker Studio .

Чтобы экспортировать таблицу в CSV-файл в хранилище Google Cloud Storage, используйте команду bq extract в Cloud Shell:

bq extract \
--destination_format "CSV" \
--field_delimiter "," \
--print_header=true \
PROJECTID:DATASET.TABLENAME \
gs://BUCKET/FILENAME.csv

Примечание: вы можете автоматизировать каждый шаг с помощью Cloud Scheduler для регулярного обновления данных.

Шаг 2 — Создайте набор данных из вашего CSV-файла

Затем создайте набор данных Google Maps Platform из выходных данных запроса в Google Cloud Storage (GCS). Используя API наборов данных , вы можете создать набор данных , а затем загрузить данные в свой набор данных из файла, размещенного в GCS.

Чтобы начать, включите API наборов данных Карт в вашем проекте Google Cloud и ознакомьтесь с документацией API . Существуют клиентские библиотеки Python и Node.js для вызова API наборов данных из логики в бэкэнде вашего приложения. Кроме того, есть графический интерфейс для создания наборов данных вручную в Cloud Console.

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

Dataset preview

Шаг 4 — Свяжите свой набор данных с идентификатором карты

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

Шаг 5 — Создайте визуализацию карты клиентского приложения

Наконец, вы можете добавить набор данных в клиентское приложение визуализации данных с помощью Maps JS API . Инициализируйте объект карты, используя mapID, связанный с вашим набором данных из предыдущего шага. Затем задайте стиль и интерактивность вашего слоя Dataset. Ознакомьтесь с полным руководством по стилю, управляемому данными, с помощью Datasets для получения более подробной информации.

Вы можете настроить стиль, добавить обработчики событий для динамического изменения стиля и многое другое с помощью Maps JS API. Смотрите примеры в документации . Ниже мы определим функцию setStyle для создания стиля точечного и линейного объекта для этого примера на основе атрибута "feature_type".

function setStyle(params) {
  const map.getDatasetFeatureLayer("your-dataset-id");
  const datasetFeature = params.feature;
  const type = datasetFeature.datasetAttributes["feature_type"];
if (type == "lines") {
           return {
             fillColor: "blue",
             strokeColor: "blue",
             fillOpacity: 0.5,
             strokeWeight: 1,
           }
         } else if (type == "points") {
           return {
             fillColor: "black",
             strokeColor: "black",
             strokeOpacity: 0.5,
             pointRadius: 2,
             fillOpacity: 0.5,
             strokeWeight: 1,
           }
     }
}

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

london railway map

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

Заключение

В этом документе мы обсудили эталонную архитектуру и пример реализации приложения визуализации больших данных с использованием Google Cloud и Google Maps Platform. Используя эту эталонную архитектуру, вы можете создавать приложения визуализации данных о местоположении из любых данных в Google Cloud BigQuery, которые будут работать на любом устройстве с использованием API наборов данных Google Maps.

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

Дальнейшее чтение:

Участники

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