แสดงข้อมูลด้วย Google Maps Platform และ deck.gl

1. ก่อนเริ่มต้น

Codelab นี้จะสอนวิธีสร้างภาพข้อมูลเชิงพื้นที่ที่มีปริมาณมากโดยใช้ Maps JavaScript API และ deck.gl ซึ่งเป็นเฟรมเวิร์กการแสดงข้อมูลแบบโอเพนซอร์สที่เร่งความเร็วด้วย WebGL

ข้อกำหนดเบื้องต้น

• Maps JavaScript API
• Google Maps Platform 101: Codelab JavaScript

สิ่งที่คุณต้องดำเนินการ

• ผสานรวม 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

หากยังไม่มี ให้ไปที่ https://nodejs.org/ แล้วดาวน์โหลดและติดตั้งรันไทม์ Node.js ในคอมพิวเตอร์

Node.js มี npm ซึ่งเป็นตัวจัดการแพ็กเกจที่คุณต้องติดตั้งการอ้างอิงสำหรับ Codelab นี้

ตั้งค่าโปรเจ็กต์เริ่มต้น

โปรเจ็กต์เริ่มต้นสำหรับโค้ดแล็บนี้มีโค้ดบอยเลอร์เพลตทั้งหมดที่คุณต้องใช้ในการสร้างอินสแตนซ์แผนที่ เพื่อช่วยให้คุณประหยัดเวลา

หากต้องการเริ่มต้นใช้งาน ให้ทำตามขั้นตอนต่อไปนี้

1. โคลนหรือดาวน์โหลดที่เก็บนี้
2. จากบรรทัดคำสั่ง ให้ไปที่ไดเรกทอรี /starter ซึ่งมีโครงสร้างไฟล์พื้นฐานที่คุณต้องใช้เพื่อทำ Codelab นี้ให้เสร็จสมบูรณ์
3. ติดตั้งการอ้างอิงจาก npm โดยการเรียกใช้คำสั่งต่อไปนี้

npm install

4. เรียกใช้โปรเจ็กต์เริ่มต้นในเบราว์เซอร์ด้วย Webpack Dev Server โดยเรียกใช้คำสั่งต่อไปนี้

npm start

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

5. เปิดโปรเจ็กต์ใน IDE แล้วไปที่ไดเรกทอรี /starter/src
6. เปิดไฟล์ 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);
}

7. แทนที่ YOUR API KEY ด้วยคีย์ API จริงที่คุณสร้างขึ้นเมื่อตั้งค่าสภาพแวดล้อม

const googleMapsAPIKey = 'YOUR API KEY';

3. ส่งออกข้อมูลจาก BigQuery

BigQuery มีชุดข้อมูลสาธารณะมากมายที่คุณใช้เพื่อการวิเคราะห์ข้อมูลหรือการทดลองได้

ใช้ BigQuery เพื่อส่งออกชุดข้อมูลที่เผยแพร่ต่อสาธารณะซึ่งมีข้อมูลตำแหน่งสำหรับ Citi Bike ของนิวยอร์กซิตี้ ซึ่งเป็นโปรแกรมจักรยานร่วมที่มีจักรยาน 14,500 คันและสถานที่ 900 แห่ง โดยทำตามขั้นตอนต่อไปนี้

1. ไปที่ Cloud Console
2. คลิกเมนูการนำทาง > BigQuery
3. ในตัวแก้ไขคำค้นหา ให้ป้อนคำค้นหาต่อไปนี้ แล้วคลิกเรียกใช้

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

4. หลังจากคำค้นหาเสร็จสมบูรณ์แล้ว ให้คลิกบันทึกผลลัพธ์ แล้วเลือก JSON (ไฟล์ในเครื่อง) เพื่อส่งออกชุดผลลัพธ์ ตั้งชื่อไฟล์เป็น stations.json แล้วบันทึกไว้ในไดเรกทอรี /src

ตอนนี้คุณได้ข้อมูลแล้ว คุณก็สร้างภาพแรกด้วย deck.gl ได้

4. กำหนดการแสดงภาพ

deck.gl เป็นเฟรมเวิร์กการแสดงข้อมูลแบบโอเพนซอร์สที่ใช้ WebGL เพื่อสร้างการแสดงผล 2 มิติและ 3 มิติที่มีความละเอียดสูงของชุดข้อมูลขนาดใหญ่มาก โดยสามารถจัดการจุดข้อมูลได้หลายแสนรายการ และเมื่อได้รับการเพิ่มประสิทธิภาพแล้ว ก็สามารถจัดการจุดข้อมูลได้หลายล้านรายการ

หากต้องการสร้างภาพ คุณต้องมี 2 คลาส ได้แก่ GoogleMapsOverlay และเลเยอร์ภาพอย่างใดอย่างหนึ่งจากเลเยอร์ภาพจำนวนมากของ deck.gl

หากต้องการเริ่มต้น ให้สร้างอินสแตนซ์ของ ScatterplotLayer ซึ่งจะแสดงจุดข้อมูลเป็นวงกลมบนแผนที่

1. นำเข้าคลาส ScatterplotLayer ของ deck.gl โดยเพิ่มโค้ดต่อไปนี้ที่ด้านบนของ app.js

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

2. ตั้งค่าคุณสมบัติของเลเยอร์โดยเลือกจากคุณสมบัติ 2 ประเภทที่ใช้ได้สำหรับเลเยอร์แผนที่ความหนาแน่นของ deck.gl

พร็อพเพอร์ตี้ Setter จะให้ข้อมูลที่จำเป็นต่อการแสดงภาพ เช่น ตำแหน่งและรัศมีของจุดข้อมูล พร็อพเพอร์ตี้ของ Styler ช่วยให้คุณปรับแต่งสไตล์ของการแสดงภาพได้

พร็อพเพอร์ตี้ที่คุณใช้ในข้อมูลโค้ดต่อไปนี้มีรายละเอียดดังนี้

• id ช่วยให้โปรแกรมแสดงผลระบุเลเยอร์ได้ด้วยเหตุผลต่างๆ เช่น การทาสีใหม่และการอัปเดตอื่นๆ ในภาพ เลเยอร์ deck.gl ทั้งหมดต้องมีรหัสที่ไม่ซ้ำกันซึ่งคุณกำหนด
• 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
};

3. สร้างอินสแตนซ์ของคลาส 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 ซึ่งใช้ OverlayView API ของ Maps JavaScript API เพื่อแทรกบริบท WebGL ไว้เหนือแผนที่

เมื่อตั้งค่าแล้ว คุณจะส่งเลเยอร์การแสดงภาพของ deck.gl ไปยัง GoogleMapsOverlay ได้ ซึ่งจะแสดงเลเยอร์และซิงค์กับแผนที่

หากต้องการใช้ ScatterplotLayer กับแผนที่ ให้ทำตามขั้นตอนต่อไปนี้

1. นำเข้าคลาส GoogleMapsOverlay ของ deck.gl

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

2. สร้างอินสแตนซ์ของคลาส GoogleMapsOverlay และส่งอินสแตนซ์ scatterplotLayer ที่คุณสร้างไว้ก่อนหน้านี้ในพร็อพเพอร์ตี้ layers ของออบเจ็กต์

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

3. ใช้การวางซ้อนกับแผนที่

 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 Maps Platform และ deck.gl

ดูข้อมูลเพิ่มเติม

Maps JavaScript API ช่วยให้คุณเข้าถึงทุกอย่างที่ Google Maps Platform มีให้สำหรับเว็บ ดูข้อมูลเพิ่มเติมเกี่ยวกับการทำงานกับ Google Maps Platform บนเว็บได้โดยไปที่ลิงก์ต่อไปนี้

• เอกสารประกอบของ Maps JavaScript API
• Google Maps Platform 101: Codelab JavaScript

deck.gl มีเลเยอร์การแสดงข้อมูลเป็นภาพมากมายที่คุณใช้เพื่อแสดงข้อมูลต่อผู้ใช้ได้ ดูข้อมูลเพิ่มเติมเกี่ยวกับการใช้ deck.gl กับ Maps JavaScript API ได้โดยไปที่ลิงก์ต่อไปนี้

• GoogleMapsOverlay เอกสารประกอบของโมดูลย่อย deck.gl
• เอกสารชั้นแผนภูมิกระจาย
• การสาธิต Google Maps Platform และ deck.gl รวมถึงซอร์สโค้ดของการสาธิต