看圖說話。

?

順時(shí)針按鈕點(diǎn)擊之后。地圖會(huì)以當(dāng)前center為圓心順時(shí)針轉(zhuǎn)動(dòng)90度。

?

逆時(shí)針按鈕點(diǎn)擊之后。地圖會(huì)以當(dāng)前center為中心點(diǎn)逆時(shí)針轉(zhuǎn)動(dòng)90度

//自定義控件
ol.control.Compass = function(opt_options){var options = opt_options || {}; //參數(shù)this.reverseText = options.reverseText ? options.reverseText : '逆時(shí)針轉(zhuǎn)動(dòng)'; //title的提示信息this.recoveryText = options.recoveryText ? options.recoveryText : '恢復(fù)正北方向';this.forwordText = options.forwordText ? options.forwordText : '順時(shí)針轉(zhuǎn)動(dòng)';var hiddenClassName = 'ol-unselectable'; 　　　　　　　　　　　　　　//控件默認(rèn)樣式
var compassClass = 'ol-compass'; //自定義控件樣式this.element = document.createElement('div'); //控件容器this.element.className = compassClass + ' ' + hiddenClassName; //設(shè)置控件樣式this.reverse = document.createElement('button'); 　　　　//逆時(shí)針this.reverse.setAttribute('title', this.reverseText) 　　　　//設(shè)置提示逆時(shí)針的提示文字this.reverse.className = 'reverse';this.element.appendChild(this.reverse);this.recovery = document.createElement('button'); //恢復(fù)正北方向this.recovery.setAttribute('title', this.recoveryText)this.recovery.className = 'recovery';this.element.appendChild(this.recovery);this.forword = document.createElement('button'); //順時(shí)針this.forword.setAttribute('title', this.forwordText);this.forword.className = 'forword';this.element.appendChild(this.forword);var this_ = this; // 存儲(chǔ)當(dāng)前指向的控件對象this.reverse.onclick = function(event){event = event || window.event; //獲取event對象this_.reverseClick();; //執(zhí)行動(dòng)作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); //指定控件繼承關(guān)系 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, //旋轉(zhuǎn)中心點(diǎn)rotation: rotation - Math.PI/2, easing: ol.easing.easeOut //旋轉(zhuǎn)速度}) //逆時(shí)針旋轉(zhuǎn)的角度為負(fù) (-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})}; //順時(shí)針旋轉(zhuǎn)的角度為正

初始化Map時(shí)，只需添加控件即可。

　　

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

?

轉(zhuǎn)載于:https://www.cnblogs.com/yy-608/p/10129941.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。