假日狂想-引線註記

註記在可視化表達中是一種非常重要的手段，其用於攜帶目標要素必要的說明信息。

註記其實是一種圖形化表達的補充手段，因為在我看來，圖形圖像適於表達的是中尺度信息---也就是比單元信息更概括，比總體信息更具象，也是大部分人類經驗保存的尺度，存儲原子類的信息需要大量的存儲空間，這不現實；只記憶總體信息，也沒什麼意義；比如說閱讀一本書，你不可能記憶每一個字，對常人來說難度很大，但是如果只記一個書名也是沒有意義的。那麼對於圖形圖像表達不適用區間內的這部分信息我認為是使用註記表達的最佳區間。

註記在地圖可視化表達中是相當複雜的一種存在，根據不同的要素類別就分為點標註、線標註以及面標註，這些標註還需要能夠自適應比例尺進行標註的抽稀，保持清爽的圖面，同時有需要能夠保存關鍵信息，這也是為什麼ArcGIS為此專門搞了個Maplex引擎，用來專門處理註記。對於二維的註記一般都是使用canvas來實現，目前來說這個是一種最佳實踐吧，在三維場景下的註記一般會採用內建廣告板和圖元貼圖的方式分別來實現可縮放和固定大小兩個版本的註記，總的來說是夠用了。但是在實際使用中，這兩個還是存在明顯的缺陷，這兩種方式只能接收one-time的canvas,image這些類別，在動態方面還是不夠靈活，還會存在模糊的問題；尤其在大屏方面我覺得這兩種實現方式都及其不優雅（當然也有做的很優雅的，之前看過一個招商展示的項目，整個項目應該是設計人員驅動的項目，畫面構圖十分舒服），對於普通的開發者來一般的二維可視化還是沒什麼大問題的，大不了就用用Echarts Bootstrap這些庫，還是又基本的審美底線的，但是對於三維這一塊開說想弄得好看並不是很容易：1、輪子少；2、過程複雜。這也是為什麼說三維開發領域只有菜鳥和大牛，能在這個方面堅持下來的並不多。趁著五一放假的間隙，我就在想是否能夠使用一種過渡性的技術來解決目前三維註記表達的問題，豐富註記的選擇，同時減少開發的難度，對二維開發者友好。使用DOM的Marker在MapboxGL中是一種不錯的方案 這種方案可以用於所有的其他類型的引擎，這個我也做過 也比較簡單，當然其中也有一些小trick，後面抽空我也會分享出來。這種DOM Marker即表達了位置也可以利用div+css這種組合形成豐富的展現，但它是需要不斷更新位置來進行動態跟隨的，我覺得這個行為可以改善一下，可不可以marker不動，使用一種引線來進行目標和說明信息的連接 從而達到明晰表達的目的。在view更新過程中只更新引線就可以了，對於那種版面更新較少的應用，將會是一種不錯的思路，基於這個思路結合我意淫的環境監測場景我做了一個小小的demo，各位看官可以評價一下這個方案如何，期待給位的寶貴意見（後期代碼會整理到github中）。

推薦閱讀：