Hình ảnh hóa dữ liệu bằng Google Maps Platform và Deck.gl

1. Trước khi bắt đầu

Lớp học lập trình này hướng dẫn bạn cách tạo hình ảnh hóa dữ liệu không gian địa lý khối lượng lớn bằng API JavaScript của Maps và Deck.gl, một khung hình ảnh dữ liệu nguồn mở, được tăng tốc WebGL.

Điều kiện tiên quyết

• API JavaScript của Maps
• Nền tảng Google Maps 101: Lớp học lập trình JavaScript

Bạn sẽ thực hiện

• Tích hợp Google Maps Platform với Deck.gl.
• Nhập tập dữ liệu vào BigQuery từ một bản đồ.
• Xác định điểm dữ liệu trên bản đồ.

Bạn cần có

• Tài khoản Google
• Trình chỉnh sửa văn bản hoặc IDE mà bạn chọn
• Kiến thức cơ bản về JavaScript, HTML và CSS

2. Thiết lập môi trường

Bắt đầu sử dụng Nền tảng Google Maps

Nếu trước đây bạn chưa sử dụng Nền tảng Google Maps, hãy làm theo các bước sau:

1. Tạo tài khoản thanh toán.
2. Tạo dự án.
3. Bật các API và SDK của Nền tảng Google Maps.
4. Tạo khoá API.

Lưu ý: Các đường liên kết này sẽ cung cấp cho bạn những tài liệu hoặc video mà bạn có thể nhấp vào để hoàn thành từng bước.

Tải Node.js

Nếu bạn chưa có, hãy truy cập vào https://nodejs.org/ và tải xuống rồi cài đặt thời gian chạy Node.js trên máy tính.

Node.js bao gồm npm, trình quản lý gói mà bạn cần cài đặt các phần phụ thuộc cho lớp học lập trình này.

Thiết lập dự án dành cho người mới bắt đầu

Để tiết kiệm thời gian, dự án dành cho người mới bắt đầu của lớp học lập trình này bao gồm tất cả các mã nguyên mẫu mà bạn cần để tạo bản đồ.

Để bắt đầu, hãy làm theo các bước sau:

1. Sao chép hoặc tải kho lưu trữ này xuống.
2. Từ dòng lệnh, hãy chuyển đến thư mục /starter, trong đó có cấu trúc tệp cơ bản mà bạn cần để hoàn thành lớp học lập trình này.
3. Cài đặt các phần phụ thuộc từ npm bằng cách chạy lệnh sau:

npm install

4. Chạy dự án dành cho người mới bắt đầu trong trình duyệt của bạn bằng Webpack Dev Server bằng cách chạy lệnh sau:

npm start

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

5. Mở dự án trong IDE và chuyển đến thư mục /starter/src.
6. Mở tệp app.js.

Bạn sẽ thực hiện tất cả mã hóa của bạn trong phần mã này trong tệp:

const googleMapsAPIKey = 'YOUR API KEY';
loadJSAPI();
function runApp() {
  // Your code goes here
}

Bạn sẽ không làm bất cứ điều gì với phần mã còn lại trong tệp, API này tải API Maps và bản đồ:

/* 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. Thay thế YOUR API KEY bằng khóa API thực tế mà bạn đã tạo khi thiết lập môi trường:

const googleMapsAPIKey = 'YOUR API KEY';

3. Xuất dữ liệu từ BigQuery

BigQuery cung cấp nhiều tập dữ liệu công khai mà bạn có thể dùng cho mục đích phân tích dữ liệu hoặc thử nghiệm.

Sử dụng BigQuery để xuất tập dữ liệu công khai có chứa dữ liệu vị trí cho xe đạp Citi City của New York, một chương trình chia sẻ xe đạp với 14.500 xe đạp và 900 vị trí, bằng cách làm theo các bước sau:

1. Truy cập vào Cloud Console.
2. Nhấp vào Trình đơn điều hướng > BigQuery.
3. Trong Trình chỉnh sửa truy vấn, hãy nhập truy vấn sau rồi nhấp vào Chạy:

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

4. Sau khi truy vấn hoàn tất, hãy nhấp vào Lưu kết quả, sau đó chọn JSON (tệp cục bộ) để xuất nhóm kết quả. Đặt tên tệp là stations.json và lưu tệp này vào thư mục /src.

Bây giờ, bạn đã có được dữ liệu, bạn có thể tạo hình ảnh trực quan đầu tiên bằng Deck.gl.

4. Xác định hình ảnh trực quan

đài Hệ thống có thể xử lý hàng trăm nghìn điểm dữ liệu và thậm chí khi được tối ưu hóa, Googlebot có thể xử lý hàng triệu điểm dữ liệu.

Để tạo hình ảnh trực quan, bạn cần có hai lớp: GoogleMapsOverlay và một trong nhiều lớp hình ảnh.

Để bắt đầu, hãy tạo một bản sao của ScatterplotLayer để hiển thị các điểm dữ liệu dưới dạng vòng tròn trên bản đồ:

1. Nhập lớp Deck.gl\39;s ScatterplotLayer bằng cách thêm đoạn mã sau vào đầu app.js:

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

2. Đặt thuộc tính lớp bằng cách chọn từ hai loại thuộc tính có sẵn cho lớp biểu đồ phân tán của Deck.gl\39;.

Thuộc tính setter cung cấp hình ảnh trực quan với thông tin cần thiết để hiển thị, chẳng hạn như vị trí và bán kính của điểm dữ liệu. Các thuộc tính styler cho phép bạn tùy chỉnh kiểu của hình ảnh.

Dưới đây là phân tích các thuộc tính mà bạn sử dụng trong đoạn mã sau:

• id cho phép trình kết xuất xác định các lớp vì nhiều lý do, chẳng hạn như dán lại và các nội dung cập nhật khác cho hình ảnh trực quan. Tất cả các lớp Deck.gl yêu cầu một ID duy nhất mà bạn chỉ định.
• data chỉ định nguồn dữ liệu của hình ảnh trực quan. Đặt giá trị này thành ‘./stations.json\39; để sử dụng tập dữ liệu mà bạn đã xuất từ BigQuery.
• getPosition truy xuất vị trí của từng đối tượng từ nguồn dữ liệu. Xin lưu ý rằng giá trị của thuộc tính là một hàm. Deck.gl sử dụng hàm này để lặp lại từng hàng trong tập dữ liệu. Hàm này sẽ cho trình kết xuất biết cách truy cập vào vĩ độ và kinh độ của điểm dữ liệu trong mỗi hàng. Trong tập dữ liệu này, dữ liệu trong mỗi hàng là đối tượng JSON có vị trí được đặt trong các thuộc tính vĩ độ và kinh độ, do đó, hàm bạn cung cấp cho getPosition là d => [parseFloat(d.longitude), parseFloat(d.latitude)].
• getRadius xác định bán kính của mỗi đối tượng tính bằng mét. Trong trường hợp này, bán kính được đặt thành d => parseInt(d.capacity), giúp đặt kích thước của các điểm dữ liệu dựa trên dung lượng của mỗi trạm.
• stroked đặt xem các điểm dữ liệu đã hiển thị có dấu gạch ngang ở các cạnh bên ngoài hay không.
• getFillColor đặt màu tô của từng điểm dữ liệu dưới dạng mã màu RGB.
• getLineColor đặt màu tô của mỗi điểm dữ liệu dưới dạng mã màu RGB.
• radiusMinPixels đặt chiều rộng tối thiểu của pixel cho mỗi điểm dữ liệu. Khi người dùng phóng to và thu nhỏ, Deck.gl sẽ tự động đổi kích thước tỷ lệ của các điểm dữ liệu để hiển thị rõ ràng hình ảnh trên bản đồ. Thuộc tính này cho phép bạn kiểm soát mức độ xảy ra việc đổi kích thước này.
• radiusMaxPixels đặt chiều rộng pixel tối đa cho mỗi điểm dữ liệu.

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. Tạo một bản sao của lớp ScatterplotLayer của Deck.gl\39:

const scatterplotLayer = new ScatterplotLayer(layerOptions);

Sau khi bạn hoàn thành phần này, mã của bạn sẽ trông giống như sau:

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. Áp dụng hình ảnh trực quan cho bản đồ

Bây giờ, bạn có thể áp dụng phiên bản ScatterplotLayer cho bản đồ thông qua lớp GoogleMapsOverlay. Lớp này sử dụng API OverlayView của API JavaScript để chèn ngữ cảnh WebGL lên đầu bản đồ.

Sau khi đặt xong, bạn có thể chuyển bất kỳ lớp trực quan nào của Deck.gl\39 thành GoogleMapsOverlay, lớp này sẽ hiển thị lớp và đồng bộ hóa với bản đồ.

Để áp dụng ScatterplotLayer vào bản đồ, hãy làm theo các bước sau:

1. Nhập lớp GoogleMapsOverlay của Deck.gl:

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

2. Tạo một thực thể của lớp GoogleMapsOverlay và chuyển nó cho thực thể scatterplotLayer mà bạn đã tạo trước đó trong thuộc tính layers của một đối tượng:

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

3. Áp dụng lớp phủ cho bản đồ:

 googleMapsOverlay.setMap(map);

Sau khi bạn hoàn thành phần này, mã của bạn sẽ trông giống như sau:

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);
}

Quay trở lại trình duyệt của bạn, nơi bạn sẽ thấy hình ảnh dữ liệu tuyệt vời về tất cả các trạm xe đạp Citi ở Thành phố New York.

6. Xin chúc mừng

Xin chúc mừng! Bạn đã trình bày một hình ảnh dữ liệu khối lượng lớn về dữ liệu xe đạp Citi City của New York với Nền tảng Google Maps và Deck.gl.

Tìm hiểu thêm

API JavaScript của Maps cung cấp cho bạn quyền truy cập vào mọi thứ mà Google Maps Platform cung cấp cho web. Tìm hiểu thêm về cách làm việc với Google Maps Platform trên web bằng cách xem các liên kết sau:

• Tài liệu về API JavaScript của Maps
• Nền tảng Google Maps 101: Lớp học lập trình JavaScript

Deck.gl cung cấp nhiều lớp trực quan hóa dữ liệu mà bạn có thể sử dụng để hiển thị dữ liệu cho người dùng. Tìm hiểu thêm về cách sử dụng Deck.gl với API JavaScript của Maps bằng cách xem những đường liên kết sau:

• Tài liệu mô-đun phụGoogleMapsOverlay của Deck.gl
• Tài liệu lớp Scatterplot
• Bản minh họa Nền tảng Google Maps và Deck.gl và bản minh họa& mã bưu chính