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ạo kiểu dựa trên dữ liệu linh động cho Ranh giới của Google bằng API JavaScript của Maps. API này rất 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 ảnh động ở Thành phố New York theo ranh giới mã bưu chính (được mô phỏng, tua nhanh thời gian):

Tạo kiểu theo hướng dữ liệu là một chức năng của Nền tảng Google Maps cho phép bạn sử dụng đa giác ranh giới hành chính của Google, áp dụng 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ú, tùy chỉnh có thể dùng để phân tích trực quan và nâng cao khả năng hiểu 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 Tạo kiểu dựa trên dữ liệu trên bản đồ gần như theo thời gian thực bằng cách tích hợp các nguồn cấp dữ liệu động.

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

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

• Chia sẻ chuyến đi: Thông tin cập nhật theo thời gian thực có thể dùng để xác định những khu vực có nhu cầu cao. Trong trường hợp đó, một số nhà cung cấp có thể tăng giá.
• Phương tiện giao thông: Thông tin cập nhật theo thời gian thực có thể dùng để xác định các khu vực tắc nghẽn, nhờ đó xác định được tuyến đường thay thế phù hợp nhất.
• Bầu cử: Vào đêm bầu cử, bạn có thể dùng dữ liệu thăm dò ý kiến theo dữ liệu theo thời gian thực để trực quan hoá kết quả khi diễn ra.
• An toàn cho nhân viên: Google 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 diễn ra theo thời gian thực, xác định các khu vực có nguy cơ cao và cung cấp thông tin về tình huống cho nhân viên ứng cứu tại hiện trường.
• Thời tiết: Có thể dùng thông tin cập nhật theo thời gian thực để theo dõi diễn biến của bão, xác định các mối nguy hiểm hiện tại cũng như đưa ra cảnh báo và cảnh báo.
• Môi trường: Có thể 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 gây ô nhiễm khác, xác định các khu vực suy thoái môi trường và giám sát tác động từ hoạt động của con người.

Trong tất cả các tình huống này, khách hàng có thể tăng 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 của họ với ranh giới của Google để trực quan hoá dữ liệu của họ trên bản đồ một cách nhanh chóng và dễ dàng, mang đến cho họ siêu năng lực về 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 Google Cloud rồi bật API JavaScript của Maps.

Phương pháp tiếp cận kiến trúc của giải pháp

Bây giờ, hãy cùng tìm hiểu cách xây dựng bản đồ bằ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 ở New York được biểu thị bằng mã bưu chính. Điều này có thể giúp người dùng hiểu được việc gọi taxi dễ dàng như thế nào.

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

Giải pháp tạo kiểu dựa trên dữ liệu động

Bây giờ, hãy cùng tìm hiểu các bước cần thiết để triển khai bản đồ choropleth Tạo kiểu dựa trên dữ liệu linh động cho tập dữ liệu của bạn.

Giải pháp này cho phép bạn trình bày một 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ù có thể không phải là dữ liệu thực tế, nhưng ứng dụng này có các ứng dụng thực tế và giúp bạn hiểu được sức mạnh và khả năng của việc 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ột ranh giới mã địa điểm

Bước đầu tiên là xác định dữ liệu bạn muốn hiển thị và đảm bảo dữ liệu đó có thể khớp với các ranh giới của Google. Bạn có thể thực hiện việc so khớp phía máy khách này bằng cách gọi phương thức gọi lại findPlaceFromQuery cho từng mã bưu chính. Lưu ý rằng mã bưu điện ở 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 cần đảm bảo rằng bạn chọn đúng ID đị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 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 tạo kiểu. Trong ví dụ này, bạn sẽ tạo 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, giả sử dữ liệu của bạn nằm trong bảng BigQuery với hai cột: “zip_code” và “taxi_count” và bạn sẽ truy vấn dữ liệu này thông qua Hàm Cloud Firebase.

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ẻ. 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ộ tính 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 đồ 15 giây một lần. Mỗi lần khoảng thời gian trôi qua, nhân viên web sẽ yêu cầu giá trị taxiCount được cập nhật cho mỗi mã bưu chính.

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

Bước 3: Tạo kiểu cho bản đồ bằng định kiểu dựa trên dữ liệu

Giờ đây, khi bạn đã có các giá trị dữ liệu động cần thiết để tạo và áp dụng kiểu hình ảnh cho ranh giới mã bưu chính trong phiên bản JavaScript của Maps dưới dạng đối tượng JSON, đã đến lúc cung cấp cho đối tượng đó một số kiểu dưới dạng bản đồ choropleth.

Trong ví dụ này, bạn sẽ tạo 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 biết được mật độ và tình trạng sẵn chỗ 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 qua màu đỏ, cam và kết thúc ở màu vàng taxi ở New York đối với những khu vực có mật độ 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. Đặt fillOpacity thành 0,5 cho phép người dùng của bạn xem được bản đồ bên dưới, còn đặ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ù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 các ranh giới của Google giúp bạn có thể sử dụng dữ liệu của mình để tạo kiểu cho bản đồ nhằm triển khai trong nhiều ngành và khu vực. Khi kết nối với dữ liệu theo thời gian thực, bạn có thể truyền đạt được điều gì đang xảy ra, nơi điều đó đang diễn ra và như điều đó đang xảy ra. Tính năng này có thể giúp bạn 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.

Hành động tiếp theo

• Xem hội thảo trên web về Cách sử dụng Định kiểu dựa trên dữ liệu để tạo kiểu cho ranh giới trên bản đồ của Google.
• Đưa hình ảnh trực quan của bạn tiến thêm một bước với sự kiện nhấp chuột để Tạo kiểu dựa trên dữ liệu.
• Hãy xem xét việc thêm Điểm đánh dấu nâng cao vào bản đồ của bạn.

Người đóng góp

Tác giả chính:

Jim Leflar | Kỹ sư giải pháp nền tảng Google Maps