本篇要解決的問題
之前寫過二篇 OSM + Leaflet.js 的筆記文,當時總覺得跟 Google Maps 比起來有點陽春。前陣子有一次搭客運到宜蘭,瞄到客運員工開了一個網頁在看各車次到了哪裡,使用的就是 OpenStreetMap(OSM),當時看到就覺得,原來 OSM 還可以這樣子用呀(筆記)~
前幾天回頭看官方文件,發現文件裡有一頁是「Plugins」,裡面洋洋灑灑地列出了一堆套件,讓使用地圖的人可以直接套用,減少開發時間。
本篇就是先看了幾個套件,選出幾個覺得未來可能會到的,並實作出一頁 Demo 來,把這些套件都套進地圖裡。
選出的套件有:
- 定位
- 全螢幕
- 右下方同步小地圖
- 列印
- 含 collapse 功能的客製選單
還有幾個套件也覺得好用,但五個套件在一篇文章裡有點多了,就看以後有沒有機會再寫第四篇學習筆記文。
OSM + Leaflet.js 的基本使用,像是繪製地圖、放 markder 等,請看前二篇筆記文,這邊不會有詳細的解釋。
- OSM + Leaflet 學習筆記 1:建地圖、marker、事件、換圖層
- OSM + Leaflet 學習筆記 2:移動中心點、抓目前地點
SHP 轉 GeoJSON,座標轉 WGS84
這次先從政府資料開放平臺裡,選出「國家公園、國家森林遊樂區及國家風景區範圍內之觀光景點(本島)」當地圖上的點。
結果,抓出來的資料格式是 SHP,需要轉成 GeoJSON 後才能使用。
然後就踩坑了。
主要的坑就是,當用了 mapshaper 轉成 GeoJSON 後,因為政府提供的資料裡,座標是真的座標,但我們用的 OSM 是使用麥卡托投影法,座標必須轉成 WGS84 的格式,放上地圖時才會正確。
之前有寫過一篇「D3.js、Vue 畫一個台灣地圖」,裡面是靠 D3.js 原有的 function 去處理,而這邊是用 Leaflet.js,需要另尋出路。
Leaflet.js 文件上有看到一個「coordsToLatLng」的 function,但不論試了各種寫法都沒有轉成功。
後來再 Google 查了一下,發現地圖投影法真的是另一個小宇宙,有夠複雜,投影法的介紹可以看這篇「地理小課堂:那些被錯付的地圖投影法」,這邊就用最簡單的方式來做轉換。
這個簡單的方式就是:在 mapshaper 轉成 GeoJSON 時,輸出前先將座標轉為 WGS84。
這個方式主要來自於這篇:How to make your coordinates WGS84 with mapshaper.org
1 將要轉出的檔案拉進 mapshaper 裡:
2 點擊右上角的 Console,輸入 -proj wgs84
後按下 enter:
3 點右上角的 Export,格式選 GeoJSON:
以上,這樣匯出的 JSON 檔,裡面的座標就會是 WGS84 格式,可以正確放上地圖。
定位:Leaflet.Locate
官方文件:https://github.com/domoritz/leaflet-locatecontrol
官方示例:https://domoritz.github.io/leaflet-locatecontrol/demo/
這個套件蠻好用的,除了有定位光點的樣式,還給了目前朝哪的方向。
不過遇到一個很奇怪的狀況,JS 檔如果是引用 CDN 的,就會一直抓不準定位,誤差距離會到二公里以上,只有直接從 GitHub 上把 JS 下載下來使用,定位才正常。
實測了好幾次都是這樣,所以大家如果要用,建議直接從 GitHub 裡抓 JS。
CSS 則可以引用 CDN,CSS 裡引用圖檔的部份就不用再另外下載。
Leaflet.Locate 使用方式很簡單,當地圖渲染完成後,JS 如下:
L.control.locate({
position: 'topleft',
locateOptions: {
enableHighAccuracy: true
},
strings: {
title: '定位我的位置',
metersUnit: '公尺',
feetUnit: '英尺',
popup: '距離誤差:{distance}{unit}以內'
},
clickBehavior: {
inView: 'stop',
outOfView: 'setView',
inViewNotFollowing: 'inView'
}
}).addTo(map);
position
:定位按鈕要放地圖的哪個位置。
enableHighAccuracy
:要不要啟用精準定位。
strings
:顯示文字的部份。這邊是 August 自行翻譯的,其中 popup
內容跟原本的不太一樣,但覺得說明誤差距離會比較好懂意思。
clickBehavior
:點擊執行按鈕時,不同狀況要給的不同動作。
這套使用起來很簡單,文件中也列出了一堆參數,想看還有什麼可以使用的參數請自行上官方文件查看。
全螢幕:Leaflet.Control.FullScreen
官方文件:https://github.com/brunob/leaflet.fullscreen
官方示例:https://brunob.github.io/leaflet.fullscreen/
一般嵌入地圖在網頁上,很少會是全螢幕的嵌入,因為當地圖是全螢幕時,滑鼠或手勢的操作就會全被地圖的操作給吃掉,頁面的其它部份就不容易被看到。
不過如果是只嵌在網頁上的一小塊,桌機時還好,畢竟螢幕夠大的話還是可以看見地圖內容。
但手機就不方便了,像是本篇的 Demo 加了一堆按鈕上去,地圖本身的內容就會被擋住一大部份。
這時有個全螢幕按鈕讓地圖是全螢幕呈現,就很方便。
使用方式很簡單,當地圖渲染完成後,JS 如下:
L.control.fullscreen({
position: 'topleft',
title: '進入全螢幕',
titleCancel: '離開全螢幕',
content: '<img class="p-1" src="dist/size-fullscreen.svg">',
forceSeparateButton: true,
forcePseudoFullscreen: true,
fullscreenElement: false
}).addTo(map);
position
:全螢幕按鈕要放地圖的哪個位置。
content
:全螢幕按鈕裡的 HTML,這邊是放一張 svg 的圖檔。
forceSeparateButton
:全螢幕按鈕要不要跟縮放按鈕分開來。
forcePseudoFullscreen
:全螢幕要玩真的還是玩假的 XD~
true
代表要執行的是假的全螢幕、false
代表是真的全螢幕。
假的 就是讓地圖的寬高塞滿頁面而已,瀏覽器上的那些網址列或書籤列都還看得到。
真的 就是像 Youtube 上我們點全螢幕一樣,會看到一個滿滿的地圖大平台。
fullscreenElement
:看了文件看不懂意思,只知道當設為 true
時,就必須要在點擊按鈕後再執行某個 callback,不然全螢幕功能會失效。
套件裡還給了二個事件:enterFullscreen
(進入全螢幕)、exitFullscreen
(離開全螢幕)。
本篇的 Demo 有使用到這二個事件,拿來做全螢幕按鈕上的圖片切換:
const fullscreenBtn =
document.querySelector('.leaflet-control-zoom-fullscreen');
map.on('enterFullscreen', () => {
fullscreenBtn.innerHTML =
'<img src="dist/fullscreen-exit.svg">';
});
map.on('exitFullscreen', () => {
fullscreenBtn.innerHTML =
'<img src="dist/size-fullscreen.svg">';
});
小地圖:Leaflet.MiniMap
官方文件:https://github.com/Norkart/Leaflet-MiniMap
這個套件就是在地圖的右下角再放一個小地圖,可以同步大地圖顯示目前我們選擇的地方。
它的作法其實就是嵌入第二個地圖,因此我們在寫渲染地圖的部份,可以把相同的參數設成變數。
// 相同的參數存成變數
const center = {地圖中心點};
const zoom = {縮放值};
const map = L.map('map').setView(center, zoom);
const osmUri = {Tiles 的檔按路徑};
const attribution = {版權宣告內容};
// 主要地圖
L.tileLayer(osmUri, {
attribution: attribution
}).addTo(map);
// 小地圖
const miniOSM = new L.TileLayer(osmUri, {
minZoom: 0, maxZoom: 13,
attribution: attribution
});
列印:leaflet-easyPrint
官方文件:https://github.com/rowanwins/leaflet-easyPrint
官方示例:https://rowanwins.github.io/leaflet-easyPrint/
這個……其實也不確定功能的實用性,但 Google Maps 有分享地圖的功能,而 OSM 目前還沒看到分享功能之類的套件,就先拿列印功能來充數,至少可以讓其它人知道我們看到的地圖長什麼樣子。
L.easyPrint({
title: '列印地圖',
position: 'topleft',
sizeModes: ['Current', 'A4Portrait', 'A4Landscape']
}).addTo(map);
sizeModes
是要列印成哪些格式,預設有三種,也可以另外自己去設定寬高。
完整的參數就請自行看文件囉。
客製選單:sidebar-v2
官方文件:https://github.com/turbo87/sidebar-v2/
官方示例:https://turbo87.github.io/sidebar-v2/examples/index.html
這套用起來稍微麻煩的地方,就是必須要調整 HTML,它的作法就是另外寫好一個 collapse 的 HTML,然後塞進地圖裡。
如果想要自己寫一個不一樣的選單,是可以自己花時間寫,用套件單純就是為了節省開發時間。
程式碼的部份,可以看官方提供的:
https://github.com/Turbo87/sidebar-v2/blob/master/examples/index.html
本篇 Demo 因為有寫了讓地圖維持在 16:9、4:3 的比例,所以 HTML、CSS 都有再做修改,跟官方提供的程式碼有不同,各位如果要使用,建議是看原本的程式碼,複製貼上後再針對各自的頁面去修改樣式。
除了 sidebar-v2,也有蠻多客製按鈕的套件很不錯,以下列出,可自行看示例選擇要不要使用:
本篇 Demo 及原始碼
最後附上本篇的 Demo 網址,及原始碼的 Github 網址。
Demo:https://letswritetw.github.io/letswrite-leaflet-plugins/
GitHub:https://github.com/letswritetw/letswrite-leaflet-plugins
OSM + Leaflet 學習筆記系列
OSM + Leaflet 學習筆記 1:建地圖、marker、事件、換圖層
Top comments (0)