使用 Google Maps Platform 和 deck.gl 将数据可视化

1. 准备工作

此 Codelab 会教您如何使用 Maps JavaScript API 和 deck.gl(一个采用 WebGL 加速技术的开源数据可视化框架)将大量地理空间数据可视化。

d01802e265548be1.png

前提条件

您应执行的操作

  • 将 Google Maps Platform 与 deck.gl 集成。
  • 将数据集从 BigQuery 导入地图。
  • 在地图上定义数据点。

所需条件

  • Google 帐号
  • 您选择的文本编辑器或 IDE
  • 具备 JavaScript、HTML 和 CSS 方面的基础知识

2. 设置环境

开始使用 Google Maps Platform

如果您之前从未使用过 Google Maps Platform,请按照以下步骤操作:

  1. 创建结算帐号。
  2. 创建项目。
  3. 启用 Google Maps Platform API 和 SDK。
  4. 生成 API 密钥。

下载 Node.js

如果您还没有 Node.js,请转到 https://nodejs.org/,然后在计算机上下载并安装 Node.js 运行时。

Node.js 包括 npm,您需要此软件包管理器才能为此 Codelab 安装依赖项。

设置入门级项目

为了帮您节省时间,此 Codelab 的入门级项目包含了实例化地图所需的所有样板代码。

要开始操作,请执行以下步骤:

  1. 克隆或下载此代码库
  2. 从命令行导航到 /starter 目录,该目录中包含完成此 Codelab 所需的基本文件结构。
  3. 运行以下命令,以通过 npm 安装依赖项:
npm install
  1. 运行以下命令,以使用 Webpack Dev Server 在浏览器中运行入门级项目:
npm start
    The starter app opens in your browser and displays a map.
  1. 在 IDE 中打开该项目,并导航到 /starter/src 目录。
  2. 打开 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);
}
  1. YOUR API KEY 替换为您在设置环境时生成的实际 API 密钥:
const googleMapsAPIKey = 'YOUR API KEY';

3. 从 BigQuery 导出数据

BigQuery 提供了许多公共数据集,您可以用它们来进行数据分析或实验。

使用 BigQuery 导出包含纽约市 Citi Bike(一个具有 14500 辆单车和 900 个服务点的共享单车计划)位置数据的公共数据集,具体步骤如下:

  1. 前往 Cloud Console
  2. 点击导航菜单 41e8e87b85b0f93.png > BigQuery
  3. 在查询编辑器中,输入以下查询并点击运行
SELECT
    longitude,
    latitude,
    name,
    capacity
FROM
    `bigquery-public-data.new_york_citibike.citibike_stations`
  1. 查询完成后,点击保存结果,然后选择 JSON(本地文件)以导出结果集。将该文件命名为 stations.json,并将其保存在 /src 目录中。

2f4932829f7e1f78.png

现在您已获得数据,可以使用 deck.gl 进行首次可视化了。

4. 定义可视化

deck.gl 是一个开源数据可视化框架,使用 WebGL 对超大型数据集进行高分辨率的 2D 和 3D 渲染。它可以处理数十万个数据点,经过优化后,甚至还能处理数百万个数据点。

要进行可视化,您需要两个类:GoogleMapsOverlay 和 deck.gl 的众多可视化图层之一。

首先,创建 ScatterplotLayer 实例,该实例会在地图上将数据点渲染为圆形:

  1. 将以下代码添加到 app.js 的顶部,以导入 deck.gl 的 ScatterplotLayer 类:
import { ScatterplotLayer } from '@deck.gl/layers';
  1. 从适用于 deck.gl 散点图层的两类属性中进行选择,以设置图层属性

设置器属性可向可视化提供需要渲染的信息,例如数据点的位置和半径。利用样式器属性则可以自定义可视化结果的样式。

下面是您在后面的代码段中使用的各个属性的详情:

  • id 可帮助渲染程序确定相应图层,以完成各种操作(例如重新绘制可视化结果或进行其他更新)。所有 deck.gl 图层都必须具有您为其分配的唯一 ID。
  • data 用于指定可视化的数据源。将其设置为 ‘./stations.json' 即可使用您从 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
};
  1. 创建 deck.gl ScatterplotLayer 类的实例:
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. 将可视化结果应用到地图

现在,您可以通过 GoogleMapsOverlay 类将 ScatterplotLayer 实例应用到地图,该类会使用 Maps JavaScript API OverlayView API 在地图上方注入 WebGL 上下文。

注入 WebGL 上下文后,您可以将 deck.gl 的任意可视化图层传递给 GoogleMapsOverlay,它可以渲染该图层并将其与地图同步。

要将 ScatterplotLayer 应用到地图,请执行以下步骤:

  1. 导入 deck.gl 的 GoogleMapsOverlay 类:
import { GoogleMapsOverlay } from '@deck.gl/google-maps';
  1. 创建 GoogleMapsOverlay 类的实例,并通过某个对象的 layers 属性传入您之前创建的 scatterplotLayer 实例:
const googleMapsOverlay = new GoogleMapsOverlay({
    layers: [scatterplotLayer]
  });
  1. 将该叠加层应用到地图:
 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 服务点。

d01802e265548be1.png

6. 恭喜

恭喜!您已使用 Google Maps Platform 和 deck.gl 将纽约市 Citi Bike 的大量数据可视化。

了解更多内容

借助 Maps JavaScript API,您可以访问 Google Maps Platform 面向网络提供的所有资源。点击以下链接,详细了解如何在网络上使用 Google Maps Platform:

deck.gl 提供了很多种数据可视化图层,可用于向用户显示数据。点击以下链接,详细了解如何搭配使用 deck.gl 和 Maps JavaScript API: