1. 程式人生 > >地圖標註隨地圖旋轉而旋轉

地圖標註隨地圖旋轉而旋轉

停車場地圖新增停車位編號隨地圖旋轉而旋轉功能

現在移動網際網路上的互動性很強,要求地圖也要360度旋轉。但是地圖在360度旋轉的時候就會出現一個問題,那就是地圖選擇180度的時候,地圖上面的文字也旋轉180度,這個時候字就是倒過來的,雖然從邏輯上來講是正確的,但是從人的角度講,我把地圖旋轉180度難道就要讓我歪著頭去看上面的文字嗎?這是肯定不行的嘛。

對於這個問題我們有兩個解決方案:
* 標註文字不旋轉
就是任憑你如何旋轉地圖,我地圖上面的標註始終保持不動狀態。這個解決方案很簡單。但是使用這種方式需要滿足一個前提,就是:地圖的標註對對地圖區域沒有要求。例如在大區域的要素上面新增的標註就可以使用這種方式處理。對小區域要素會出現什麼問題呢?我們以停車場地圖中的停車位及停車位標註為例來說明。停車場地圖中的車位是一個矩形要素,面積很小。他的車位編號標註要求文字不能超出矩形區域且儘可能大的顯示,也就是要求文字要沿著矩形框的長度方向進行書寫。如果地圖旋轉標註不轉肯定會出現問題。
* 標註文字對地圖旋轉而旋轉
這個標註文字隨地圖選擇而旋轉不是機械的沿著他選擇。我們對文字旋轉角度做一個數學分析,會發現文字旋轉方向在[90,270]這個範圍之內文字是倒置的,因此只需要在文字選擇角度在這個區域範圍之內時對他做一個簡單的數學處理就可以滿足要求了。處理邏輯也很簡單,就是旋轉角度在[90,270]這個區間範圍之內讓他多選擇180度就可以。

//獲取旋轉角度
var rotation = (feature.get('rotation')*1+newRotation*1)%6.2831852;
if(rotation >= 1.5707963 &&  rotation <= 4.7123889){
  rotation = (rotation + 3.1415926)%6.2831852;
}

地圖正北方向
地圖正北方向

機械旋轉地圖效果
機械旋轉

新增數學處理之後的旋轉效果
新增數學處理之後的旋轉