openlayers3在Vue中鼠标右键取消绘制方法

// 本文是介绍右键取消绘制的一种解决方式，以下代码是从其他项目代码中抽取关键部分仅供大致参考，并不是完整的实例代码，请读者注意。

//初始化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;

        }

......

}