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

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

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

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

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

Эталонная архитектура

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

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

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

architecture diagram

⭐ Примечание. API наборов данных Карт — это продукт, предшествующий общедоступной версии . Подробности смотрите в Условиях обслуживания .

Пример — железные дороги в Лондоне.

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

Предварительные условия

Доступ к тестовой среде BigQuery и облачной консоли
Убедитесь, что у вас есть проект GCP и настроен платежный аккаунт.

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

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

Используйте Cloud Shell или BigQuery Cloud Console ( https://console.cloud.google.com ), чтобы запросить таблицу с помощью SQL. В приведенном ниже фрагменте кода используется команда запроса bq для запроса всех железных дорог, отфильтрованных только по Лондону, с использованием ограничивающего прямоугольника и функции 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)]
    ))
   )'

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

уникальный идентификатор для каждой функции osm_id
feature_type , например, точки, линии и т. д.
name объекта, например, Paddington Station
Тип railway , например, главная, туристическая, военная и т. д.
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 на основе результатов запроса в Google Cloud Storage (GCS). Используя API наборов данных , вы можете создать набор данных , а затем загрузить в него данные из файла, размещенного на GCS.

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

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

Dataset preview

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

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

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

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

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

Примечание. Обязательно используйте канал v=beta для реализации Maps JS API.

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,
           }
     }
}

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

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

london railway map

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

Заключение

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

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

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

Авторы

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

Райан Бауманн , инженер-менеджер по платформенным решениям Google Maps