添加右鍵菜單，首先我們要監聽滑鼠右鍵點選的操作，我們知道滑鼠右鍵事件名是 contextmenu，當滑鼠在 html 元素之上，點選滑鼠右鍵，便會觸發 contextmenu 事件，在 contextmenu 事件的回調函數中實作相應的顯示菜單功能即可。
那麼在 openlayers 中，在地圖中添加這個事件，我們從哪裡下手呢？首先我們得了解 openlayers 的初始化頁面的過程。
openlayers 初始化頁面過程
openlayers 也是一個前端庫，那麼它肯定離不開 html 的運用，比如，我們首先需要在頁面放置一個顯示地圖的 html 元素，一個 div 元素(假設其 id 屬性設定為 “map”，後面簡稱為 map div)，然後在地圖初始化的時候指定這個元素，openlayers 會首先在這個元素中建立一個 class 為 ol-viewport 的 div 元素，其尺寸保持與 map div 相同，然後在 ol-viewport div 中建立一個 canvas 元素，在這個 canvas 元素中渲染請求到的地圖；其次，還會添加一個 class 為 ol-overlaycontainer 的 div 元素，用來放置 overlay；最後，添加一個 class 為 ol-overlaycontainer-stopevent 的 div 元素，主要是放置 openlayers 的控件，上一篇添加 自定義擴充控件 的文章開篇有講過，這裡不是重點，我們不詳細介紹了。
最後形成的 html dom 結構如下圖：
圖1 形成的DOM結構
我們會想到在這個 map div 元素添加事件，然後右鍵彈出菜單，這個想法很自然，也确實可以實作，然而我們要想到後面的事情，至少對事情有一個全局的認識再下手，我們顯示出菜單後，往往是要根據相應的地圖所在位置進行一定的操作，那麼我們的 contextmenu 的事件對象包含發生點選的螢幕坐标，但是如何根據螢幕坐标獲得地圖中的相應坐标系下的坐标将會比較困難。喎�"/kf/ware/vc/" target="_blank" class="keylink">vcD4KCjxwPsCnxNHU2sTEwO/E2KO/1vfSqtPQ0tTPwrXEyP2146O6PC9wPgoKCsrXz8ijrMrCvP621M/zy/m6rLXE1/ix6srHz+C21NPa1fu49uSvwMDG97XEytO/2qGi0rPD5rvy1d/V+7j2xsHEu7XEo7sKxuS0zqOstvjP1Mq+tdjNvLXE1KrL2M35zfnT1srHy+bS4rXEtPPQobrNzrvWw6O7CtfuuvOjrMbBxLu1xNf4serPtbrNtdjNvLXE1/ix6s+109bN+c35zerIq7K7zayjrMjnus69q8/gttTT67XYzbzUqsvYtcTX+LHq1NnXqruvzqq12M281/ix6s+1z8K1xNf4seqjvwoKCjxwPiAgICAgIMrXz8ijrM7Sw8fQ6NKqu/G1w8rCvP7X+LHqz+C21NPaIG1hcCBkaXYgo6iw/LqstdjNvLXE1KrL2KOptcTX+LHqo6zIu7rzvavP4LbU09ogbWFwIGRpdiC1xNf4serXqruvzqq12M281tC1xMq1vMrX+LHqoaO12tK7sr3W0KOsztLDx7/J0tTNqLn9vMbL47vxtcOjrLWryse12rb+sr2x2NDrzai5/SBvcGVubGF5ZXJzIMC0zeqzyaOs0vLOqta709Agb3BlbmxheWVycyC21LXYzby1xNf4serPtdfux+Wz/qOs1eLU2iBvcGVubGF5ZXJzICDW0NKy09DP4LnYtcS5psTcoaPH7NDStcTKx6Osb3BlbmxheWVycyDW0M7Sw8e/ydLU0ruyvc3qs8nJz8r2stnX96Os1rvQ6NKq0ru49rqvyv2jujxjb2RlPm1hcC5nZXRFdmVudENvb3JkaW5hdGUoZXZlbnQpPC9jb2RlPqOs1NrPwsPmtcS+38zlyrXP1tbQo6zO0rvhz+rPuL2ytb3V4rj2uq/K/aGjPC9wPgoKPHA+z8LD5s7Sw8e/tL+0vt/M5cjnus7Ktc/WsMmhozwvcD4KCjxoMSBpZD0="滑鼠右鍵菜單具體實作">滑鼠右鍵菜單具體實作
為了友善，文章中的代碼使用了 JQuery。
文章中的執行個體完整代碼可以到我的 GitHub 中檢視或者下載下傳，有用的話别忘了點一下 star。
下面我們一步一步地添加右鍵菜單功能，我們分為三步：
對 html 元素添加 contextmenu 事件；
擷取地圖相應的點選坐标；
地圖相應位置添加菜單 。
對 html 元素添加 contextmenu 事件
html 元素的滑鼠右鍵事件名為 contextmenu，這個事件所有主流浏覽器都支援，這裡不要混淆 html 新增的屬性 contextmenu，這個屬性目前隻有 firefox 支援，我們隻是使用 oncontextmenu 這個事件。對包含地圖的任何 html 元素綁定這個事件都可以，openlayers 會處理坐标轉換這些問題。如下，map.getViewport() 會傳回 openlayers 初始化頁面時建立的 class 為 ol-viewport 的 div 元素，也就是直接包含地圖的元素。因為浏覽器都有預設的右鍵菜單，是以我們要取消預設的菜單，隻要調用 e.preventDefault(); 即可：
$(map.getViewport()).on("contextmenu", function(event){
e.preventDefault();
// 書寫事件觸發後的函數
});
擷取地圖相應的點選坐标
擷取地圖相應的點選坐标隻需要一句即可，如下，
var coordinate = map.getEventCoordinate(event);
函數參數是 oncontextmenu 對應的事件對象，該函數包含對 map.getCoordinateFromPixel() 的調用，map.getCoordinateFromPixel() 參數為 ol.pixel，是一個坐标，數組格式[x, y]，其實作中又調用了 ol.vec.Mat4.multVec2()，該函數完成處理坐标轉換的實際工作。
地圖相應位置添加菜單
這裡我們結合 overlay 添加菜單，之前的文章介紹過 overlay，這裡就不再具體展開了。首先，我們在 html 頁面添加一個目錄，具體的 css 樣式可以自己設定，想看完整源碼的可以到我的 GitHub 中檢視或者下載下傳完整的代碼：