Lớp bản đồ nhiệt cung cấp kết xuất phía máy khách của bản đồ nhiệt.
Tổng quan
Bản đồ nhiệt là một hình ảnh trực quan dùng để mô tả cường độ dữ liệu tại các điểm địa lý. Khi bật Lớp bản đồ nhiệt, lớp phủ màu sẽ xuất hiện ở đầu bản đồ. Theo mặc định, các khu vực có cường độ cao hơn sẽ được tô màu đỏ và các khu vực có cường độ thấp hơn sẽ xuất hiện màu xanh lục.
Tải thư viện hình ảnh trực quan
Lớp bản đồ nhiệt là một phần của thư viện google.maps.visualization và không được tải theo mặc định. Các lớp Hình ảnh trực quan là một thư viện độc lập,
tách riêng với mã API Maps JavaScript chính. Để sử dụng chức năng có trong thư viện này, trước tiên bạn phải tải chức năng này bằng cách sử dụng tham số libraries trong URL khởi động API Maps JavaScript:
<script async
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=visualization&callback=initMap">
</script>
Thêm một lớp bản đồ nhiệt
Để thêm một Lớp bản đồ nhiệt, trước tiên, bạn phải tạo một đối tượng HeatmapLayer mới và cung cấp đối tượng đó cùng với một số dữ liệu địa lý ở dạng mảng hoặc đối tượng MVCArray[]. Dữ liệu có thể là đối tượng LatLng hoặc đối tượng WeightedLocation. Sau khi tạo bản sao của đối tượng HeatmapLayer, hãy thêm đối tượng đó vào bản đồ bằng cách gọi phương thức setMap().
Ví dụ sau đây thêm 14 điểm dữ liệu vào bản đồ của San Francisco.
/* Data points defined as an array of LatLng objects */
var heatmapData = [
new google.maps.LatLng(37.782, -122.447),
new google.maps.LatLng(37.782, -122.445),
new google.maps.LatLng(37.782, -122.443),
new google.maps.LatLng(37.782, -122.441),
new google.maps.LatLng(37.782, -122.439),
new google.maps.LatLng(37.782, -122.437),
new google.maps.LatLng(37.782, -122.435),
new google.maps.LatLng(37.785, -122.447),
new google.maps.LatLng(37.785, -122.445),
new google.maps.LatLng(37.785, -122.443),
new google.maps.LatLng(37.785, -122.441),
new google.maps.LatLng(37.785, -122.439),
new google.maps.LatLng(37.785, -122.437),
new google.maps.LatLng(37.785, -122.435)
];
var sanFrancisco = new google.maps.LatLng(37.774546, -122.433523);
map = new google.maps.Map(document.getElementById('map'), {
center: sanFrancisco,
zoom: 13,
mapTypeId: 'satellite'
});
var heatmap = new google.maps.visualization.HeatmapLayer({
data: heatmapData
});
heatmap.setMap(map);
Thêm điểm dữ liệu có trọng số
Bản đồ nhiệt có thể kết xuất các đối tượng LatLng hoặc WeightedLocation hoặc kết hợp cả hai đối tượng này. Cả hai đối tượng này đại diện cho một điểm dữ liệu duy nhất trên bản đồ, nhưng đối tượng WeightedLocation cho phép bạn chỉ định thêm trọng số cho điểm dữ liệu đó. Việc áp dụng trọng số cho một điểm dữ liệu sẽ khiến WeightedLocation được kết xuất với cường độ lớn hơn đối tượng LatLng đơn giản. Trọng số là một thang tuyến tính, trong đó mỗi đối tượng LatLng có trọng số ngầm định là 1 – việc thêm một WeightedLocation duy nhất của {location: new google.maps.LatLng(37.782, -122.441), weight: 3} sẽ có tác dụng giống như việc thêm google.maps.LatLng(37.782, -122.441) ba lần.
Bạn có thể kết hợp các đối tượng weightedLocation và LatLng trong một mảng duy nhất.
Việc sử dụng đối tượng WeightedLocation thay cho LatLng có thể hữu ích khi:
- Thêm một lượng lớn dữ liệu tại một vị trí. Kết xuất một đối tượng
WeightedLocationcó trọng số là 1000 sẽ nhanh hơn so với việc kết xuất 1000 đối tượngLatLng. - Áp dụng điểm nhấn cho dữ liệu của bạn dựa trên các giá trị tuỳ ý. Ví dụ: bạn có thể sử dụng các đối tượng
LatLngkhi vẽ biểu đồ dữ liệu về động đất, nhưng có thể sẽ muốn sử dụngWeightedLocationđể đo cường độ của từng trận động đất ở quy mô đa dạng hơn.
/* Data points defined as a mixture of WeightedLocation and LatLng objects */
var heatMapData = [
{location: new google.maps.LatLng(37.782, -122.447), weight: 0.5},
new google.maps.LatLng(37.782, -122.445),
{location: new google.maps.LatLng(37.782, -122.443), weight: 2},
{location: new google.maps.LatLng(37.782, -122.441), weight: 3},
{location: new google.maps.LatLng(37.782, -122.439), weight: 2},
new google.maps.LatLng(37.782, -122.437),
{location: new google.maps.LatLng(37.782, -122.435), weight: 0.5},
{location: new google.maps.LatLng(37.785, -122.447), weight: 3},
{location: new google.maps.LatLng(37.785, -122.445), weight: 2},
new google.maps.LatLng(37.785, -122.443),
{location: new google.maps.LatLng(37.785, -122.441), weight: 0.5},
new google.maps.LatLng(37.785, -122.439),
{location: new google.maps.LatLng(37.785, -122.437), weight: 2},
{location: new google.maps.LatLng(37.785, -122.435), weight: 3}
];
var sanFrancisco = new google.maps.LatLng(37.774546, -122.433523);
map = new google.maps.Map(document.getElementById('map'), {
center: sanFrancisco,
zoom: 13,
mapTypeId: 'satellite'
});
var heatmap = new google.maps.visualization.HeatmapLayer({
data: heatMapData
});
heatmap.setMap(map);
Tùy chỉnh lớp bản đồ nhiệt
Bạn có thể tuỳ chỉnh cách bản đồ nhiệt sẽ được kết xuất bằng các tuỳ chọn bản đồ nhiệt sau. Hãy xem tài liệu HeatmapLayerOptions để biết thêm thông tin.
dissipating: Chỉ định xem bản đồ nhiệt có tiêu hao khi thu phóng hay không. Khi thông báo sai, bán kính tác động sẽ tăng theo mức thu phóng để đảm bảo rằng cường độ màu được lưu giữ tại một vị trí địa lý bất kỳ. Giá trị mặc định là đúng.gradient: Độ dốc màu của bản đồ nhiệt, được chỉ định dưới dạng một mảng chuỗi màu CSS. Tất cả màu CSS3 – bao gồm cả RGBA – đều được hỗ trợ, ngoại trừ các giá trị màu sắc được đặt tên mở rộng và HSL(A).maxIntensity: Cường độ tối đa của bản đồ nhiệt. Theo mặc định, các màu bản đồ nhiệt được chia tỷ lệ động theo mật độ điểm lớn nhất tại bất kỳ pixel cụ thể nào trên bản đồ. Thuộc tính này cho phép bạn chỉ định mức tối đa cố định. Việc đặt cường độ tối đa có thể hữu ích khi tập dữ liệu của bạn chứa một số ngoại lệ có cường độ cao bất thường.radius: Bán kính ảnh hưởng cho mỗi điểm dữ liệu, tính bằng pixel.opacity: Độ mờ của bản đồ nhiệt, được biểu thị bằng một số từ 0 đến 1.
Ví dụ bên dưới cho thấy một số lựa chọn tùy chỉnh hiện có.