Lớp bản đồ nhiệt

Chọn nền tảng: Android iOS JavaScript
  1. Tổng quan
  2. Tải thư viện trực quan hoá
  3. Thêm điểm dữ liệu có trọng số
  4. Tuỳ chỉnh lớp bản đồ nhiệt

Lớp bản đồ nhiệt cung cấp tính năng kết xuất phía máy khách cho 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 độ của dữ liệu tại các điểm địa lý. Khi bạn bật Lớp bản đồ nhiệt, một lớp phủ có màu sẽ xuất hiện ở trên cùng của bản đồ. Theo mặc định, các khu vực có cường độ cao hơn sẽ có màu đỏ và các khu vực có cường độ thấp hơn sẽ có màu xanh lục.

Tải thư viện trực quan hoá

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 Trực quan hoá là một thư viện độc lập, tách biệt 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 thư viện bằng cách sử dụng tham số libraries trong URL khởi động Maps JavaScript API:

<script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&loading=async&libraries=visualization&callback=initMap">
</script>

Thêm lớp bản đồ nhiệt

Để thêm 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 cho đối tượng đó một số dữ liệu địa lý dưới dạng một mảng hoặc một đố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 sẽ thêm 14 điểm dữ liệu vào bản đồ 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 phân bổ trọng số

Bản đồ nhiệt có thể hiển thị các đối tượng LatLng hoặc WeightedLocation hoặc kết hợp cả hai. Cả hai đối tượng đều biểu thị 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 so với một đối tượng LatLng đơn giản. Trọng số là một thang đo tuyến tính, trong đó mỗi đối tượng LatLng có trọng số ngầm là 1 – việc thêm một WeightedLocation của {location: new google.maps.LatLng(37.782, -122.441), weight: 3} sẽ có tác dụng tương tự 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í duy nhất. Kết xuất một đối tượng WeightedLocation duy nhất có trọng số 1000 sẽ nhanh hơn kết xuất 1000 đối tượng LatLng.
  • Nhấn mạnh dữ liệu dựa trên các giá trị tuỳ ý. Ví dụ: bạn có thể dùng các đối tượng LatLng khi vẽ biểu đồ dữ liệu động đất, nhưng bạn có thể muốn dùng WeightedLocation để đo độ lớn của mỗi trận động đất theo thang Richter.
/* 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);

Tuỳ chỉnh lớp bản đồ nhiệt

Bạn có thể tuỳ chỉnh cách hiển thị bản đồ nhiệt bằng các lựa chọn sau đây về bản đồ nhiệt. Hãy xem tài liệu về HeatmapLayerOptions để biết thêm thông tin.

  • dissipating: Chỉ định xem bản đồ nhiệt có tiêu tan khi thu phóng hay không. Khi dissipating là false, bán kính ảnh hưởng sẽ tăng theo mức thu phóng để đảm bảo cường độ màu được giữ nguyên ở bất kỳ vị trí địa lý nào. 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 gồm các chuỗi màu CSS. Tất cả màu CSS3 (bao gồm cả RGBA) đều được hỗ trợ, ngoại trừ màu có tên mở rộng và giá trị HSL(A).
  • maxIntensity: Cường độ tối đa của bản đồ nhiệt. Theo mặc định, màu sắc của bản đồ nhiệt được điều chỉnh linh hoạt theo nồng độ điểm cao nhất tại một pixel cụ thể trên bản đồ. Thuộc tính này cho phép bạn chỉ định một 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ố giá trị ngoại lệ có cường độ cao bất thường.
  • radius: Bán kính ảnh hưởng của 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ụ dưới đây cho thấy một số lựa chọn tuỳ chỉnh có sẵn.

Xem ví dụ