关于此 Codelab
1. 准备工作
此 Codelab 会教您如何使用 Maps JavaScript API 和 deck.gl(一个采用 WebGL 加速技术的开源数据可视化框架)将大量地理空间数据可视化。
前提条件
您应执行的操作
- 将 Google Maps Platform 与 deck.gl 集成。
- 将数据集从 BigQuery 导入地图。
- 在地图上定义数据点。
所需条件
- Google 帐号
- 您选择的文本编辑器或 IDE
- 具备 JavaScript、HTML 和 CSS 方面的基础知识
2. 设置环境
开始使用 Google Maps Platform
如果您之前从未使用过 Google Maps Platform,请按照以下步骤操作:
下载 Node.js
如果您还没有 Node.js,请转到 https://nodejs.org/,然后在计算机上下载并安装 Node.js 运行时。
Node.js 包括 npm,您需要此软件包管理器才能为此 Codelab 安装依赖项。
设置入门级项目
为了帮您节省时间,此 Codelab 的入门级项目包含了实例化地图所需的所有样板代码。
要开始操作,请执行以下步骤:
- 克隆或下载此代码库。
- 从命令行导航到
/starter
目录,该目录中包含完成此 Codelab 所需的基本文件结构。 - 运行以下命令,以通过 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(一个具有 14500 辆单车和 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
实例,该实例会在地图上将数据点渲染为圆形:
- 将以下代码添加到
app.js
的顶部,以导入 deck.gl 的ScatterplotLayer
类:
import { ScatterplotLayer } from '@deck.gl/layers';
- 从适用于 deck.gl 散点图层的两类属性中进行选择,以设置图层属性。
设置器属性可向可视化提供需要渲染的信息,例如数据点的位置和半径。利用样式器属性则可以自定义可视化结果的样式。
下面是您在后面的代码段中使用的各个属性的详情:
id
可帮助渲染程序确定相应图层,以完成各种操作(例如重新绘制可视化结果或进行其他更新)。所有 deck.gl 图层都必须具有您为其分配的唯一 ID。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
};
- 创建 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
应用到地图,请执行以下步骤:
- 导入 deck.gl 的
GoogleMapsOverlay
类:
import { GoogleMapsOverlay } from '@deck.gl/google-maps';
- 创建
GoogleMapsOverlay
类的实例,并通过某个对象的layers
属性传入您之前创建的scatterplotLayer
实例:
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. 恭喜
恭喜!您已使用 Google Maps Platform 和 deck.gl 将纽约市 Citi Bike 的大量数据可视化。
了解更多内容
借助 Maps JavaScript API,您可以访问 Google Maps Platform 面向网络提供的所有资源。点击以下链接,详细了解如何在网络上使用 Google Maps Platform:
deck.gl 提供了很多种数据可视化图层,可用于向用户显示数据。点击以下链接,详细了解如何搭配使用 deck.gl 和 Maps JavaScript API: