首先看實現效果:

實現要點:
1)樹形標注實現
2)復雜標注樣式定義
3)效率優化
1.樹形標注實現
樹形標注采用字體符號來實現,包括以下幾個步驟
1)載入字體

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

3)設置TextStyle

2.復雜標注樣式定義
1)使用格網來定義每個標注部分所占單元格跨度

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

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

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

