Lớp bản đồ nhiệt

1. Tổng quan
2. Tải thư viện hình ảnh
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 bản đồ nhiệt ở phía máy khách.

Tổng quan

Bản đồ nhiệt là một hình ảnh trực quan được dùng để mô tả cường độ của dữ liệu tại điểm địa lý. Khi Lớp bản đồ nhiệt được bật, một lớp phủ màu sẽ xuất hiện ở đầu bản đồ. Theo mặc định, khu vực có cường độ cao hơn sẽ được tô màu màu đỏ và những vùng có cường độ thấp hơn sẽ chuyển sang 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 Trực quan hoá là một thư viện độc lập, tách biệt với mã API JavaScript của Maps. Để sử dụng chức năng này có trong thư viện này, nên trước tiên, bạn phải tải thư viện bằng libraries trong URL khởi động API Maps JavaScript:

<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 HeatmapLayer mới và cung cấp cho đối tượng đó một số dữ liệu địa lý ở dạng mảng hoặc Đối tượng MVCArray[]. Dữ liệu này có thể là LatLng một đối tượng hoặc một WeightedLocation . Sau khi tạo thực thể cho đối tượng HeatmapLayer, hãy thêm đối tượng đó vào ánh xạ 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 đồ 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 LatLng hoặc WeightedLocation hoặc kết hợp cả hai. Cả hai đối tượng đều đại diện cho một dữ liệu duy nhất một điểm trên bản đồ, nhưng đối tượng WeightedLocation cho phép bạn thêm vào chỉ định 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 kết xuất ở cường độ lớn hơn đối tượng LatLng đơn giản. Trọng số là một thang đo tuyến tính, trong đó mỗi LatLng đối tượng có trọng số ngầm định là 1 — thêm một WeightedLocation duy nhất / {location: new google.maps.LatLng(37.782, -122.441), weight: 3} sẽ có có tác dụng tương tự như 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 đơn vị quảng cáo WeightedLocation vật thể có trọng lượng 1.000 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ẽ đồ thị dữ liệu động đất, nhưng bạn nên để sử dụng WeightedLocation nhằm đo cường độ của từng trận động đất vào thang đo độ giàu 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);

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

Bạn có thể tuỳ chỉnh cách kết xuất bản đồ nhiệt bằng bản đồ nhiệt sau đâ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 tán khi thu phóng hay không. Thời gian phân tán là sai, bán kính ảnh hưởng tăng lên với mức thu phóng thành đảm bảo cường độ màu sắc được duy trì ở bất kỳ khu vực địa lý cụ thể nào vị trí. 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 CSS chuỗi màu. Tất cả màu CSS3 — bao gồm RGBA — được hỗ trợ, ngoại trừ tên mở rộng có tên mở rộng màu và HSL(A).
• maxIntensity: Cường độ tối đa của bản đồ nhiệt. Theo mặc định, bản đồ nhiệt được điều chỉnh tỷ lệ tự động theo nồng độ các điểm tại bất kỳ điểm ảnh 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 có chứa một vài điểm ngoại lai có cường độ cao bất thường.
• radius: Bán kính ảnh hưởng cho từng đ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ố cách tuỳ chỉnh có sẵn.

Xem ví dụ