openlayers+vue 仿百度罗盘功能（指北针）

用到的图片

 核心代码：

var view = this.getMap().getView();
            var center = this.getMap().getView().getCenter();
            var rotation = this.getMap().getView().getRotation();
            rotation = rotation - Math.PI/2
            this.rotate -= 90
            view.animate({
                center: center,                                            //旋转中心点
                rotation: rotation,                        
                easing: easeOut                               //旋转速度
            }) 

rightClick(){
            var view = this.getMap().getView();
            var center = this.getMap().getView().getCenter();
            var rotation = this.getMap().getView().getRotation();
            rotation = rotation + Math.PI/2
            this.rotate += 90
            view.animate({
                center: center,
                rotation: rotation,
                easing: easeOut
            })
        },

复位代码需要注意：

1、需要保证罗盘复位方向和地图方向保持一致

2、地图复位如果没到180度时，哪边复位最近从哪边复位；如果刚好180就一直逆时针复位

所以有了下面的计算

recoveryClick(){
            var view = this.getMap().getView();
            var center = this.getMap().getView().getCenter();
            let a = this.rotate % 360 // -270
            if(a != 0){ // 复位
                let dis = 360 - Math.abs(a)
                let dis1 = Math.abs(a)
                dis = dis > dis1 ? dis1 : dis
                if(dis == 180) dis = -180
                this.rotate = (this.rotate + dis) % 360 == 0 ? this.rotate + dis : this.rotate - dis
            }
            view.animate({
                center: center,
                rotation: 0,
                easing: easeOut
            })
        },

完整代码

参考文章：openlayers自定义控件 ---仿百度地图指南针 - 等等风吧 - 博客园