熱視圖圖層

選取平台： Android iOS JavaScript
  1. 總覽
  2. 載入視覺化程式庫
  3. 新增加權資料點
  4. 自訂熱視圖圖層

熱視圖圖層可讓您在用戶端算繪熱視圖。

總覽

熱視圖是以視覺效果，呈現地理位置點的資料強度。熱視圖圖層啟用後，地圖上方會顯示一個彩色疊加層。根據預設，資料強度較高的區域會以紅色顯示，強度較低的區域會以綠色顯示。

載入視覺化程式庫

熱視圖圖層是 google.maps.visualization 程式庫的一部分，根據預設不會載入。視覺化類別是獨立程式庫，與主要的 Maps JavaScript API 程式碼不同。如要使用這個程式庫中的功能，請先在 Maps JavaScript API Bootstrap 網址中使用 libraries 參數載入這個程式庫：

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

新增熱視圖圖層

如要新增熱視圖圖層，請先建立新的 HeatmapLayer 物件，並以陣列或 MVCArray[] 物件，提供部分地理資料。資料可以是 LatLng 物件或 WeightedLocation 物件。將 HeatmapLayer 物件執行個體化後，請呼叫 setMap() 方法，將物件加入地圖。

下方範例會在舊金山地圖上加入 14 個資料點。

/* 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);

新增加權資料點

熱視圖可算繪 LatLng 或 WeightedLocation 物件，甚至是兩者的組合。這兩個物件都代表地圖上的單一資料點，但 WeightedLocation 物件可讓您為該資料點額外指定權重。為資料點套用權重後，WeightedLocation 算繪出來的強度，會大於簡單的 LatLng 物件。權重是一種線性比例，其中每個 LatLng 物件的隱含權重為 1。也就是說，加入一個 {location: new google.maps.LatLng(37.782, -122.441), weight: 3} 的 WeightedLocation，效果就等於加入 google.maps.LatLng(37.782, -122.441) 三次。您可以在單一陣列中混用 weightedLocation 和 LatLng 物件。

下列情況適合以 WeightedLocation 物件取代 LatLng：

  • 加入單一地點的大量資料。算繪權重為 1000 的單一 WeightedLocation 物件，速度會比算繪 1000 個 LatLng 物件更快。
  • 根據任意值，強調您的資料。舉例來說，您可以使用 LatLng 物件繪製地震資料，但如果要測量每次地震的芮氏規模，建議使用 WeightedLocation。
/* 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);

自訂熱視圖圖層

您可以使用下列選項，自訂熱視圖的算繪方式。詳情請參閱 HeatmapLayerOptions 說明文件。

  • dissipating：指定熱視圖是否會在縮放時消失。如果 dissipating 設為 false，影響範圍半徑就會隨縮放等級增加，這樣任何特定地理位置上的顏色濃度就能維持不變。預設為 true。
  • gradient：熱視圖的顏色漸層，以 CSS 顏色字串陣列指定。支援所有 CSS3 顏色 (包括 RGBA)，但延伸的具名顏色和 HSL(A) 值除外。
  • maxIntensity：熱視圖的顏色濃度上限。根據預設，系統會根據地圖上任何特定像素點的最高濃度，動態調整熱視圖的顏色。這個屬性可讓您指定固定上限。如果資料集內含幾個濃度異常偏高的離群值，設定濃度上限可能就十分有用。
  • radius：每個資料點的影響範圍半徑，以像素表示。
  • opacity：熱視圖的不透明度，以 0 到 1 之間的數字表示。

以下列舉幾個可用的自訂選項。

查看範例