Zi 字媒體

OpenStreetMap 是個開放的地圖，不需要被商業 API 所限制，開發者可以自由地使用。這篇文章將帶你用 Leaflet.js 建置網頁上的 OpenStreetMap 地圖。 不久前在這個系列寫過 Google Maps 的教學文章：Web 視覺化(二)：使用 Google Maps JS API 建立地圖，然而 Google Maps 的收費方式改變，很多人都超過使用額度而被收費；你可能也看過一些文章在講 Facebook、蘋果和微軟如何貢獻 OpenStreetMap。如果你沒有足夠的預算去使用商業地圖，或你覺得是時候使用開放的地圖，可以試試看 OpenStreetMap。 載入 Leaflet.js OpenStreetMap 其實不只有開發者會使用，還有許多製圖者。這邊使用 Leaflet.js，一個也是開放原始碼的地圖套件來載入地圖。（本篇教學使用 v1.3.4，使用前不妨去官方網站看看有沒有新版本。） html, body{ width: 100%; height: 100%; } #map{ width: 100%; height: 100%; } var map; 我們在上面新增了一個 的容器，稍後可以把地圖載入到這個容器中。 對，使用 Leaflet + OSM 不需要 API Key。 建立基本地圖 在剛剛宣告的 var map; 下來產生地圖： map = L.map('map').setView([-25.363, 131.044], 5); L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: 'OSM', maxZoom: 18, }).addTo(map); 這是新增地圖的起手式，其中 L 是 Leaflet 套件，我們新增了一個 map 放在 id 為 map 的元素上，初始緯度在 -25.363、經度在 131.044，5 則是縮放程度。 除了建立地圖外，我們還要載入 OSM 的地圖圖層，否則你的地圖會是空白的。透過 L.tileLayer 載入 OpenStreetMap 提供的地圖圖層並加到 map 上，即可顯示地圖。 建立地標 使用 L.marker 則可以在特定座標上建立地標。 var marker = L.marker([-25.363, 131.044]); marker.addTo(map); 讀取 GeoJSON，加入行政區邊界 如果你已經閱讀過 Web 視覺化(三)：在 Google Maps 中加入行政區邊界，應該對開放資料和 GeoJSON 不陌生。使用 L.geoJSON 則可以讀取 GeoJSON 並加到地圖上。 比較可惜的是，Leaflet 無法直接讀取 GeoJSON 檔案，必須先透過 Ajax 等方式下載下來才行。這邊將使用 jQuery 做例子，如果你熟悉 XHR 也可以使用；如果你不知道什麼是 Ajax，可以閱讀 透過 Ajax 在不換頁的情況下提升作品質感。 $.getJSON('YOURFILE.json', function(r){ L.geoJSON(r, {color: '#333'}).addTo(map); }); 這樣就可以把行政區邊界放到地圖裡面了。也可以把 L.geoJSON 後面的選項改成想要的樣子，例如邊框粗細、顏色等等。 結語 透過 OpenStreetMap 弄出來的地圖可不輸 Google Maps，這次順便把之前的 高雄市 1999 市政儀表板：用 Open1999 開放資料做視覺化 順便改成 OpenStreetMap 來做，就不用擔心 API 被用完的問題。 另外，由於 OpenStreetMap 不需要 API Token，這次也準備了完整的 OpenStreetMap + Leaflet 範例供大家使用： 在 CodePen 上查看 NoobTW (@NoobTW) 的 OpenStreetMap Kaohsiung 延伸閱讀 透過 Ajax 在不換頁的情況下提升作品質感 關於 OpenStreetMap Leaflet A JavaScript library for interactive maps. Documentation - Leaflet How Facebook, Apple and Microsoft Are Contributing to OpenStreetMap OpenStreetMap台灣 | Facebook 社團 高雄市 1999 市政儀表板：用 Open1999 開放資料做視覺化 Web 視覺化 目錄 Web 視覺化(一)：使用 Chart.js 輕鬆建立圖表 Web 視覺化(二)：使用 Google Maps JS API 建立地圖 Web 視覺化(三)：在 Google Maps 中加入行政區邊界 Web 視覺化(四)：建立 OpenStreetMap 地圖 待續......