程式碼研究室簡介
1. 事前準備
本程式碼研究室將教您如何使用 Maps JavaScript API 和 Studio. API (以 WebGL 加速的開放原始碼資料視覺化架構) 建立大量地理空間資料視覺化。
必要條件
執行步驟
- 將 Google 地圖平台與 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
}
請不要使用檔案中的其他程式碼執行任何動作，該程式碼會載入 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 個地點，步驟如下：
- 前往 Cloud Console。
- 依序點選 [導覽] 選單
> [BigQuery]。 - 在「查詢」編輯器中，輸入以下查詢並按一下 [Run]：
SELECT
longitude,
latitude,
name,
capacity
FROM
`bigquery-public-data.new_york_citibike.citibike_stations`
- 查詢完成後，按一下 [Save results] (儲存結果)，然後選取 [JSON (local file)] (JSON (本機檔案)) 來匯出結果集。將檔案命名為
stations.json，並儲存在/src目錄中。
取得資料後，您現在可以透過 deck.gl 建立第一個視覺化圖表。
4. 定義視覺呈現
0.4. 可處理數十萬個資料點，而在最佳化時，甚至能夠處理數百萬個資料點。
如要建立視覺化功能，您必須有兩個類別：GoogleMapsOverlay，以及一種 deck.gl' 許多視覺圖層之一。
首先，請建立 ScatterplotLayer 的例項，也就是將資料點顯示為地圖上的圓圈：
- 將以下內容新增至
app.js頂端，即可匯入 deck.gl's 的ScatterplotLayer類別：
import { ScatterplotLayer } from '@deck.gl/layers';
- 如要設定圖層屬性，請從 deck.gl's 散佈圖圖層提供的兩種屬性中選擇。
Setter 屬性會以視覺化的方式呈現所需資訊，例如資料點的位置和半徑。樣式函數屬性可讓您自訂視覺呈現的樣式。
以下將詳細說明您在下列程式碼片段中使用的屬性：
id可讓轉譯器識別圖層的各種原因，例如重新繪製，以及視覺呈現的其他更新。所有 START.gl 層都需要您指派的專屬 ID。data會指定視覺化的資料來源。設定為‘./stations.json' 即可使用從 BigQuery 匯出的資料集。getPosition會從資料來源擷取每個物件的位置。請注意，此屬性的值是函式。Garden.gl 會使用這個函式疊代資料集內的每一列。此函式會指示轉譯器如何存取每一列各資料點的緯度和經度。在這個資料集中，每一列中的資料都是 JSON 物件，且其位置為緯度和經度屬性，所以您提供給getPosition的函式為d => [parseFloat(d.longitude), parseFloat(d.latitude)]。getRadius會定義每個物件的半徑 (以公尺為單位)。在這個情況下，半徑會設為d => parseInt(d.capacity)，並依據各站點的容量設定資料點的大小。stroked會設定轉譯的資料點是否在外側邊緣有筆觸。getFillColor會將每個資料點的填滿顏色設為 RGB 顏色代碼。getLineColor會將每個資料點的筆劃顏色設為 RGB 顏色代碼。radiusMinPixels可設定每個資料點的最小像素寬度。當使用者放大或縮小畫面時，Aquat.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's
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 內容。
完成這些作業後，您可以將任何 START.gl' 視覺化圖層 傳送至 GoogleMapsOverlay，以呈現圖層並與地圖進行同步處理。
如要將您的 ScatterplotLayer 套用到地圖，請按照下列步驟操作：
- 匯入 deck.gl's 的
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 地圖平台和 deck.gl 產生高流量資料，呈現紐約市的 Citi Bike 資料。
瞭解詳情
Maps JavaScript API 可讓您存取 Google 地圖平台網頁版的所有功能。如要進一步瞭解如何使用 Google 地圖平台網頁版，請參閱下列連結：
簡報提供許多資料視覺化層，可供您用來向使用者顯示資料。進一步瞭解如何透過 Maps JavaScript API 使用 deck.gl，並參閱下列連結：