leaflet (3) Map class 介紹

發表於 更新於
介紹常用的 map 方法

建立 map

和第一章介紹過的一樣，可以用 .map() 方法快速建立一個 map。

1
2
3
4
5
// initialize the map on the "map" div with a given center and zoom
var map = L.map('map', {
    center: [51.505, -0.09],
    zoom: 13
});

Options

在建立map的方法裡，第二個參數會傳入 options參數(物件)，來設定map相關數值。以下介紹不同種類的options。

State Options

設定地圖相關數值的options，常用的如:

  • zoom: 地圖預設縮放大小
  • maxZoom: 最大縮放級距
  • minZoom: 最小縮放級距
  • center: 地圖中心位置(經緯度) 例: [121.02, 53]

Control options

  • attributionControl: arttribution是否被加入, 預設為true
  • zoomControl: 地圖縮放面板是否被加入, 預設為true

Locate options

使用者目前位置相關設定

  • setView: 自動將地圖設定到使用者位置。 true | false
  • watch: 持續觀測使用者位置。 true | false

其他還有很多options，大家可以到官網查詢

Events 事件

我們也可以在地圖上監聽事件，常用的事件如下

state change events

當地圖資料更改時觸發

  • resize: 當地圖大小變更時觸發
  • moveend: 地圖移動完畢觸發
  • zoomend: 地圖縮放完畢時觸發

Interaction events

常用的如 click、mousemove、keyup等等，和原生js的事件差不多。

Methods 方法

map可以觸發的方法，常用如下:

圖層相關方法

  • addControl: 增加 control 到地圖
  • addLayer: 增加指定 layer 到地圖
  • eachLayer: 對每個圖層做loop，類似 js 的forEach
1
2
3
map.eachLayer(function(layer){
    layer.bindPopup('Hello');
});

修改地圖資料的方法

  • setView(center[latlng], zoom): 設定地圖中心點([123.5, 23])和 縮放大小。
  • setZoom(Number): 設定縮放大小
  • panTo([latlng]): 將地圖移動到指定座標
  • flyTo([latlng]): 以動畫的方式移動到指定座標

取得地圖資料方法

  • getCenter: 取得地圖中心點座標
  • getBounds: 取得地圖邊界座標
  • getZooms: 取得地圖目前縮放大小