openlayer3之高級標注實現


首先看實現效果:

實現要點:

1)樹形標注實現

2)復雜標注樣式定義

3)效率優化

 

1.樹形標注實現

樹形標注采用字體符號來實現,包括以下幾個步驟

1)載入字體

2)設置標注值與字體對照關系

3)設置TextStyle

2.復雜標注樣式定義

1)使用格網來定義每個標注部分所占單元格跨度

2)將每個部分的標注內容帶入,測量標注內容所占大小,動態調整格網大小

3)根據標注中心點、旋轉角度等信息,計算每部分標注位置,最后達到效果

3.效率優化

剛開始的實現思路是所有標注內容都使用Canvas繪制,但是這樣效率太低,尤其是在地圖瀏覽期間,如果發生卡頓,體驗特別糟糕。后來我們發現文字部分仍然可以使用TextStyle由Openlayers來繪制,只需要用Canvas繪制分數線即可,繪制之后的分數線構造成Style加到Style組中返給Openlayers,實現代碼片斷如下:


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM