[OpenLayers] 實作右鍵選單

Implementing the context menu on the map

前言

最近有機會研究 OpenLayers，想說邊實作，邊寫文章記錄。有些需求，感覺會蠻常用到的，查找文件的時候，有看到一些套件，可以簡單的達成目的。不過希望自己能盡量不依賴套件，但要做到這點，需要花時間，理解 JavaScript 的用法及文件等。希望這篇新手文，能幫助各位減少開發成本 (〃∀〃)。

今天要實作的主題是地圖上的右鍵選單，如下圖。

the context menu on the map

一些工具

IDE ： Visual Studio Code

CDN：

• openlayers v6.5.0
• jquery v3.5.1
• popper.js v1.16.1
• bootstrap v4.5.2

動手實作

文章主要重點會放在需求的實作上，所以像 OpenLayers的地圖初始化步驟，請直接參考官方文件: Put a map on a page。

完成右鍵選單開關

直接看 Code 裡的註解，可能會比較容易理解如何完成右鍵選單開關。

若有謬誤，煩請告知，新手發帖請多包涵，感謝各位(・∀・)つ

參考

• OpenLayers
• OpenLayers Custom Context Menu
• How to hide Openlayers 4 Overlay while hover over controls