看到前兩天的新聞: 柯文哲想公開易淹水地區 北市府已上網,又剛好有前輩寫了一篇 利用QGIS檢視台北市降雨淹水模擬圖雖然身處房仲業,但身為有良心的開發者不能只想著房價,心想應也可透過 Google Map 來呈現,於是試了一下,順便寫篇記錄。

首先從臺北市政府資料開放平台將所需的資料一一下載下來,格式是 kmz (其實就是 zip 壓縮)。在解壓縮後可以得到 doc.kml 檔案。 接著,雖然 Google maps API 有提供 KML Layers 的圖層嵌套,但轉出來的 kml 檔似乎要稍作修改後才能透過 KML Layers 套用在 Google map 上,這裏我選擇另一種做法: 將 kml 轉為 geoJSON 後使用。

前面說到要將 kml 檔案轉為 geoJSON,那麼該如何轉換格式呢? 幸好 mapbox 提供了 togeojson 這套工具,透過它提供的 toGeoJSON.kml(doc) 就可以輕鬆地將它轉為 geoJSON 的格式了。

有關 GeoJSON 如何輸出至 Google Map 可以參考小弟之前的 post:透過 Google Maps API 處理 GeoJSON 資料,這裏就不再贅述。

值得一提的是,透過 Google Maps Javascript API 輸出的 GeoJSON 預設的樣式都是黑色粗線,想要修改樣式的話可以透過 setStyle 來做處理,像這樣可以針對 name 是 0.3 的時候,我們輸出樣式為藍色的線,如果是 0.3~1.0 的話,則是輸出為綠色的線段,當然也可以針對填色與透明度等等做設定。

1
2
3
4
5
6
7
8
dataMap.setStyle(function(feature){
if( feature.getProperty('name') === '0.3'){
return { fillOpacity: 0.35, fillColor: '#0070FF', strokeWeight: 2, strokeColor: '#0070FF', strokeOpacity: 1 };
}
if( feature.getProperty('name') === '0.3~1.0'){
return { fillOpacity: 0.35, fillColor: '#54FF00', strokeWeight: 2, strokeColor: '#54FF00', strokeOpacity: 1 };
}
});

結果呈現像這樣: image.png

這裏也有 Online Demo: http://kurotanshi.github.io/TPEDisasterSummary/rain/rain_tp_map.html