Google Maps API - 顯示台灣縣市 ( GeoJSON )
前一篇練習了用 Google Maps API 讀取 GeoJSON 資料並在地圖顯示圖案，這篇就更近一步，透過 map.data 讀取台灣縣市的 GeoJSON 並顯示在地圖上，同時讓滑鼠移到各個縣市形狀的時候呈現不同的顏色。
台灣縣市行政區域 GeoJSON
要顯示台灣縣市行政區域，首先要有行政區域的資料，感謝國內熱血的大大們，已經幫大家整理好了相關圖資，讓我們可以透過這些圖資來進行繪製，或是做許多視覺化的應用。
如果單純要取得縣市行政界線，可以用 sheethub 所提供的 中華民國縣市，打開後選擇下載「GeoJSON」，就可以相關資料，完整的縣市行政界線資料點比較多，整份下載大約有 9~10 MB。
如果覺得資料太大，可以使用 g0v 的 twCounty2010merge.topo.json，雖然精細度不如完整的資料，不過大致上仍看得出完整的縣市分界，因為資料大小只有 450 KB 左右，所以待會的範例會先用這份資料來呈現。
因為下載的是 TopoJSON 格式，所以我再透過一個線上服務 GeoJSON-TopoJSON 幫忙把 TopoJSON 轉換為 GeoJSON。
在 Google 地圖上繪製台灣縣市行政區域
有了資料後，接著就要來繪製了 ( 不清楚如何透過 Google Maps API 讀取 GeoJSON 可以參考Google Maps (14) - 顯示 GeoJSON 資料 )，首先我把地圖中心點定位在日月潭 {lat: 23.858987, lng:120.917631}，接著簡單指定載入資料後繪製的線條與填滿顏色。
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 7,
center: {lat: 23.858987, lng:120.917631}
});
map.data.loadGeoJson('taiwanCities.geojson.json');
map.data.setStyle({
strokeWeight: 1,
strokeOpacity: .5,
strokeColor: '#000',
fillColor: '#f00',
fillOpacity: .3
});
}
動態改變外觀
我們可以透過addListener來監聽資料圖層事件，資料圖層事件有以下幾種：
- addfeature：當資料特徵值增加時。
- click：滑鼠點擊
- dblclick：滑鼠連點兩下
- mousedown：按下滑鼠
- mouseup：放開滑鼠
- mouseover：滑鼠移到資料圖層上
- mouseout：滑鼠移出資料圖層
- removefeature：資料特徵值移除
- removeproperty：資料屬性移除
- rightclick：點擊滑鼠右鍵
- setgeometry：取得 geometry 資料
- setproperty：取得 property 資料
透過這些資料圖層事件，搭配setStyle與revertStyle的方法，就能夠做到當滑鼠移到不同的縣市，該縣市的區域顏色就會變化的效果。
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 7,
center: {lat: 23.858987, lng:120.917631}
});
map.data.loadGeoJson('taiwanCities.geojson.json');
map.data.setStyle({
strokeWeight: 1,
strokeOpacity: .5,
strokeColor: '#000',
fillColor: '#f00',
fillOpacity: .3
});
map.data.addListener('mouseover', function(event) {
map.data.revertStyle();
map.data.overrideStyle(event.feature, {fillColor: '#000'});
});
map.data.addListener('mouseout', function(event) {
map.data.revertStyle();
});
}
小結
實作台灣地圖後，感覺 Google 的資料圖層很有趣，但過程裡也遇到了一些同步非同步的問題，我想這部分會稍微複雜點，就留待之後的篇幅繼續介紹。