Google Maps API學習筆記-3:用熱圖(Heat map)製作全台12小時雨量分佈圖

Google Map API學習筆記-3:用熱圖(Heat map)製作全台12小時雨量分佈圖

一、Google處理掉很多事了

原本以為畫熱圖(Heat map)很難,後來看了Google Maps API的文件,Google已經處理掉大部份的工作了,我們只要丟座標,加上每個座標的權重,剩下的事情Google都會幫你搞定。

如果會了系列第一篇的放多個標記,跟第二篇的畫圓形,其實heat map也就會了。

Heat Map是把數據視覺化在地圖上的一種,這種數據視覺化的地圖,照文件上給的範例有二:

1 圓圈圖(Circle Map):用不同大小的圓圈當代表,像文件上示範的是地震狀況圖,每個圓圈大小就代表著不同的地震級數。google map demo

放個廣告賺點養主機的$$,謝謝

2 熱圖(Heat Map):就是本篇要實作的,會配合地理因素跟權重大小,生成出很像是熱感應圖的東西。google map demo

Circle Map比較簡單,就是在放多個標記時,icon用客製,都用成畫圓圈的function就行。

這篇來拿第二個Heat Map來實作,畫一個台灣12小時累積雨量的分佈圖。


二、取得氣象局雨量資料

在「接氣象局api、跨網域get資料」這篇中有寫怎麼拿氣象局API的授權碼,以及拿到API的url。

這邊寫另一個取得url的方式。主要是最近氣象局一直在推他們的新版官網,搜尋「氣象局 api」,第一名的結果就是:氣象資料開放平台

找觀測雨量的資料,就會找到這頁:自動雨量站-雨量觀測資料

登入會員後,如果有取得授權碼,在「JSON」的連結,就可以當GET的url。不過加了想要限定回傳資料的參數,好像跟原有的opendata API不太一樣,至少只想回傳12小時內的就沒用。

附上GET回來後,每個主欄位的中文說明:

https://drive.google.com/viewerng/viewer?url=https://opendata.cwb.gov.tw/opendatadoc/DIV2/A0002-001.pdf

放個廣告賺點養主機的$$,謝謝

要注意的是,雖然文件中說雨量值是-998.00時,代表連著6小時內的值都是0,但實作時遇到的情況是,除了會出現-998.00,也會遇到-999.00。為了避免權重上的影響,這2個值出現時都要換成0。

以下是GET回來後的資料demo:

氣象局回傳的雨量資料
氣象局回傳的雨量資料

各觀測站的資料都在 cwbopendata.location 裡,總共有798個觀測站,再打開來會看到每個站的資料:

觀測站的資料
觀測站的資料

lat是經度、lon是緯度,合起來就是座標。

elemenetName代表的意思,前面附上的pdf就有說明了。這邊用的是12小時累積雨量,所以是抓陣列裡的第5個。


三、資料整理成Heat Map要的

Heat Map預設是只要一個資料就行,就是座標。

但只有座標,看不出影響的程度,再加上權重(Weight)會更清楚。

這邊拿雨量當作權重,整理的資料是這樣:

let rainData = {
  location: new google.maps.LatLng(經度, 緯度),
  weight: 雨量
};

用forEach把每個觀測站的雨量資料處理成上面的物件,再push進一個陣列裡,接著就可以拿這個資料陣列去畫Heat Map。


四、畫熱圖Heat Map

畫Heat Map的code如下:

let heatmap = new google.maps.visualization.HeatmapLayer({
  data: heatmapData,
  dissipating: false,
  radius: 20, // 半徑
  gradient: [], // 顏色
  map: map
});

dissipating

dissipating這個比較特別,是指地圖放大縮小時,熱點圖是否要跟著加強。false就是會,true就是不會。

之所以會說特別,是因為不知道是不是共有798個點,當設成false讓每個點跟著強加的結果,就會讓整個台灣像被AT力場包起來一樣,像這樣:

dissipating設成false
dissipating設成false

改成true以後才正常。

有可能是對這個參數的理解錯了,也有可能是其他原因,如果有知道的高手請不吝賜教。

gradient

這個也是很容易踩雷的參數。

他的值是一個陣列,原本以為是給一個色碼,程式就會自動用權重去加上深淺的分別,結果完全不是這麼一回事。

之所以用陣列,就是要填入很多不同的色碼,假設權重是1–10,又希望這10個權重反應出的顏色都不一樣,就要照著1–10的順序填入不同的色碼。像這樣:

[
  '#000', // 給權重0的色碼
  '#111', // 給權重1的色碼
  '#222', // 給權重2的色碼
  '#333', // 給權重3的色碼
  ...
]

色碼,可以寫white、black等顏色名字,也可以寫Hex的六碼,或是寫rgba。

可以寫rgba很重要,因為實作發現,第一個值會給權重0,就是熱圖上其他沒有值的狀況,如果第一個值寫了紅色,那整張表都會加上一層紅色。

因此陣列第一個值給權重0的色碼,建議是填rgba(255, 255, 255, 0),讓透明度為0,才不會整張地圖都染上顏色。

這邊因為是要顯示雨量分佈,就直接用material design的色表

method執行完後,雨量分佈的Heat map就完成了:

雨量分佈的Heat map
雨量分佈的Heat map

五、原始碼

本篇的原始碼整理如下,替換氣象局跟Google Maps API的key就行了。


Google Maps API學習筆記系列

  1. 地圖、標記、客製樣式
  2. 在地圖上畫個日本結界
  3. 用熱圖(Heat map)製作全台12小時雨量分佈圖
  4. place API自動完成地址、地點評論摘要
  5. 抓目前位置、計算到各點距離

Summary
Google Maps API學習筆記-3:用熱圖(Heat map)製作全台12小時雨量分佈圖
Article Name
Google Maps API學習筆記-3:用熱圖(Heat map)製作全台12小時雨量分佈圖
Description
本篇大綱:Google處理掉很多事了、取得氣象局雨量資料、資料整理成Heat Map要的、畫熱圖Heat Map、原始碼。原本以為畫熱圖(Heat map)很難,後來看了Google Maps API的文件,Google已經處理掉大部份的工作了。
Augustus
Let's Write
Let's Write
Publisher Logo

留言