/ JavaScript視覺化網路程式Google

Web 視覺化(三):在 Google Maps 中加入行政區邊界

在學會操作基本 Google Maps 以後,再來是如何把行政區邊界加進地圖裡。這篇會透過政府開放資料的行政區邊界,把 GeoJSON 格式讀進地圖裡。

什麼是 GeoJSON?

GeoJSON 是一種專門給地理資訊(GIS)用的 JSON 格式,可以用來代表點(Point)、線(LineString)、多邊形(Polygon)、特徵(Feature)等等元素。畢竟是 JSON 格式的延伸,並不是發明一種新的格式,相容於很多系統,所以很受歡迎。

取得行政區邊界的資料 GeoJSON

我國的政府開放資料平臺上有許多 邊界資料,不過提供的都是 ESRI SHP格式、GML格式,對 Web 開發者來說並不是太友善。我也花了一段時間找怎麼把那些東西轉成 GeoJSON,最後放棄了。

幸好有位 Ronny Wang 大大曾經把這些資料都轉成 GeoJSON 並開放在網路上,可以到 SheetHub 看看,並下載你想要的 GeoJSON。

透過這些整理好的 GeoJSON,你可以將臺北這行政區邊界放在地圖上,或是把高雄市的左營區邊界放在地圖上等等。

把 GeoJSON 放到寫好的 Google Maps 地圖裡

等你弄好 GeoJSON 後,就可以透過 Google Maps 的 loadGeoJson 方法把 GeoJSON 檔案載入進去了:

var map;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: -28, lng: 137}
  });

  map.data.loadGeoJson('YOURFILE.json');
}

延伸閱讀

如果你還想把每一塊行政區上色的話,可以參考這些官方文件:

Web 視覺化 目錄