原文位址：http://blog.csdn.net/freeland1/article/details/50127427

Ol3中Map事件全解析

本文将粗略對ol3 基本地圖事件進行研究。

地圖點選事件

singleclick:地圖單擊事件。 

dblclick:地圖輕按兩下事件。 

click:地圖點選事件。

測試

<code class="hljs matlab has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">    <span class="hljs-transposed_variable" style="box-sizing: border-box;">map.</span>on(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'singleclick'</span>,<span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(e)</span>{</span>
        <span class="hljs-transposed_variable" style="box-sizing: border-box;">console.</span><span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">log</span>(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'地圖被單擊了！'</span>);
    });
    <span class="hljs-transposed_variable" style="box-sizing: border-box;">map.</span>on(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'dblclick'</span>,<span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(e)</span>{</span>
        <span class="hljs-transposed_variable" style="box-sizing: border-box;">console.</span><span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">log</span>(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'地圖被輕按兩下了！'</span>);
    });
    <span class="hljs-transposed_variable" style="box-sizing: border-box;">map.</span>on(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'click'</span>,<span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(e)</span>{</span>
        <span class="hljs-transposed_variable" style="box-sizing: border-box;">console.</span><span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">log</span>(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'地圖被點選了！'</span>);
    });</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li></ul>      

第一步，輕按兩下了地圖。第二部，單擊了地圖。 

列印結果如上。

總結

1 地圖輕按兩下，實際上是連續click地圖2下。是以click觸發了兩次，dblclick事件觸發了一次。 

2 地圖單擊，實際是click地圖1下。是以click觸發一次，singleclick事件觸發一次。 

3 無論單擊，還是輕按兩下事件，必定先觸發click事件。隻不過輕按兩下觸發兩次，單擊觸發一次。

滑鼠事件

pointerdrag：滑鼠拖拽事件。 

pointermove：滑鼠移動事件。

<code class="hljs matlab has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-transposed_variable" style="box-sizing: border-box;">map.</span>on(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'pointerdrag'</span>,<span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(e)</span>{</span>
        <span class="hljs-transposed_variable" style="box-sizing: border-box;">console.</span><span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">log</span>(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'滑鼠拖拽了！'</span>);
    });
    <span class="hljs-transposed_variable" style="box-sizing: border-box;">map.</span>on(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'pointermove'</span>,<span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(e)</span>{</span>
        <span class="hljs-transposed_variable" style="box-sizing: border-box;">console.</span><span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">log</span>(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'滑鼠移動了！'</span>);
    });</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li></ul>      

在地圖上光标移動，然後按下滑鼠左鍵，拖動地圖。 

實際操作中，pointermove很像是mousemove事件，但他們之間并不是一回事。在移動觸屏裝置中，pointermove是當地圖panned之後觸發，性質相當于web頁面上moveend之後的意思。 

pointerdrag是滑鼠按下pan地圖時觸發。在拖拽地圖時，pointermove事件也會觸發。部分功能類似一般地圖的’moving’事件。

地圖渲染事件

postcompose：地圖渲染中。 

precompose:準備渲染，未渲染。 

postrender:渲染全部結束。

<code class="hljs javascript has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//進行渲染</span>
    map.on(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'postcompose'</span>,<span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(e)</span>{</span>
        console.log(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'postcompose！'</span>);
    });
    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//渲染全部完成</span>
    map.on(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'postrender'</span>,<span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(e)</span>{</span>
        console.log(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'postrender！'</span>);
    });
    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//準備渲染，未開始渲染</span>
    map.on(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'precompose'</span>,<span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(e)</span>{</span>
        console.log(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'precompose！'</span>);
    });</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li></ul>      

地圖初始化，進行渲染，檢視渲染流程如下： 

整個地圖渲染流程是 precompose>postcompose>postrender。 

分别對應渲染前，渲染中，渲染結束事件。

地圖移動事件

moveend:地圖移動結束發生，沒什麼好說的。

複雜的change事件

change:layerGroup :地圖圖層增删時觸發。 

change:size :地圖視窗發生變化就會觸發，與我們常用的視窗resize接近。 

change:target :地圖綁定的div發生更改時觸發，如map.setTartget方法就會觸發該事件。 

change:view :地圖view對象發生變化觸發。 

propertychange: Map對象中任意的property值改變時觸發。 

change:部落客也懂。

<code class="hljs lasso has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">     <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">map</span><span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">.</span><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">on</span>(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'change:size'</span>,function(e){
        console<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">.</span><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">log</span>(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'size改變！'</span>);
    });

    <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">map</span><span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">.</span><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">on</span>(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'change:view'</span>,function(e){
        console<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">.</span><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">log</span>(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'view改變！'</span>);
    });

    <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">map</span><span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">.</span><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">on</span>(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'change:target'</span>,function(e){
        console<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">.</span><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">log</span>(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'target改變！'</span>);
    });
    <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">map</span><span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">.</span><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">on</span>(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'propertychange'</span>,function(e){
        console<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">.</span><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">log</span>(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'property改變！'</span>);
    });

    <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">map</span><span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">.</span>setTarget(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'map1'</span>);
    <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">var</span> view <span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">=</span><span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">new</span> ol<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">.</span>View({
        center: mapcenter,
        zoom: <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">5</span>
    });
    <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">map</span><span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">.</span>setView(view);</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li></ul>      

實驗是我new了一個正常的map地圖，監聽如上事件，然後setTarget,再setView。結果如下： 

解析：size是在地圖視窗發生變化時觸發，如網頁的最大化最小化就會觸發。在setTarget時，由于地圖視窗綁定了别的div，也觸發了size改變事件。

1 當target發生改變時，會觸發change:size,change:target,propeyterchange事件。 

2 當地圖div大小發生變化會更改時，觸發size，propeyterchange事件。 

3 當地圖view發生改變時，觸發view，propeyterchange事件。 

4 layergroup沒測試，同理推論當地圖圖層改變時，觸發change:layergroup,propeyterchange事件。 

綜述：Map對象任意對象發生改變，都會觸發propeyterchange事件。target事件觸發，也會觸發size事件。

事件拓展

Map中提供了一些列事件，Map是由View組成的，View事件如下：
           

一般地圖api中，我們會發現moving，moveend，zoom，zoomend事件，但是檢視api我麼隻發現了moveend事件，難道ol3的事件當真是看了點皮毛就到處噴的自以為專家的初學者所描述的那樣不成熟或不能用嗎？ 

下面我們抛磚引玉，讨論如何結合Map和View事件實作3的這些事件。

<code class="hljs matlab has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">var view=<span class="hljs-transposed_variable" style="box-sizing: border-box;">map.</span>getView();
    var zoom=<span class="hljs-transposed_variable" style="box-sizing: border-box;">view.</span>getZoom();
    <span class="hljs-transposed_variable" style="box-sizing: border-box;">view.</span>on(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'change:resolution'</span>,<span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(e)</span>{</span>
        <span class="hljs-transposed_variable" style="box-sizing: border-box;">console.</span><span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">log</span>(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'zoom了'</span>);
    });
    <span class="hljs-transposed_variable" style="box-sizing: border-box;">view.</span>on(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'change:center'</span>,<span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(e)</span>{</span>
        <span class="hljs-transposed_variable" style="box-sizing: border-box;">console.</span><span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">log</span>(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'moveing了'</span>);
    });
    <span class="hljs-transposed_variable" style="box-sizing: border-box;">map.</span>on(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'moveend'</span>,<span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(e)</span>{</span>
        <span class="hljs-transposed_variable" style="box-sizing: border-box;">console.</span><span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">log</span>(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'moveend了'</span>);
        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span>(<span class="hljs-transposed_variable" style="box-sizing: border-box;">view.</span>getZoom()!==zoom)
            <span class="hljs-transposed_variable" style="box-sizing: border-box;">console.</span><span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">log</span>(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'zomeend了,change:zoom了'</span>);
    });</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li></ul>      

先移動了地圖，再縮放了地圖。 

效果如下圖： 

總結：移動時，一直觸發moving事件。移動結束觸發moveend事件。 

縮放時，觸發了zoom事件，縮放觸發moveend事件（地圖範圍改變了），根據moveend判斷zoom改變，自定義實作zoom改變或者結束事件。 

大家再也不用擔心ol3事件了！