OSM + Leaflet 學習筆記2:移動中心點、抓目前地點

OSM + Leaflet 學習筆記2:移動中心點、抓目前地點

本篇要解決的問題

在上一篇有寫到 跟使用者要權限 的部份,當時用的是 WebAPI 的 Geolocation。這幾天再看了一下 Leaflet 的文件,發現裡面也有跟使用者要地理位置的 locate,就花時間研讀並實作一個頁面出來。

另外,之前在寫 Google Maps API 時,有用到移動地圖中心點的功能,正好抓使用者位置後,如果使用者移動了,也需要改變地圖的中心點,就一起整理在這一篇。

本篇最後會完成的 Demo:

https://letswritetw.github.io/letswrite-leaflet-osm-locate/

原始碼部份最後一段會附上。

如果是想看怎麼用 Leaflet 建立 OpenStreetMap 地圖,這部份都寫在上一篇了,一些基本使用本篇會快速的帶過,各位捧油們有興趣的話可以先看上一篇:

OSM + Leaflet 學習筆記1:建地圖、marker、事件、換圖層


移動中心點

參考文件:Methods for modifying map state

Leaflet 移動地圖中心點的功能有二種,主要是移動的效果有所不同。

panTo 是平行移動,flyTo 是具有縮放效果,效果可以從 Demo 頁上看差異,flyTo 把距離拉遠一點會更明顯。

另外還有一個 panBy,可以指定移動多少 X 軸及 Y 軸的距離。

這是廣告,點擊一下可以幫本站多個一點點的廣告收入,謝謝

panTo、flyTo

map.panTo(latlng, [options])
map.flyTo(latlng, [options])

latlng 就是要移成中心點的緯度跟經度,可以有以下幾種寫法(文件):

map.panTo([50, 30]);
map.panTo({lon: 30, lat: 50});
map.panTo({lat: 50, lng: 30});
map.panTo(L.latLng(50, 30));

options 是選填,共有 4 個參數可填(文件):

animate:Boolean,要不要有動畫效果。
duration:Number,移動的時間,預設是 0.25 秒。
easeLinearity:Number,0-1 之間的值,1 代表線性,數字愈小曲線愈彎。
noMoveStart:Boolean,預設為 false。

panBy

panBy(point, [options])

point 就是填要位移多少距離,有以下二種寫法(文件):

map.panBy([200, 300]);
map.panBy(L.point(200, 300));

options 跟上面的 panTo、flyTo 相同。


抓取使用者位置並讓 Marker 跟隨移動

這段其實就是在模仿我們平常手機用 Google Maps 時,在我們移動後,地圖的中心點跟顯示我們所在地的小藍圈也會跟著移動。

小藍圈的部份直接用 Adobe Ai 繪製的,就真的是一個藍圓圈包一層半透明的藍圓圈,不像 Google Maps 還有個探照燈的圖示表示朝哪邊。

抓取使用者位置

參考文件:Leaflet on MobileGeolocation methods

抓取使用者的位置,在 Leaflet 上就叫 locate

map.locate({
  setView: true, // 是否讓地圖跟著移動中心點
  watch: true, // 是否要一直監測使用者位置
  maxZoom: 18, // 最大的縮放值
  enableHighAccuracy: true, // 是否要高精準度的抓位置
  timeout: 10000 // 觸發locationerror事件之前等待的毫秒數
});

可用參數的部份還有一個:maximumAge。因為看文件說明看不懂,就不列上去。

當用了 locate,使用者開啟頁面後一樣會出現確認視窗:

跟使用者要位置資訊
跟使用者要位置資訊

使用者按下「允許」,會觸發 locationfound 事件。

使用者按下「封鎖」,會觸發 locationerror 事件。

知道會觸發何種事件,就可以針對事件來做處理。

locationfound

function foundHandler() {
  // 這邊寫抓到使用者位置後要做什麼事
}
map.on('locationfound', foundHandler);

本篇的 Demo 處理抓到位置後的事,主要就是移動 Marker,原始碼如下:

主要是用 marker.setLatLng(latlng) 來移動 Marker。

locationerror

function errorHandler() {
  // 這邊寫抓不位置的話要做什麼事
}
map.on('locationfound', errorHandler);

本篇 Demo 是直接設一個預設的地點當中心點(動物園),並且跳一個 alert 告知使用者。

大家可以開啟 Demo 頁實測,會發現……就還是沒有 Google Maps 好看 XD~ 畢竟那是有收費的。

而且,不確定是不是因為位置一直抓不精確,所以地圖顯示的範圍常常會很大,幾乎都要顯示完一個區了~

只有偶爾幾次抓到很精準的,zoom 才會顯示到街道的大小。

這二天在不同的區實測,都有一樣的狀況,如果有人知道有讓 setView: true 可以主動要求 zoom 的值,歡迎留言告知。手動再加一行 map.setZoom 這招試過了,會一直因為抓到新的位置而忽近忽遠,不說還以為是在跳恰恰。


本篇 Demo 及原始碼

最後附上本篇的 Demo 網址,及原始碼的 Github 網址。

Demo:https://letswritetw.github.io/letswrite-leaflet-osm-locate/

Github:https://github.com/letswritetw/letswrite-leaflet-osm-locate

Summary
OSM + Leaflet 學習筆記2:移動中心點、抓目前地點
Article Name
OSM + Leaflet 學習筆記2:移動中心點、抓目前地點
Description
本篇大綱:本篇要解決的問題。移動中心點-panTo、flyTo、panBy。抓取使用者位置並讓 Marker 跟隨移動-抓取使用者位置。本篇 Demo 及原始碼。
Augustus
Let's Write
Let's Write
https://letswrite.tw/wp-content/uploads/2020/08/logo_512.jpg
訂閱
通知
guest
0 Comments
Inline Feedbacks
看所有留言