// 本文是介绍右键取消绘制的一种解决方式，以下代码是从其他项目代码中抽取关键部分仅供大致参考，并不是完整的实例代码，请读者注意。
//初始化map以及添加一个底图图层
initMap(){
let self=this;
...
self.map=addmap(self.center,self.resolutions,self.resolution,self.targetmap);
self.addInteraction();
...
self.contextmenu(self.map);
...
}
//绘制函数
addInteraction(){
let self=this;
self.draw=new ol.interaction.Draw({
source: self.source,
type: type,
style: new ol.style.Style({ //图层样式
fill: new ol.style.Fill({
color: 'rgba(255, 255, 255, 0.2)' //填充颜色
}),
stroke: new ol.style.Stroke({
color: '#ffcc33', //边框颜色
width: 2 // 边框宽度
}),
image: new ol.style.Circle({
radius: 7,
fill: new ol.style.Fill({
color: '#ffcc33'
})
})
}),
snapTolerance:5,
});
var snap = new ol.interaction.Snap({
source: self.source,
edge:true,
vertex:true,
pixelTolerance:5
});
self.map.addInteraction(self.draw);
//增加图形捕捉
self.map.addInteraction(snap);
//激活绘制
self.draw.setActive(true);
//监听左键drawend事件的
self.draw.on('drawend',function(event){
//自行编写活动代码
})
}
//右键函数
contextmenu(map){
let self=this;
$(map.getViewport()).on("contextmenu", function(event){
event.preventDefault();
console.log("鼠标右键value："+event.button);
//右键事件点击，取消绘制活动状态
self.draw.setActive(false);
});
},
mounted () {
let self = this;
document.oncontextmenu = function(){
return false;
}
......
}
网友评论