接下來要介紹DOM Utility，裡面都是一些DOM常用的方法類，包含以下項目：

• DomEvent
• DomUtil
• PosAnimation
• Draggable

裡面有很多項目我都沒有用過，如果有想要更加深入了解的內容，可以在下面留言喔～我會盡量回答的！！

DomEvent

用於DOM事件的method：

• on: HTMLElement
  • 設定一個監聽函數，可以添加一些如 click的事件，並設定觸發之後的動作。
• off: HTMLElement
  • 既然有on，就要有off可以關起來嘛～
    其他還有很多個方法可以使用，請參考：Leaflet_DomEvent

DomUtil

這裡面大部分的functions都會回傳HTMLElement，如 get , create, remove

後面在製作實例的時候會再做補充，若想直接了解可以先參考Leaflet_DomUtil

PosAnimation

用於平移地圖的功能。Leaflet官網提供的範例為：

var fx = new L.PosAnimation();
fx.run(el, [300, 500], 0.5);

第1行為建立一個PosAnimation的物件，第2行則是執行動畫。由於這個範例需要有一個 el的HTMLElements，但這邊沒有建立，於是在網路上另外找一個範例來介紹，資料來源是：這邊

程式碼範例如下：

var myPositionMarker = L.marker([48.864716, 2.294694]).addTo(myMap);

myPositionMarker.on("click", function(){
	var pos = myMap.latLngToLayerPoint(myPositionMarker.getLatLng())
	pos.y -= 25;
	var fx = new L.PosAnimation();

	fx.once('end',function(){
		pos.y += 25;
		fx.run(myPositionMarker._icon, pos, 0.8);
	});

	fx.run(myPositionMarker._icon, pos, 0.3);

});

以上程式碼範例為，點下地圖中的圖標，圖標就會跳起來。
第1行為建立一個marker到地圖中。
第3行開始建立一個myPositionMarker的click監聽事件，當滑鼠對myPositionMarker按下左鍵時，就會執行第4到15行的程式碼內容，程式碼主要邏輯如下：

1. 建立pos物件，PosAnimation的 runmethod包含：
   • el: <HTMLElement>， HTML物件。
   • newPos: <Point>，動畫的新點位。
   • duration: <number>，動畫播放時間，非必填。
   • easeLinearity: <number>，線性參數，非必填。
     因為這個範例目的是要讓滑鼠在圖標上按下左鍵之後，出現圖標在跳的動畫，首先要先知道滑鼠按的位置在哪，所以用getLatLng()取得座標，再利用latLngToLayerPoint()將座標單位(m)轉成point座標(pixel)
2. 設定動畫跳起來的最終位置。這邊要注意的地方，是point座標的(0,0)是在畫面的左上角，所以如果要讓圖標垂直跳起來的話，Y的座標會比一開始低。
   
   假設現在的座標是(300, 450)，那麼將這個點往上移動50 pixels之後，座標會變為(300, 400)。上面程式碼範例為往上移動25 pixels。
3. 建立PosAnimation物件
4. 設定當動畫結束時，圖標的位置。這邊位置設定回原位，並設定posAnimation去執行，但是持續時間為0.8秒。
5. 設定動畫執行位置及時間，這邊設定位置為上方25 pixels 的地方，持續時間為0.3秒。

於是乎完成的動畫就會長這個樣子，可以看到跳起來跟跳回來速度不一樣，這就是0.3與0.8的差別！！

Draggable

從字面上的意思就可以知道這個是設定物件是否可拖曳的功能。如果要設定剛剛的圖標變成可拖曳的話，就可以用以下方法完成：

var myPositionMarker = L.marker([48.864716, 2.294694]).addTo(myMap);

myPositionMarker.on("click", function(){
    L.Draggable(myPositionMarker._icon);
        draggable.enable();
    });
});

此時進入地圖後，想要拖曳圖標時，他是不會理你的，因為上面設定的監聽事件是 click，所以要先對他按一下左鍵，他才會乖乖的讓你拖曳。

好了，今天的介紹就到這邊囉，希望大家會喜歡～～
如果有任何問題，歡迎在下面發問喔～