Tài liệu này mô tả lý do và cách triển khai kiểu dáng dựa trên dữ liệu động của Ranh giới của Google bằng cách sử dụng API JavaScript của Maps. API này hữu ích cho nhiều trường hợp sử dụng trên nhiều ngành và phân khúc.
Số lượng taxi ở New York theo ranh giới mã bưu chính (ảnh động, tốc độ nhanh):
Kiểu dáng dựa trên 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 ranh giới hành chính của Google, áp dụng kiểu dáng 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 đồ tuỳ chỉnh, phong phú 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 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 nguồn cấp dữ liệu động.
Tính năng tạo kiểu dựa trên dữ liệu cho phép bạn tạo bản đồ cho thấy mức phân phối dữ liệu theo vị trí địa lý, tuỳ chỉnh linh hoạt kiểu đa giác 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 đồ hấp dẫn và đầy đủ thông tin cho nhiều trường hợp sử dụng và ngành nghề.
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ị nội dung cập nhật dữ liệu động trên tính năng Định kiểu dựa trên dữ liệu:
- Xe đi chung: Thông tin cập nhật theo thời gian thực có thể được dùng để xác định những khu vực có nhu cầu cao. Trong trường hợp này, một số nhà cung cấp có thể tăng giá.
- Giao thông: Thông tin cập nhật theo thời gian thực có thể được dùng để 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ò ý kiến 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ể 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ó nguy cơ cao và cung cấp thông tin nhận biết tình huống cho nhân viên ứng cứu tại hiện trường.
- Thời tiết: Bạn có thể dùng thông tin cập nhật theo thời gian thực để theo dõi hướng di chuyển của cơn 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.
- Môi trường: Bạn 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 những khu vực môi trường bị suy thoái và theo dõi tác động của hoạt động của con người.
Trong tất cả những 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 các ranh giới của Google để nhanh chóng và dễ dàng hình dung dữ liệu của họ trên bản đồ, nhờ đó, họ có thể nắm bắt thông tin chi tiết gần như tức thì để đưa ra quyết định sáng suốt hơn.
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 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 ở New York được hiển thị bằng mã bưu chính. Điều này có thể giúp người dùng hiểu được mức độ dễ dàng khi gọi taxi.
Dưới đây là sơ đồ cấu trúc ứng dụng của phương pháp này:
Giải pháp định kiểu linh hoạt dựa trên dữ liệu
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 có 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á 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ù đây có thể không phải là dữ liệu thực tế, nhưng dữ liệu 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 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 dữ liệu đó có thể so 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 này ở phía máy khách bằng cách gọi phương thức gọi lại findPlaceFromQuery cho mỗi mã bưu chính. 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 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ó các giá trị vĩ độ và kinh độ, bạn cũng có thể sử dụng Geocoding API (API Địa chỉ) với tính năng lọc thành phần để phân giải các giá trị lat/lon đó 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ẽ 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 một bảng BigQuery có hai cột: "zip_code" và "taxi_count", và bạn sẽ truy vấn dữ liệu đó thông qua một Hàm trên đám mây 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ộ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 đồ mỗi 15 giây. Mỗi khi khoảng thời gian kết thúc, worker web sẽ yêu cầu cập nhật giá trị taxiCount cho mỗi postalCode.
Giờ đây, 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 đ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 kiểu dựa trên dữ liệu
Giờ đây, 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 các ranh giới mã bưu chính trong thực thể JavaScript của Maps dưới dạng đối tượng JSON. Đã đến lúc tạo kiểu cho đối tượng này 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 ở mỗi mã bưu chính, giúp người dùng biết mật độ và tình trạng còn xe của taxi ở khu vực của họ. Kiểu sẽ thay đổi tuỳ thuộc vào giá trị số lượng taxi. Những khu vực có ít taxi nhất sẽ được áp dụng kiểu màu tím, còn hiệu ứng chuyển màu sẽ chuyển từ màu đỏ, cam và kết thúc bằng màu vàng của taxi ở New York đối với những 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 đồ cơ bản và đặt strokeOpacity thành 1,0 cho phép họ phân biệt giữa các 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 tạo 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 để tạo kiểu cho bản đồ cho nhiều cách triển khai trên 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 về điều gì đang xảy ra, nơi điều gì đang xảy ra và khi điều gì đang xảy ra. Khả năng này có thể 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ên web Cách sử dụng tính năng tạo kiểu dựa trên dữ liệu để tạo kiểu cho ranh giới trên bản đồ của Google.
- Hãy nâng tầm hình ảnh của bạn bằng sự kiện nhấp để tạo kiểu dựa trên dữ liệu.
- Hãy cân nhắc việc thêm Biểu tượng 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