使用OpenLayers3 添加地图鼠标右键菜单


Posted in Javascript onDecember 29, 2015

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

使用OpenLayers3 添加地图鼠标右键菜单

图1 形成的DOM结构

      我们会想到在这个 map div 元素添加事件,然后右键弹出菜单,这个想法很自然,也确实可以实现,然而我们要想到后面的事情,至少对事情有一个全局的认识再下手,我们显示出菜单后,往往是要根据相应的地图所在位置进行一定的操作,那么我们的 contextmenu 的事件对象包含发生点击的屏幕坐标,但是如何根据屏幕坐标获得地图中的相应坐标系下的坐标将会比较困难。

困难在哪里呢?主要有以下的三点:

首先,事件对象所含的坐标是相对于整个浏览器的视口、页面或者整个屏幕的;
其次,而显示地图的元素往往又是随意的大小和位置;
最后,屏幕的坐标系和地图的坐标系又往往完全不同,如何将相对与地图元素的坐标再转化为地图坐标系下的坐标?

      首先,我们需要获得事件坐标相对于 map div (包含地图的元素)的坐标,然后将相对于 map div 的坐标转化为地图中的实际坐标。第一步中,我们可以通过计算获得,但是第二步必须通过 openlayers 来完成,因为只有 openlayers 对地图的坐标系最清楚,这在 openlayers 中也有相关的功能。庆幸的是,openlayers 中我们可以一步完成上述操作,只需要一个函数:map.getEventCoordinate(event),在下面的具体实现中,我会详细讲到这个函数。

下面我们看看具体如何实现吧。

鼠标右键菜单具体实现

为了方便,文章中的代码使用了 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 中查看或者下载完整的代码:

<div id="contextmenu_container" class="contextmenu">
  <ul>
    <li><a href="#">设置中心</a></li>
    <li><a href="#">添加地标</a></li>
    <li><a href="#">距离丈量</a></li>
  </ul>
</div>

使用这个 html 元素初始化一个 overlay,并将 overlay 添加到地图中:

var menu_overlay = new ol.Overlay({
  element: document.getElementById("contextmenu_container"),
  positioning: 'center-center'
});
menu_overlay.setMap(map);

接下来,我们就可以在鼠标右键菜单的事件回调函数中,根据获取的地图坐标位置,设置 overlay 的显示位置:

menu_overlay.setPosition(coordinate);

菜单隐藏

      当我们鼠标点击右键,菜单出现,但是我们不能让菜单总是显示在地图中,这时我们可以添加鼠标左键单击,菜单消失功能,或者当选择某项功能时,菜单消失。这个比较容易实现,只要一句便可以实现,放在鼠标左键事件的回调函数或者菜单功能执行函数中就行,如下:

menu_overlay.setPosition(undefined);

总结

      这篇文章中,主要讲了 openlayers 初始化页面地图元素的过程,并介绍了在地图上实现“鼠标右键菜单功能”,和隐藏菜单的实现。我们并没有对菜单中的条目绑定事件,因为我们的重点在于实现右键菜单,对于菜单的条目要绑定什么功能,和普通的 javascript 事件绑定并无二致,所以没有展开。

Javascript 相关文章推荐
js中查找最近的共有祖先元素的实现代码
Dec 30 Javascript
JavaScript中的Math 使用介绍
Apr 21 Javascript
javascript面向对象之共享成员属性与方法及prototype关键字用法
Jan 13 Javascript
javascript新闻跑马灯实例代码
Jul 29 Javascript
关于Jquery中的bind(),on()绑定事件方式总结
Oct 26 Javascript
jQuery Easyui 下拉树组件combotree
Dec 16 Javascript
简单实现js选项卡切换效果
Feb 09 Javascript
React Native中Navigator的使用方法示例
Oct 13 Javascript
vue将时间戳转换成自定义时间格式的方法
Mar 02 Javascript
webstorm添加*.vue文件支持
May 08 Javascript
微信小程序收藏功能的实现代码
Jun 12 Javascript
JSON stringify方法原理及实例解析
Oct 23 Javascript
javascript实现下拉提示选择框
Dec 29 #Javascript
基于JavaScript如何实现ajax调用后台定义的方法
Dec 29 #Javascript
js+css简单实现网页换肤效果
Dec 29 #Javascript
Jquery使用小技巧汇总
Dec 29 #Javascript
js为什么不能正确处理小数运算?
Dec 29 #Javascript
javascript从作用域链谈闭包
Jul 29 #Javascript
你有必要知道的25个JavaScript面试题
Dec 29 #Javascript
You might like
PHP4实际应用经验篇(8)
2006/10/09 PHP
解析在zend Farmework下如何创立一个FORM表单
2013/06/28 PHP
(JS实现)MapBar中坐标的加密和解密的脚本
2007/05/16 Javascript
ECMAScript 5中的属性描述符详解
2015/03/02 Javascript
JS控制网页动态生成任意行列数表格的方法
2015/03/09 Javascript
jquery左右全屏大尺寸多图滑动效果代码分享
2015/08/28 Javascript
JavaScript里 ==与===区别详解
2016/08/16 Javascript
Vue监听数据对象变化源码
2017/03/09 Javascript
vue-cli脚手架搭建的项目去除eslint验证的方法
2018/09/29 Javascript
mockjs+vue页面直接展示数据的方法
2018/12/19 Javascript
vue实现父子组件之间的通信以及兄弟组件的通信功能示例
2019/01/29 Javascript
详解VUE项目中安装和使用vant组件
2019/04/28 Javascript
最简单的vue消息提示全局组件的方法
2019/06/16 Javascript
layui 弹出层回调获取弹出层数据的例子
2019/09/02 Javascript
使用layui实现树形结构的方法
2019/09/20 Javascript
Vue.js组件通信之自定义事件详解
2019/10/19 Javascript
[38:39]KG vs Mineski 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
Python实现二叉堆
2016/02/03 Python
python与caffe改变通道顺序的方法
2018/08/04 Python
详解python多线程之间的同步(一)
2019/04/03 Python
anaconda中更改python版本的方法步骤
2019/07/14 Python
浅谈tensorflow中dataset.shuffle和dataset.batch dataset.repeat注意点
2020/06/08 Python
Css3实现无缝滚动防抖
2020/09/14 HTML / CSS
印尼极简主义和实惠的在线家具店:Fabelio
2019/03/27 全球购物
澳大利亚最便宜的网上药房:Chemist Warehouse
2020/01/30 全球购物
Moda Operandi官网:美国奢侈品电商,海淘秀场T台同款
2020/05/26 全球购物
幼儿园大班新学期寄语
2014/01/18 职场文书
集体备课反思
2014/02/12 职场文书
项目建议书格式
2014/03/12 职场文书
商业融资计划书
2014/04/29 职场文书
电子商务专业毕业生自荐书
2014/06/22 职场文书
大一新生期末自我评价
2014/09/12 职场文书
2014年小学德育工作总结
2014/12/05 职场文书
关于开学的感想
2015/08/10 职场文书
担保书怎么写 ?
2019/04/22 职场文书
动画《朋友游戏》公开佐藤友生绘制的开播纪念绘
2022/04/06 日漫