openlayers自定義控件 ---仿百度地圖指南針

看圖說話。

 

順時針按鈕點擊之后。地圖會以當前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()]);