Openlayers + Vue 实现自定义鼠标右键为改变视图角度事件

效果：

持续按下鼠标右键再拖动鼠标可以实现变换视图的角度

（openlayers的样式被我改了一下，看上去有点像ArcGIS API for JS 4.x的样式）

关键点
Vue里面如何阻止浏览器的默认右键事件
如何阻止openlayers自带的鼠标点击拖动地图事件
1.Vue里面如何阻止浏览器的默认右键事件
这里有一个坑，下面的代码是无效的，不能阻止浏览器的默认右键事件

html:

<div id="map"
class="w-100"
@mousedown.prevent.right.prevent="changeRotation('down',$event)"
@mousemove="changeRotation('move',$event)"
@mouseup.prevent.right.prevent="changeRotation('up',$event)"></div>
JavaScript:

//methods中
...
changeRotation:function(type,event){
event.preventDefault();
event.stopPropagation();
......
},
...
.prevent修饰符对mousedown和mouseup是无效的

正确的办法是：

只需要在html上增加： @contextmenu.prevent=""

<div id="map"
class="w-100"
@contextmenu.prevent=""
@mousedown.right="changeRotation('down',$event)"
@mousemove="changeRotation('move',$event)"
@mouseup.right="changeRotation('up',$event)"></div>
不需要在methods添加代码

2.如何阻止openlayers自带的鼠标点击拖动地图事件
这里要在用户按住右键和按住右键移动鼠标时禁止拖动地图事件，松开后恢复点击拖动地图事件（openlayers自带的点击事件是不区分鼠标左右键的）

这个changeRotation的具体代码：

// 改变视图方向
changeRotation:function(type,event){
// 点击默认的移动地图事件
let pan=null;
this.map.getInteractions().forEach(function(element, index, array) {
if(element instanceof ol.interaction.DragPan) {
pan = element;
}
});
// 右键按下
if (type==="down") {
this.activeMouseRight=true;
// 禁用地图拖动事件
pan.setActive(false);
}
else if (type==="move") {
// 首先判断右键是否被按下
if (this.activeMouseRight) {
/*
* 计算角度
*/
let mapCenter={
x:$("#map").width()/2+$("#map").offset().left,
y:$("#map").height()/2+$("#map").offset().top,
},
clickPoint={
x:event.screenX,
y:event.screenY,
};
let radian=Math.atan((clickPoint.y-mapCenter.y)/(clickPoint.x-mapCenter.x));
if (radian<Math.PI*0.5&&radian>Math.PI*-0.5) {
// 设置角度
this.map.getView().setRotation(radian);
}
}
}
// 右键松开
else if (type==="up") {
this.activeMouseRight=false;
// 启用地图拖动事件
pan.setActive(true);
}
},
这里将openlayers中的ol.Map类绑定成了Vue对象的一个属性

html:

原文链接：https://blog.csdn.net/DSH964/article/details/86010177

Openlayers + Vue 实现自定义鼠标右键为改变视图角度事件相关推荐

稳扎稳打Silverlight(29) - 2.0Tip/Trick之Cookie, 自定义字体, 为程序传递参数, 自定义鼠标右键...
[索引页] [源码下载] 稳扎稳打Silverlight(29) - 2.0Tip/Trick之Cookie, 自定义字体, 为程序传递参数, 自定义鼠标右键, 程序常用配置参数作者:webabcd ...
Flex自定义鼠标右键
这里写了一个简单的自定义鼠标右键,代码不难,请看注释其它的请大家参看官方文档 ContextMenu类 ContextMenuItem类源码: <?xml version=&q ...
如何在canvas画布上自定义鼠标右键菜单内容？
用户大大提了一个需求,想要在画布上能够右键快捷点击使用某个功能,小菜鸟肯定要满足啊(委屈脸),然后靠着强大的各路神仙,写下了如下代码,终于实现了,为自己放个烟花~~~不喜勿喷哦~ 1.自定义鼠标右键菜 ...
自定义鼠标右键弹出式菜单
<html> <head> <meta http-equiv="Content-Type" content="tex ...
JQuery模拟网页中自定义鼠标右键菜单
题外话.......最近在开发一个网站项目的时候,需要用到网页自定义右键菜单,在网上看了各路前辈大神的操作,头晕目眩,为了达到目的,突然灵机一动,于是便有了这篇文章. 先放个效果图(沾沾自喜,大神勿喷 ...
html自定义鼠标右键,js自定义鼠标右键的实现原理及源码
今天来记录下js来自定义鼠标右键,同样先来分解下它的实现原理: 1.屏蔽右键默认事件:(一度我以为修改的就是默认事件) 2.对一个ul的隐藏:(这个我也曾迂腐的认为值得这样操作的都是div,汗) 3. ...
win10自定义鼠标右键多级菜单(包含桌面)
--------------如果觉得博主写的可以,请关注博主-------------- 首先 win + r 输入 regedit 进去注册表然后 # HKEY_CLASSES_ROOT\*\ ...
vue项目禁用鼠标右键
<template><div class="m-video-player-wrap" @contextmenu="handleMouse"&g ...
前端自定义网页鼠标右键菜单
//监听全局上下文菜单 document.addEventListener('contextmenu', function(e){//阻止默认e.preventDefault()//自定义鼠标右键菜单 ...

Openlayers + Vue 实现自定义鼠标右键为改变视图角度事件

Openlayers + Vue 实现自定义鼠标右键为改变视图角度事件相关推荐

最新文章

热门文章