添加右键菜单,首先我们要监听鼠标右键点击的操作,我们知道鼠标右键事件名是 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 结构如下图: