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},接著簡單指定載入資料後繪製的線條與填滿顏色。

範例:在 Google 地圖上繪製台灣縣市行政區域

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來監聽資料圖層事件,資料圖層事件有以下幾種:

透過這些資料圖層事件,搭配setStylerevertStyle的方法,就能夠做到當滑鼠移到不同的縣市,該縣市的區域顏色就會變化的效果。

範例:滑鼠移到縣市的區塊上,該區塊會變色

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 的資料圖層很有趣,但過程裡也遇到了一些同步非同步的問題,我想這部分會稍微複雜點,就留待之後的篇幅繼續介紹。

參考

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