用到的圖片

?核心代碼：

var view = this.getMap().getView();var center = this.getMap().getView().getCenter();var rotation = this.getMap().getView().getRotation();rotation = rotation - Math.PI/2this.rotate -= 90view.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/2this.rotate += 90view.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 // -270if(a != 0){ // 復位let dis = 360 - Math.abs(a)let dis1 = Math.abs(a)dis = dis > dis1 ? dis1 : disif(dis == 180) dis = -180this.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/2this.rotate -= 90view.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 // -270if(a != 0){ // 復位let dis = 360 - Math.abs(a)let dis1 = Math.abs(a)dis = dis > dis1 ? dis1 : disif(dis == 180) dis = -180this.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/2this.rotate += 90view.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自定義控件 ---仿百度地圖指南針 - 等等風吧 - 博客園

總結

以上是生活随笔為你收集整理的openlayers+vue 仿百度罗盘功能（指北针）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。