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

Tạo kiểu theo hướng dữ liệu là một tính năng của Nền tảng Google Maps cho phép bạn sử dụng đa giác có ranh giới hành chính của Google, áp dụng kiểu cho đ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 sự hiểu biết về dữ liệu của bạn. Tài liệu này sẽ thảo luận một số trường hợp sử dụng nhằm giải thích lý do và cách bạn có thể trực quan hoá dữ liệu của mình với 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 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 kiểu đa giác một cách linh động 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. Những đối tượng này có thể được dùng để tạo ra những bản đồ giàu thông tin và hấp dẫn cho nhiều mục đích sử dụng và ngành nghề.

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 một bản đồ hiển thị nội dung cập nhật dữ liệu động khi định kiểu dựa trên dữ liệu:

• Dịch vụ đi chung xe: 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 có nhu cầu cao. Trong trường hợp đó, một số nhà cung cấp có thể tính giá tăng đột biế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 ùn tắc giao thông, từ đó xác định được tuyến đường thay thế tốt nhất.
• Cuộc bầu cử: Vào đêm bầu cử, dữ liệu thăm dò ý kiến theo thời gian thực có thể được dùng để trực quan hoá kết quả khi chúng diễn ra.
• An toàn cho người lao động: Ứng dụng có thể 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 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 chuyển của bão, xác định các mối nguy hiểm hiện tại, đồng thời đưa ra cảnh báo và cảnh báo.
• Môi trường: Thông tin cập nhật theo thời gian thực có thể dùng để 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à theo dõi tác động từ hoạt động của con người.

Trong tất cả những tình huống này, khách hàng có thể nhận đượ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 để 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 lại cho họ khả năng nắm bắt thông tin chi tiết gần như ngay lập tức để đưa ra quyết định sáng suốt hơn.

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

Phương pháp kiến trúc cho 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 cách sử dụng 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 hiển thị theo mã bưu chính. Điều này có thể giúp người dùng hiểu 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:

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 linh động dựa trên dữ liệu cho tập dữ liệu của bạn.

Giải pháp này cho phép bạn hình dung một tập dữ liệu giả định về mật độ taxi theo thời gian thực 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 thực, nhưng nó có các ứng dụng thực tế và giúp bạn hiểu về sức mạnh và khả năng của cách trực quan hoá dữ liệu động trên bản đồ với 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 mà bạn muốn hiển thị và đảm bảo dữ liệu đó có thể khớp với 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ừngpostalCode. 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 cầ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 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 nguồn dữ liệu và cách triển khai hiệu quả nhất sẽ tuỳ 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 một bảng BigQuery có 2 cột: "zip_code" và "taxi_count" và bạn sẽ truy vấn dữ liệu đó qua Hàm đám mây của 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 luôn làm mới dữ liệu. Một cách để thực hiện việc này là gọi truy vấn ở trên bằng web worker 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 khi khoảng thời gian trôi qua, nhân viên web sẽ yêu cầu các giá trị số taxiCount được cập nhật trên 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 đồ của bạn bằng cách định kiểu theo hướng 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 phiên bản Maps JavaScript của bạn dưới dạng đối tượng JSON, đã đến lúc tạo kiểu cho nó 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 của bạn cảm nhận về mật độ taxi và tình trạng xe trống trong khu vực của họ. Kiểu sẽ thay đổi tuỳ theo 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ải màu sẽ chuyển qua màu đỏ, cam và kết thúc là màu vàng taxi của 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 thiết lập FillOpacity thành 0.5 cho phép người dùng của bạn xem bản đồ cơ bản và thiết lập 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

Việc định kiểu dựa trên dữ liệu cho các ranh giới của Google mở ra khả năng sử dụng dữ liệu của bạn để tạo kiểu cho bản đồ cho nhiều triển khai trên các ngành và phân đoạn. 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 về điều đang xảy ra, nơi sự cố đang xảy ra và thời điểm sự việc diễn ra. Chức 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 đồ trên Google.
• Cải thiện hình ảnh trực quan của bạn bằng sự kiện nhấp chuột cho kiểu dựa trên dữ liệu.
• Hãy cân nhắc 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