熱視圖圖層

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

熱視圖圖層提供用戶端轉譯熱視圖。

總覽

熱視圖是一種視覺化圖表,用來呈現地理點上的資料強度。啟用熱視圖圖層後,地圖頂端會顯示彩色疊加層。根據預設,高強度區域會呈現紅色,低強度區域則會顯示為綠色。

載入視覺化程式庫

熱視圖圖層是 google.maps.visualization 程式庫的一部分,根據預設不會載入。視覺化類別是獨立程式庫,與主要 Maps JavaScript API 程式碼不同,如要使用這個程式庫提供的功能,您必須先使用 Maps JavaScript API 啟動網址的 libraries 參數載入:

<script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&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);

新增加權資料點

熱視圖可顯示 LatLngWeightedLocation 物件,或同時顯示兩者的組合。這兩個物件都代表地圖上的單一資料點,但 WeightedLocation 物件可讓您另外為該資料點指定權重。為資料點套用權重後,會導致 WeightedLocation 的顯示強度大於簡單的 LatLng 物件。權重為線性比例,其中每個 LatLng 物件的隱含權重為 1;將單一 WeightedLocation 新增至 {location: new google.maps.LatLng(37.782, -122.441), weight: 3},其效果會與加入 google.maps.LatLng(37.782, -122.441) 的三次相同。您可以在單一陣列中混合使用 weightedLocationLatLng 物件。

在下列情況下,建議使用 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:指定熱視圖是否在縮放時消失。如果散佈為「否」,影響的半徑半徑會隨縮放等級一起增加,確保色彩強度在任何指定位置都會保留。預設值為 true。
  • gradient:熱視圖的色彩漸層,指定為 CSS 色彩字串陣列。支援所有 CSS3 顏色 (包括 RGBA),但延伸的色彩和 HSL(A) 值除外。
  • maxIntensity:熱視圖的最大強度。根據預設,熱視圖的顏色會根據地圖上任何特定像素的最大點密度動態調整。這項屬性可讓您指定固定上限。如果資料集包含一些極高強度的離群值,設定最大強度很有幫助。
  • radius:每個資料點的影響力半徑 (以像素為單位)。
  • opacity:熱視圖的不透明度,以 0 到 1 之間的數字表示。

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

查看範例