Google Maps API - 熱度圖 ( Heatmap )

前幾篇寫完了一系列的折線圖、多邊形、圓形和矩形,感覺應該可以在地圖上做點和資料密度相關的例子,Google Maps API 除了形狀,也提供了「熱度圖」的圖層方法,這篇就來實作如何在 Google 地圖上顯示熱度圖。

如何使用熱度圖

熱度圖是一種視覺效果,在地圖上用來描繪某個地理位置的資料強度,啟用 Google 的熱度圖圖層之後,地圖的最上層便會出現一個熱度圖的疊加層,疊加層預設強度較高的區域會顯示紅色,強度較低的區域則會顯示成綠色。

使用熱度圖之前,要先載入視覺程式庫 google.maps.visualization,這個程式庫預設不會載入,所以需要在引用 Google Maps API 的後方加上對應的 libraries 參數來啟用,

<script src="https://maps.googleapis.com/maps/api/js?key=你的_API_Key&callback=initMap&libraries=visualization" async defer></script>

啟用之後,要使用熱度圖的方式如下,HeatmapLayerOptions 的部分是相關屬性設定。

var heatmap = new google.maps.visualization.HeatmapLayer(HeatmapLayerOptions);

熱度圖設定 HeatmapLayer Options

熱度圖方法 HeatmapLayer Methods

WeightedLocation

熱度圖的 data 有兩種,第一種是使用「點的密度 ( LatLng )」,第二種則是「指定資料的權重 ( WeightedLocation )」,在 Google 地圖熱度圖上的每個點 ( LatLng ) 預設的單位權重都是 1,但可以透過 weight 來更改,使其成為 WeightedLocation 物件,兩種 data 可以混用,純粹看使用的情境來決定,混用的方法如下。

var heatMapData = [
  {location: new google.maps.LatLng(經緯度), weight: 0.5},
  new google.maps.LatLng(經緯度),
  {location: new google.maps.LatLng(經緯度), weight: 2}
];

在 Google 地圖上使用熱度圖

搭配上面所介紹的熱度圖設定與方法,可以很簡單的在地圖上畫出一個熱度圖 ( 還沒有使用 weight ),例如下面的例子,假設知道每台車子的座標,基本上就可以用熱度圖,標示出哪個路口車子很多或是正在塞車。

範例:Google 地圖熱度圖

var map;

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 16,
    center: {
      lat: 25.033090,
      lng: 121.563438
    }
  });

  var heatmap = new google.maps.visualization.HeatmapLayer({
    map: map,
    data: [
      new google.maps.LatLng(25.033090, 121.563438),
      new google.maps.LatLng(25.033261, 121.563540),
      new google.maps.LatLng(25.033025, 121.563331),
      new google.maps.LatLng(25.033065, 121.563696),
      new google.maps.LatLng(25.033364, 121.563419),
      new google.maps.LatLng(25.032099, 121.561341),
      new google.maps.LatLng(25.032021, 121.562895),
      new google.maps.LatLng(25.031958, 121.558931),
      new google.maps.LatLng(25.031248, 121.558455),
      new google.maps.LatLng(25.032119, 121.560154),
      new google.maps.LatLng(25.035347, 121.559460),
      new google.maps.LatLng(25.035095, 121.557516)
    ],
    radius:65

  });
}

另外一個例子,可以透過 WeightedLocation 指定不同地點的權重,然後也透過 gradient 來修改熱度圖的顏色,最終呈現的風貌就會很不一樣,注意,漸層 gradient 的色彩是由「整份地圖外往內」作漸層,所以位在陣列的第一筆資料是最外圍,也因為會覆蓋地圖,通常會把第一筆資料的透明度設為 0,依序往內,最後一筆資料則是密度最高的的顏色。

var map;

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 16,
    center: {
      lat: 25.033090,
      lng: 121.563438
    }
  });

  var gradient = [
    'rgba(0, 0, 255, 0)',
    'rgba(0, 150, 255, 1)',
    'rgba(50, 120, 205, 1)',
    'rgba(100, 90, 155, 1)',
    'rgba(150, 60, 105, 1)',
    'rgba(200, 30, 55, 1)',
    'rgba(255, 0, 0, 1)'
  ];

  var heatmap = new google.maps.visualization.HeatmapLayer({
    map: map,
    data: [
      new google.maps.LatLng(25.033090, 121.563438),
      new google.maps.LatLng(25.033261, 121.563540),
      new google.maps.LatLng(25.033025, 121.563331),
      {location: new google.maps.LatLng(25.033065, 121.563696), weight: 6},
      new google.maps.LatLng(25.033364, 121.563419),
      {location: new google.maps.LatLng(25.032099, 121.561341), weight: 5},
      new google.maps.LatLng(25.032021, 121.562895),
      {location: new google.maps.LatLng(25.031958, 121.558931), weight: 8},
      new google.maps.LatLng(25.031248, 121.558455),
      new google.maps.LatLng(25.032119, 121.560154),
      {location: new google.maps.LatLng(25.035347, 121.559460), weight: 5},
      new google.maps.LatLng(25.035095, 121.557516)
    ],
    radius: 65,
    opacity:0.8,
    gradient:gradient

  });
}

範例:改變 Google 地圖熱度圖的權重與顏色

參考資料:

有興趣瞧瞧其他新文章嗎?