แสดงภาพข้อมูลด้วย Google Maps Platform และสําหรุ้ง

แสดงภาพข้อมูลด้วย Google Maps Platform และสําหรุ้ง

เกี่ยวกับ Codelab นี้

subjectอัปเดตล่าสุดเมื่อ พ.ค. 11, 2022
account_circleเขียนโดย Googler

1 ข้อควรทราบก่อนที่จะเริ่มต้น

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

D01802e265548be1.png

สิ่งที่ต้องมีก่อน

สิ่งที่คุณจะทํา

  • ผสานรวม Google Maps Platform กับ BigQuery.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 ซึ่งเป็นตัวจัดการแพ็กเกจที่คุณต้องติดตั้งทรัพยากร Dependency สําหรับ Codelab นี้

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

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

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

  1. โคลนหรือดาวน์โหลดที่เก็บข้อมูลนี้
  2. จากบรรทัดคําสั่ง ให้ไปที่ไดเรกทอรี /starter ซึ่งมีโครงสร้างไฟล์พื้นฐานที่คุณต้องใช้ในการเขียนโค้ดนี้
  3. ติดตั้งทรัพยากร Dependency จาก 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 York City's Bike Bike ซึ่งเป็นโปรแกรมแชร์จักรยานที่มีจักรยาน 14,500 คันและตําแหน่ง 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

เมื่อได้รับข้อมูลแล้ว คุณก็สามารถสร้างภาพแรกด้วยสํารับสํารับได้

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

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

หากต้องการสร้างภาพ คุณต้องมี 2 คลาสคือ GoogleMapsOverlay และหนึ่งในเลเยอร์การแสดงภาพหลายๆ เลเยอร์ในสําเนียงของสําเภา.

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

  1. นําเข้า class.gl's ScatterplotLayer คลาสโดยเพิ่มรายการต่อไปนี้ไปยังด้านบนของ app.js
import { ScatterplotLayer } from '@deck.gl/layers';
  1. ตั้งค่าพร็อพเพอร์ตี้เลเยอร์โดยเลือกพร็อพเพอร์ตี้ 2 ประเภทที่มีสําหรับแผนภูมิกระจาย

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

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

  • id ช่วยให้ตัวแสดงผลสามารถระบุเลเยอร์ด้วยเหตุผลต่างๆ เช่น การทาสีใหม่และการอัปเดตอื่นๆ ของการแสดงภาพ เลเยอร์ BigQuery.gl ทั้งหมดต้องมีรหัสที่ไม่ซ้ํากันซึ่งคุณกําหนด
  • data จะระบุแหล่งข้อมูลของการแสดงภาพ ตั้งค่าเป็น ‘./stations.json&#39 เพื่อใช้ชุดข้อมูลที่ส่งออกจาก BigQuery
  • getPosition จะดึงตําแหน่งของออบเจ็กต์แต่ละรายการจากแหล่งข้อมูล โปรดสังเกตว่าค่าของพร็อพเพอร์ตี้เป็นฟังก์ชัน sample.landing.gl ใช้ฟังก์ชันซ้ําทุกแถวในชุดข้อมูล ฟังก์ชันนี้จะบอกให้โปรแกรมแสดงผลเกี่ยวกับวิธีเข้าถึงละติจูดและลองจิจูดของจุดข้อมูลในแต่ละแถว ในชุดข้อมูลนี้ ข้อมูลแต่ละแถวคือออบเจ็กต์ JSON ที่มีตําแหน่งอยู่ในพร็อพเพอร์ตี้ละติจูดและลองจิจูด ดังนั้นฟังก์ชันที่คุณระบุใน getPosition จะเป็น d => [parseFloat(d.longitude), parseFloat(d.latitude)]
  • getRadius กําหนดรัศมีของแต่ละวัตถุเป็นหน่วยเมตร ในกรณีนี้ รัศมีจะตั้งค่าเป็น d => parseInt(d.capacity) ซึ่งตั้งค่าขนาดของจุดข้อมูลตามความจุของแต่ละสถานี
  • stroked จะกําหนดว่าจุดข้อมูลที่แสดงผลมีเส้นโครงร่างที่ขอบด้านนอกหรือไม่
  • getFillColor จะเติมสีพื้นหลังของจุดข้อมูลแต่ละจุดเป็นรหัสสี RGB
  • getLineColor กําหนดสีเส้นโครงร่างของจุดข้อมูลแต่ละจุดให้เป็นรหัสสี RGB
  • radiusMinPixels จะกําหนดความกว้างพิกเซลขั้นต่ําสําหรับจุดข้อมูลแต่ละจุด เมื่อผู้ใช้ซูมออกและซูมออก BigQuery.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. สร้างอินสแตนซ์ของสไลด์ ScatterplotLayer ในสไลด์.gl: #39:
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 ซึ่งใช้ Maps JavaScript API OverlayView API เพื่อแทรกบริบท WebGL ด้านบนของแผนที่

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

ทําตามขั้นตอนต่อไปนี้เพื่อนํา ScatterplotLayer ไปใช้กับแผนที่

  1. นําเข้า class.gl's GoogleMapsOverlay คลาส:
import { GoogleMapsOverlay } from '@deck.gl/google-maps';
  1. สร้างอินสแตนซ์ของ GoogleMapsOverlay คลาสและส่งอินสแตนซ์ scatterplotLayer ที่คุณสร้างก่อนหน้านี้ในพร็อพเพอร์ตี้ layers ของออบเจ็กต์:
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 ยินดีด้วย

ยินดีด้วย คุณสร้างภาพข้อมูลปริมาณมากของ New York City' Citi Bike ด้วย Google Maps Platform และสําหรุ้ง

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

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

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

bug_report รายงานความผิดพลาด