位置: 编程技术 - 正文

使用OpenLayers3 添加地图鼠标右键菜单(openlayers3示例)

编辑:rootadmin

推荐整理分享使用OpenLayers3 添加地图鼠标右键菜单(openlayers3示例),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:openlayers怎么样,openlayers3教程,openlayers中文教程,openlayers添加图标,openlayers视频教程,openlayers3示例,openlayers3示例,openlayers3教程,内容如对您有帮助,希望把文章链接给更多的朋友!

添加右键菜单,首先我们要监听鼠标右键点击的操作,我们知道鼠标右键事件名是 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 的事件对象包含发生点击的屏幕坐标,但是如何根据屏幕坐标获得地图中的相应坐标系下的坐标将会比较困难。

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

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

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

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

鼠标右键菜单具体实现

为了方便,文章中的代码使用了 JQuery。

文章中的实例完整代码可以到我的 GitHub 中查看或者下载,有用的话别忘了点一下 star。

使用OpenLayers3 添加地图鼠标右键菜单(openlayers3示例)

下面我们一步一步地添加右键菜单功能,我们分为三步:

对 html 元素添加 contextmenu 事件;

获取地图相应的点击坐标;

地图相应位置添加菜单 。

对 html 元素添加 contextmenu 事件

html 元素的鼠标右键事件名为 contextmenu,这个事件所有主流浏览器都支持,这里不要混淆 html 新增的属性 contextmenu,这个属性目前只有 firefox 支持,我们只是使用 oncontextmenu 这个事件。对包含地图的任何 html 元素绑定这个事件都可以,openlayers 会处理坐标转换这些问题。如下,map.getViewport() 会返回 openlayers 初始化页面时创建的 class 为 ol-viewport 的 div 元素,也就是直接包含地图的元素。因为浏览器都有默认的右键菜单,所以我们要取消默认的菜单,只要调用 e.preventDefault(); 即可:

获取地图相应的点击坐标

获取地图相应的点击坐标只需要一句即可,如下,

函数参数是 oncontextmenu 对应的事件对象,该函数包含对 map.getCoordinateFromPixel() 的调用,map.getCoordinateFromPixel() 参数为 ol.pixel,是一个坐标,数组格式[x, y],其实现中又调用了 ol.vec.Mat4.multVec2(),该函数完成处理坐标转换的实际工作。

地图相应位置添加菜单

这里我们结合 overlay 添加菜单,之前的文章介绍过 overlay,这里就不再具体展开了。首先,我们在 html 页面添加一个目录,具体的 css 样式可以自己设定,想看完整源码的可以到我的 GitHub 中查看或者下载完整的代码:

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

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

菜单隐藏

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

总结

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

基于JavaScript实现根据手机定位获取当前具体位置(X省X市X县X街道X号) 废话不多说了,直接给大家贴js代码了。具体代码如下所示:functionLocation(){};Location.prototype.getLocation=function(callback){varoptions={enableHighAccuracy:true,maximumAge:

js获取及修改网页背景色和字体色的方法 本文实例讲述了js获取及修改网页背景色和字体色的方法。分享给大家供大家参考,具体如下:获得网页的背景色和字体颜色,方法如下:思想:通过取

javascript设置页面背景色及背景图片的方法 本文实例讲述了javascript设置页面背景色及背景图片的方法。分享给大家供大家参考,具体如下:!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.0Transitional//EN"HTMLHEADTITLENewDoc

标签: openlayers3示例

本文链接地址:https://www.jiuchutong.com/biancheng/385590.html 转载请保留说明!

上一篇:javascript实现下拉提示选择框(javascript:download())

下一篇:基于JavaScript实现根据手机定位获取当前具体位置(X省X市X县X街道X号)(js基于什么)

  • 小规模纳税人减按1%政策文件
  • 企业所得税属于地方税吗
  • 啥是完税凭证
  • 分公司可以独立签约吗
  • 公司闲置资金理财做了三年定期存款
  • 售后维修的配件有哪些
  • 转登记纳税人留抵退税政策
  • 取暖费扣个人所得税吗
  • 资产负债表中其他流动资产包括哪些科目
  • 甲公司存货采用实际成本法核算
  • 盘盈的固定资产计入什么科目
  • 柴油暂估入账
  • 不开发票的收入怎么处理?
  • 个人在电商平台购买跨境商品需要缴纳什么税
  • 公司在外地
  • 混业经营试点
  • 3%小规模纳税人开出的发票 农产品成本如何计算
  • 冲回累计折旧
  • 建筑行业没有库存要做暂估成本怎么做?
  • 我的初级备考经验怎么写
  • 监理费该谁出
  • 贴息债券计算公式
  • win11怎么清理电脑垃圾
  • 固定资产转让税金怎么算
  • 水资源税收费标准
  • 贝特希金斯
  • 企业之间是什么意思
  • 黑暗的树荫
  • 工商年报经营现金净流量计算公式
  • php模板引擎有哪些
  • docker-p
  • mvc与mvvm
  • nodejs如何使用
  • conda操作
  • ping命令可以用来测试什么
  • 赠品发票金额为零怎么办
  • 专利权研发成功的会计分录
  • 其他应收款坏账处理
  • mysql表设计原则
  • 残保金滞纳金可以税前扣除吗
  • 汽油费入什么会计分录
  • sqlserver2008数据库可疑
  • 三票合一的发票什么意思
  • 个人报销电话费开发票是个人名还是公司名
  • 原材料当废品卖可以吗
  • 红字发票如何做进项税转出
  • 买房定金转给销售有效吗
  • 合同分三次付款怎么写
  • 购买的商品属于什么会计科目
  • 收到的普通发票被对方作废
  • 香港公司账户收美元要交税吗
  • 公司发放员工工资不走账
  • 营业执照注册资金变更
  • winxp每次开机都要输入用户名
  • 分布式交互
  • 受限怎么解除
  • windows内核版本9600
  • centos怎么查看文件
  • centos named
  • win8怎么添加wifi
  • 添加或删除程序在哪win10
  • 在对linux系统中dir
  • win81激活
  • js中的原型是什么
  • 安卓开发框架mvvm
  • js设置iframe隐藏
  • JS 中document.write()的用法和清空的原因浅析
  • shell脚本输入
  • dos 判断
  • django自定义模板标签
  • javascript简明教程
  • javascript编程语言
  • js新开一个窗口
  • python remote
  • javascript面向对象 第三方类库
  • python魔法方法详解
  • 百望电子发票查询下载
  • 上海社保基数对照表
  • 零申报的企业残保金怎么申报
  • 禅城有什么小孩好玩的地方
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设