Xem dữ liệu của bạn theo thời gian thực bằng tính năng Định kiểu theo hướng dữ liệu

Tài liệu này mô tả lý do và cách triển khai tính năng Định kiểu dựa trên dữ liệu động cho Ranh giới của Google bằng Maps JavaScript API. Tính năng này hữu ích cho nhiều trường hợp sử dụng trong các ngành và phân khúc.

Số lượng taxi ở Thành phố New York theo mã bưu chính
Số lượng taxi được mô phỏng ở Thành phố New York theo ranh giới mã bưu chính (mô phỏng, tua nhanh thời gian):

Định kiểu dựa trên dữ liệu là một khả năng của Google Maps Platform cho phép bạn sử dụng các đa giác ranh giới hành chính của Google, áp dụng định kiểu cho các đa giác đó để hiển thị trên bản đồ và kết hợp dữ liệu của riêng bạn để tạo bản đồ phong phú, tuỳ chỉnh có thể dùng để phân tích trực quan và hiểu rõ hơn về dữ liệu của bạn. Tài liệu này sẽ thảo luận về một số trường hợp sử dụng giải thích lý do và cách bạn có thể trực quan hoá dữ liệu bằng tính năng Định kiểu dựa trên dữ liệu trên bản đồ gần theo thời gian thực bằng cách tích hợp nguồn cấp dữ liệu động.

Tính năng Định kiểu dựa trên dữ liệu cho phép bạn tạo bản đồ cho thấy sự phân bố địa lý của dữ liệu, tuỳ chỉnh kiểu đa giác một cách linh hoạt và tương tác với dữ liệu thông qua các sự kiện nhấp. Bạn có thể sử dụng các tính năng này để tạo bản đồ cung cấp thông tin và thu hút người dùng cho nhiều trường hợp sử dụng và ngành.

Dưới đây là một số ví dụ về trường hợp sử dụng có thể áp dụng cho bản đồ hiển thị thông tin cập nhật dữ liệu động trên tính năng Định kiểu dựa trên dữ liệu:

• Đi chung xe: Bạn có thể sử dụng thông tin cập nhật theo thời gian thực để xác định các khu vực có nhu cầu cao. Trong trường hợp này, một số nhà cung cấp có thể áp dụng giá tăng đột biến.
• Vận tải: Bạn có thể sử dụng thông tin cập nhật theo thời gian thực để xác định các khu vực tắc nghẽn, giúp xác định các tuyến đường thay thế tốt nhất.
• Bầu cử: Vào đêm bầu cử, bạn có thể sử dụng dữ liệu thăm dò theo thời gian thực để trực quan hoá kết quả khi chúng diễn ra.
• An toàn cho người lao động: Bạn có thể sử dụng thông tin cập nhật theo thời gian thực để theo dõi các sự kiện khi chúng diễn ra theo thời gian thực, xác định các khu vực có rủi ro cao và cung cấp thông tin về tình hình cho những người ứng phó tại hiện trường.
• Thời tiết: Bạn có thể sử dụng thông tin cập nhật theo thời gian thực để theo dõi sự di chuyển của bão, xác định các mối nguy hiểm hiện tại và đưa ra cảnh báo.
• Môi trường: Bạn có thể sử dụng thông tin cập nhật theo thời gian thực để theo dõi sự di chuyển của tro núi lửa và các chất ô nhiễm khác, xác định các khu vực suy thoái môi trường và theo dõi tác động của hoạt động của con người.

Trong tất cả các trường hợp này, khách hàng có thể khai thác thêm giá trị bằng cách kết hợp nguồn cấp dữ liệu theo thời gian thực với ranh giới của Google để nhanh chóng và dễ dàng trực quan hoá dữ liệu của họ trên bản đồ, giúp họ có được thông tin chi tiết gần như tức thì để đưa ra quyết định sáng suốt hơn.

Dùng thử ngay: Truy cập vào bảng điều khiển Cloud của Google và bật Maps JavaScript API.

Phương pháp kiến trúc cho giải pháp

Bây giờ, hãy cùng xem cách tạo bản đồ bằng tính năng Định kiểu dựa trên dữ liệu để trực quan hoá dữ liệu động. Như minh hoạ trước đó, trường hợp sử dụng là số lượng taxi ở Thành phố New York được trực quan hoá theo mã bưu chính. Điều này có thể giúp người dùng hiểu rõ mức độ dễ dàng để bắt taxi.

Kiến trúc
Dưới đây là sơ đồ kiến trúc ứng dụng của phương pháp này:

Giải pháp Định kiểu dựa trên dữ liệu động

Bây giờ, hãy cùng xem các bước cần thiết để triển khai bản đồ phân vùng theo tỷ lệ dựa trên tính năng Định kiểu dựa trên dữ liệu động cho tập dữ liệu của bạn.

Giải pháp này cho phép bạn trực quan hoá tập dữ liệu giả định về mật độ taxi theo thời gian thực xung quanh Thành phố New York theo mã bưu chính. Mặc dù đây có thể không phải là dữ liệu trong thế giới thực, nhưng dữ liệu này có các ứng dụng trong thế giới thực và giúp bạn cảm nhận được sức mạnh và khả năng của cách trực quan hoá dữ liệu động trên bản đồ bằng tính năng Định kiểu dựa trên dữ liệu.

Bước 1: Chọn dữ liệu để trực quan hoá và kết hợp với Mã địa điểm ranh giới

Bước đầu tiên là xác định dữ liệu bạn muốn hiển thị và đảm bảo rằng dữ liệu đó có thể được so khớp với ranh giới của Google. Bạn có thể thực hiện việc so khớp này ở phía máy khách bằng cách gọi phương thức gọi lại findPlaceFromQuery cho từng postalCode. Xin lưu ý rằng mã bưu chính ở Hoa Kỳ có tên riêng biệt, nhưng các cấp hành chính khác thì không. Bạn nên đảm bảo chọn đúng Mã địa điểm cho truy vấn của mình trong trường hợp có thể có kết quả không rõ ràng.

const request = {
    query: postalCode,
    fields: ['place_id'],
};
 
function findPlaceId() {
   placesService.findPlaceFromQuery(request, function (results, status) {
      if (status === google.maps.places.PlacesServiceStatus.OK) {
         console.log(results[0]);
      }
   });
}

Nếu dữ liệu của bạn có giá trị vĩ độ và kinh độ, bạn cũng có thể sử dụng Geocoding API (API Mã hoá địa lý) với tính năng lọc thành phần để phân giải các giá trị vĩ độ/kinh độ đó thành giá trị Mã địa điểm cho lớp đối tượng mà bạn muốn định kiểu. Trong ví dụ này, bạn sẽ định kiểu cho lớp đối tượng POSTAL_CODE.

Bước 2: Kết nối với dữ liệu theo thời gian thực

Có nhiều cách để kết nối với các nguồn dữ liệu và cách triển khai tốt nhất sẽ phụ thuộc vào nhu cầu cụ thể và cơ sở hạ tầng kỹ thuật của bạn. Trong trường hợp này, hãy giả sử rằng dữ liệu của bạn nằm trong một bảng BigQuery có 2 cột: "zip_code" và "taxi_count" và bạn sẽ truy vấn dữ liệu đó thông qua một Firebase Cloud Function.

async function queryNycTaxis() {
   // Queries the NYC Taxis dataset.

   // Create a client
   const bigqueryClient = new BigQuery();
  
   // The SQL query to run
   const sqlQuery = 'SELECT zip_code, taxi_count
      FROM \'YOUR_DATASET_ID.TABLE\' LIMIT 100';
      
   const options = {
      query: sqlQuery,
      // Location must match that of the dataset(s)
      // referenced in the query.
      location: 'US',
   };
  
   // Run the query
   const [rows] = await bigqueryClient.query(options);
  
   rows.forEach(row => {
      const postalCode = row['zip_code'];
      const taxiCount = row['taxi_count'];
   });
}

Tiếp theo, bạn cần đảm bảo dữ liệu luôn mới. Một cách để thực hiện việc này là gọi truy vấn ở trên bằng trình chạy web và đặt bộ hẹn giờ để làm mới dữ liệu bằng hàm setInterval. Bạn có thể đặt khoảng thời gian thành một giá trị thích hợp, chẳng hạn như làm mới bản đồ sau mỗi 15 giây. Mỗi khi hết khoảng thời gian, trình chạy web sẽ yêu cầu các giá trị taxiCount được cập nhật cho mỗi postalCode.

Bây giờ, chúng ta có thể truy vấn và làm mới dữ liệu. Hãy đảm bảo giao diện của các đa giác trên bản đồ phản ánh những thay đổi này.

Bước 3: Định kiểu cho bản đồ bằng tính năng Định kiểu dựa trên dữ liệu

Bây giờ bạn đã có các giá trị dữ liệu động cần thiết để tạo và áp dụng kiểu trực quan cho ranh giới mã bưu chính trong thực thể Maps JavaScript dưới dạng đối tượng JSON. Đã đến lúc định kiểu cho đối tượng đó dưới dạng bản đồ phân vùng theo tỷ lệ.

Trong ví dụ này, bạn sẽ định kiểu cho bản đồ dựa trên số lượng taxi trong mỗi mã bưu chính, giúp người dùng cảm nhận được mật độ và tình trạng sẵn có của taxi trong khu vực của họ. Kiểu này sẽ khác nhau tuỳ thuộc vào giá trị số lượng taxi. Các khu vực có ít taxi nhất sẽ được áp dụng kiểu màu tím và độ dốc màu sẽ chuyển từ màu đỏ, màu cam và kết thúc ở màu vàng của taxi ở Thành phố New York cho các khu vực có mật độ cao nhất. Đối với bảng phối màu này, bạn sẽ áp dụng các giá trị màu này cho fillColor và strokeColor. Việc đặt fillOpacity thành 0,5 cho phép người dùng xem bản đồ bên dưới và việc đặt strokeOpacity thành 1,0 cho phép họ phân biệt giữa ranh giới của các đa giác có cùng màu:

const featureLayer = map.getFeatureLayer(
   google.maps.FeatureType.POSTAL_CODE
);
featureLayer.style = (featureStyleFunctionOptions) => {
   const placeFeature = featureStyleFunctionOptions.feature;
   // taxiCount per (postal_code) PlaceID 
   const taxiCount = zips[placeFeature.placeId];
   let fillColor;
   let strokeColor;
// Apply colors to features based on taxiCount values
if (taxiCount < 8) {
   fillColor = "#571845";  
   strokeColor = "#571845"; 
} else if (taxiCount < 13) {
   fillColor = "#900c3e";
   strokeColor = "#900c3e";
} else if (taxiCount < 21) {
   fillColor = "#c60039"; 
   strokeColor = "#c60039"; 
} else if (taxiCount < 34) {
   fillColor = "#fe5733";
   strokeColor = "#fe5733";
// keep else if or the whole map gets this style with else
} else if (taxiCount >= 34) { 
   fillColor = "#fec30f";
   strokeColor = "#fec30f";
}  
return {
   fillColor,
   strokeColor,
   fillOpacity: 0.5,
   strokeOpacity: 1.0,
};
 

Kết luận

Tính năng Định kiểu dựa trên dữ liệu cho ranh giới của Google giúp bạn sử dụng dữ liệu để định kiểu cho bản đồ của mình cho nhiều cách triển khai trong các ngành và phân khúc. Việc kết nối với dữ liệu theo thời gian thực cho phép bạn thông báo điều gì đang xảy ra, ở đâu và khi xảy ra. Tính năng này có tiềm năng khai thác giá trị của dữ liệu theo thời gian thực và giúp người dùng hiểu rõ hơn về dữ liệu đó theo thời gian thực trong thế giới thực.

Hành động tiếp theo

• Xem hội thảo trực tuyến Cách sử dụng tính năng Định kiểu dựa trên dữ liệu để định kiểu cho ranh giới của bản đồ Google.
• Nâng cao khả năng trực quan hoá bằng các sự kiện nhấp cho tính năng Định kiểu dựa trên dữ liệu.
• Cân nhắc thêm Điểm đánh dấu nâng cao vào bản đồ.

Người đóng góp

Tác giả chính:

Jim Leflar | Kỹ sư giải pháp Google Maps Platform