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
            })
        },

完整代码

<template>
<div class="sindagis-map-compass">
    <span class="left" @click="leftClick"></span>
    <span class="center" @click="recoveryClick" :style="{transform: `rotate(${rotate}deg)`}"></span>
    <span class="right" @click="rightClick"></span>
</div>
</template>

<script>
import { easeOut } from 'ol/easing'
export default {
    name: "MapCompass",
    inject: ['getMap'],
    created() {
    },
    data(){
        return {
            rotate: 0,
            currentDir: ''
        }
    },
    beforeDestroy() {},
    methods: {
        leftClick(){
            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                               //旋转速度
            }) 
            this.currentDir = 'left'
        },
        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
            })
        },
        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
            })
            this.currentDir = 'right'
        },
    }
}
</script>

<style lang="scss">
.sindagis-map-compass{
    position: absolute;
    z-index: 5;
    bottom: 60px;
    right: 0px;
    width: 52px;
    height: 54px;
    background: url('../../assets/img/earth-navi-control-pc4.png') 0% 0% / 266px no-repeat;
    .left, .center, .right{
        position: absolute;
        outline: none;
        border: none;
        cursor: pointer;
        opacity: 1;
    }
    .left{
        background: url('../../assets/img/earth-navi-control-pc4.png') -75px -5px / 266px no-repeat;
        left: 2px;
        top: 5px;
        z-index: 1;
        width: 15px;
        height: 42px;
        &:hover{
           background: url('../../assets/img/earth-navi-control-pc4.png') -89px -5px / 266px no-repeat; 
        }
    }
    .center{
        background: url('../../assets/img/earth-navi-control-pc4.png') -56px -4px / 266px no-repeat;
        left: 19px;
        top: 4px;
        width: 14px;
        height: 44px;
        transform: rotate(0deg);
        transition: 1s;
    }
    .right{
        background: url('../../assets/img/earth-navi-control-pc4.png') -75px -5px / 266px no-repeat;
        right: 2px;
        top: 5px;
        z-index: 1;
        width: 15px;
        height: 42px;
        transform: scaleX(-1);
        &:hover{
           background: url('../../assets/img/earth-navi-control-pc4.png') -89px -5px / 266px no-repeat;
        }
    }
}
</style>

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