Визуализируйте данные с помощью Google Maps Platform и deck.gl

О практической работе

Последнее обновление: мая 11, 2022

Автор: сотрудник Google

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

1. Прежде чем вы начнете

Эта лабораторная работа научит вас создавать визуализацию больших объемов геопространственных данных с помощью Maps JavaScript API и deck.gl, среды визуализации данных с открытым исходным кодом, ускоренной WebGL.

Предпосылки

Что ты будешь делать

Интегрируйте платформу Google Maps с deck.gl.
Импортируйте набор данных на карту из BigQuery.
Определите точки данных на карте.

Что вам понадобится

Аккаунт Google
Текстовый редактор или IDE на ваш выбор
Базовые знания JavaScript, HTML и CSS

2. Настройте свою среду

Начало работы с платформой Google Карт

Если вы еще не использовали платформу Google Maps, выполните следующие действия:

Скачать Node.js

Если у вас его еще нет, перейдите на https://nodejs.org/ и загрузите и установите среду выполнения Node.js на свой компьютер.

Node.js включает в себя npm, менеджер пакетов, который вам нужен для установки зависимостей для этой лаборатории кода.

Настроить стартовый проект

Чтобы сэкономить ваше время, начальный проект для этой кодовой лаборатории включает в себя весь шаблонный код, необходимый для создания экземпляра карты.

Чтобы начать, выполните следующие действия:

Клонируйте или скачайте этот репозиторий .
Из командной строки перейдите в каталог /starter , который содержит базовую файловую структуру, необходимую для выполнения этой лаборатории кода.
Установите зависимости из npm, выполнив следующую команду:

npm install

Запустите начальный проект в своем браузере с Webpack Dev Server, выполнив следующую команду:

npm start

    The starter app opens in your browser and displays a map.

Откройте проект в IDE и перейдите в каталог /starter/src .
Откройте файл app.js

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

const googleMapsAPIKey = 'YOUR API KEY';
loadJSAPI();
function runApp() {
  // Your code goes here
}

Вы ничего не сделаете с остальным кодом в файле, который загружает Maps JavaScript API и карту:

/* API and map loader helpers */
function loadJSAPI() {
  const googleMapsAPIURI = `https://maps.googleapis.com/maps/api/js?key=${googleMapsAPIKey}&callback=runApp`;
  const script = document.createElement('script');

  script.src = googleMapsAPIURI;
  script.defer = true;
  script.async = true;

  window.runApp = runApp;
  document.head.appendChild(script);
}

function initMap() {
  const mapOptions = {
    center: { lat: 40.75097, lng: -73.98765 },
    zoom: 14,
    styles: mapStyle
  };
  const mapDiv = document.getElementById('map');
  return new google.maps.Map(mapDiv, mapOptions);
}

Замените YOUR API KEY вашим фактическим ключом API, который вы сгенерировали при настройке среды:

const googleMapsAPIKey = 'YOUR API KEY';

3. Экспорт данных из BigQuery

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

Используйте BigQuery для экспорта общедоступного набора данных, который включает данные о местоположении для Citi Bike в Нью-Йорке, программы проката велосипедов с 14 500 велосипедами и 900 местоположениями, выполнив следующие действия:

Перейдите в облачную консоль .
Нажмите Меню навигации > Большой запрос .
В редакторе запросов введите следующий запрос и нажмите « Выполнить» :

SELECT
    longitude,
    latitude,
    name,
    capacity
FROM
    `bigquery-public-data.new_york_citibike.citibike_stations`

После завершения запроса нажмите « Сохранить результаты » и выберите JSON (локальный файл) , чтобы экспортировать набор результатов. Назовите файл stations.json и сохраните его в каталоге /src .

Теперь, когда вы получили свои данные, вы можете создать свою первую визуализацию с помощью deck.gl.

4. Определите визуализацию

Deck.gl — это фреймворк для визуализации данных с открытым исходным кодом, который использует WebGL для создания 2D- и 3D-визуализации чрезвычайно больших наборов данных с высоким разрешением. Он может обрабатывать сотни тысяч точек данных, а при оптимизации даже миллионы из них.

Чтобы создать визуализацию, вам понадобятся два класса — GoogleMapsOverlay и один из множества слоев визуализации в файле deck.gl.

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

Импортируйте класс ScatterplotLayer из deck.gl, добавив следующее в начало app.js :

import { ScatterplotLayer } from '@deck.gl/layers';

Задайте свойства слоя , выбрав один из двух типов свойств, доступных для слоя диаграммы рассеяния deck.gl.

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

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

id позволяет визуализатору идентифицировать слои по разным причинам, таким как перерисовка и другие обновления визуализации. Все слои deck.gl требуют уникального идентификатора, который вы назначаете.
data указывает источник данных визуализации. Установите значение './stations.j son», чтобы использовать набор данных, экспортированный из BigQuery.
getPosition извлекает позицию каждого объекта из источника данных. Обратите внимание, что значение свойства является функцией. Deck.gl использует эту функцию для перебора каждой строки в наборе данных. Функция сообщает средству визуализации, как получить доступ к широте и долготе точки данных в каждой строке. В этом наборе данных данные в каждой строке представляют собой объект JSON с позицией, заданной в свойствах широты и долготы, поэтому функция, которую вы предоставляете для getPosition , имеет вид d => [parseFloat(d.longitude), parseFloat(d.latitude)] .
getRadius определяет радиус каждого объекта в метрах. В этом случае радиус устанавливается d => parseInt(d.capacity) , который устанавливает размер точек данных на основе пропускной способности каждой станции.
stroked устанавливает, имеют ли визуализированные точки данных обводку на своих внешних краях.
getFillColor устанавливает цвет заливки каждой точки данных в виде цветового кода RGB.
getLineColor устанавливает цвет обводки каждой точки данных в виде цветового кода RGB.
radiusMinPixels устанавливает минимальную ширину в пикселях для каждой точки данных. Когда пользователи увеличивают и уменьшают масштаб, deck.gl автоматически изменяет масштаб точек данных, чтобы визуализация была четко видна на карте. Это свойство позволяет вам контролировать степень изменения размера.
radiusMaxPixels устанавливает максимальную ширину в пикселях для каждой точки данных.

const layerOptions = {
  id: 'scatter-plot',
  data: './stations.json',
  getPosition: d => [parseFloat(d.longitude), parseFloat(d.latitude)],
  getRadius: d => parseInt(d.capacity),
  stroked: true,
  getFillColor: [255, 133, 27],
  getLineColor: [255, 38, 27],    
  radiusMinPixels: 5,
  radiusMaxPixels: 50
};

Создайте экземпляр класса ScatterplotLayer для deck.gl:

const scatterplotLayer = new ScatterplotLayer(layerOptions);

После того, как вы заполните этот раздел, ваш код должен выглядеть так:

import { ScatterplotLayer } from '@deck.gl/layers';

const googleMapsAPIKey = 'YOUR API KEY';

loadJSAPI();
function runApp() {
  const map = initMap();
  const layerOptions = {
    id: 'scatterplot',
    data: './stations.json',
    getPosition: d => [parseFloat(d.longitude), parseFloat(d.latitude)],
    getRadius: d => parseInt(d.capacity),
    stroked: true,
    getFillColor: [255, 133, 27],
    getLineColor: [255, 38, 27],    
    radiusMinPixels: 5,
    radiusMaxPixels: 50
  };

  const scatterplotLayer = new ScatterplotLayer(layerOptions);
}

5. Применить визуализацию к карте

Теперь вы можете применить свой экземпляр ScatterplotLayer к карте с помощью класса GoogleMapsOverlay , который использует Maps JavaScript API OverlayView API для внедрения контекста WebGL поверх карты.

Как только это будет сделано, вы можете передать любой из слоев визуализации deck.gl в GoogleMapsOverlay , который визуализирует слой и синхронизирует его с картой.

Чтобы применить ScatterplotLayer к карте, выполните следующие действия:

Импортируйте класс GoogleMapsOverlay из deck.gl:

import { GoogleMapsOverlay } from '@deck.gl/google-maps';

Создайте экземпляр класса GoogleMapsOverlay и передайте ему экземпляр scatterplotLayer , который вы создали ранее в свойстве layers объекта:

const googleMapsOverlay = new GoogleMapsOverlay({
    layers: [scatterplotLayer]
  });

Примените наложение к карте:

 googleMapsOverlay.setMap(map);

После того, как вы заполните этот раздел, ваш код должен выглядеть так:

import { GoogleMapsOverlay } from '@deck.gl/google-maps';
import { ScatterplotLayer } from '@deck.gl/layers';

const googleMapsAPIKey = 'YOUR API KEY';

loadJSAPI();
function runApp() {
  const map = initMap();
  const layerOptions = {
    id: 'scatter-plot',
    data: './stations.json',
    getPosition: d => [parseFloat(d.longitude), parseFloat(d.latitude)],
    getRadius: d => parseInt(d.capacity),
    stroked: true,
    getFillColor: [255, 133, 27],
    getLineColor: [255, 38, 27],    
    radiusMinPixels: 5,
    radiusMaxPixels: 50
  };
  const scatterplotLayer = new ScatterplotLayer(layerOptions);
  const googleMapsOverlay = new GoogleMapsOverlay({
    layers: [scatterplotLayer]
  });
  googleMapsOverlay.setMap(map);
}

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

6. Поздравления

Поздравляем! Вы создали визуализацию больших объемов данных о велосипедах Citi в Нью-Йорке с помощью Google Maps Platform и deck.gl.

Учить больше

Maps JavaScript API предоставляет вам доступ ко всему, что предлагает платформа Google Maps для Интернета. Узнайте больше о работе с платформой Google Карт в Интернете, пройдя по этим ссылкам:

Deck.gl предлагает множество слоев визуализации данных, которые вы можете использовать для отображения данных вашим пользователям. Узнайте больше об использовании deck.gl с Maps JavaScript API, перейдя по этим ссылкам:

Сообщить об ошибке