看圖說話。

?

順時針按鈕點擊之后。地圖會以當前center為圓心順時針轉動90度。

?

逆時針按鈕點擊之后。地圖會以當前center為中心點逆時針轉動90度

//自定義控件
ol.control.Compass = function(opt_options){var options = opt_options || {}; //參數this.reverseText = options.reverseText ? options.reverseText : '逆時針轉動'; //title的提示信息this.recoveryText = options.recoveryText ? options.recoveryText : '恢復正北方向';this.forwordText = options.forwordText ? options.forwordText : '順時針轉動';var hiddenClassName = 'ol-unselectable'; 　　　　　　　　　　　　　　//控件默認樣式
var compassClass = 'ol-compass'; //自定義控件樣式this.element = document.createElement('div'); //控件容器this.element.className = compassClass + ' ' + hiddenClassName; //設置控件樣式this.reverse = document.createElement('button'); 　　　　//逆時針this.reverse.setAttribute('title', this.reverseText) 　　　　//設置提示逆時針的提示文字this.reverse.className = 'reverse';this.element.appendChild(this.reverse);this.recovery = document.createElement('button'); //恢復正北方向this.recovery.setAttribute('title', this.recoveryText)this.recovery.className = 'recovery';this.element.appendChild(this.recovery);this.forword = document.createElement('button'); //順時針this.forword.setAttribute('title', this.forwordText);this.forword.className = 'forword';this.element.appendChild(this.forword);var this_ = this; // 存儲當前指向的控件對象this.reverse.onclick = function(event){event = event || window.event; //獲取event對象this_.reverseClick();; //執行動作event.preventDefault(); //阻止事件冒泡 };this.recovery.onclick = function(event){event = event || window.event;this_.recoveryClick();event.preventDefault();};this.forword.onclick = function(event){event = event || window.event;this_.forwordClick();event.preventDefault();};ol.control.Control.call(this,{element: this.element,target: options.target});};

?

　　ol.inherits(ol.control.Compass, ol.control.Control); //指定控件繼承關系 ol.control.Compass.prototype.reverseClick = function(){var view = this.getMap().getView();var center = this.getMap().getView().getCenter();var rotation = this.getMap().getView().getRotation();view.animate({center: center, //旋轉中心點rotation: rotation - Math.PI/2, easing: ol.easing.easeOut //旋轉速度}) //逆時針旋轉的角度為負 (-Math.PI/2 : -90°) };ol.control.Compass.prototype.recoveryClick = function(){var view = this.getMap().getView();var center = this.getMap().getView().getCenter();view.animate({center: center,rotation: 0,easing: ol.easing.easeOut})};ol.control.Compass.prototype.forwordClick = function(){var view = this.getMap().getView();var center = this.getMap().getView().getCenter();var rotation = this.getMap().getView().getRotation();view.animate({center: center,rotation: rotation + Math.PI/2, easing: ol.easing.easeOut})}; //順時針旋轉的角度為正

初始化Map時，只需添加控件即可。

　　

controls: ol.control.defaults().extend([new ol.control.Compass()]);

?

轉載于:https://www.cnblogs.com/yy-608/p/10129941.html

總結

以上是生活随笔為你收集整理的openlayers自定义控件 ---仿百度地图指南针的全部內容，希望文章能夠幫你解決所遇到的問題。

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