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

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

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

В этой лабораторной работе вы научитесь создавать визуализацию геопространственных данных большого объема с использованием API JavaScript Карт и deck.gl — фреймворка визуализации данных с открытым исходным кодом и ускорением WebGL.

Предпосылки

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

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

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

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

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

Начните работу с платформой Google Карт

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

Загрузить 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
}

С остальной частью кода в файле, которая загружает API JavaScript Карт и карту, вам ничего делать не придется:

/* 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 пунктами проката, выполнив следующие действия:

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

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.

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

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

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 , который использует API Maps JavaScript API OverlayView для внедрения контекста 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 Bike в Нью-Йорке с помощью платформы Google Карт и deck.gl.

Узнать больше

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

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