TalkingData 開源地理信息可視化框架 inMap

本文做者：TalkingData 可視化工程師 李鳳祿

inMap 是 TalkingData 可視化團隊開源的一款基於 canvas 的大數據可視化庫，專一於大數據方向點、線、面的可視化效果展現。目前支持散點、圍欄、熱力、網格、聚合等方式；致力於讓大數據可視化變得簡單易用。

GitHub地址：https://github.com/TalkingData/inmap (求Star！)

文檔地址：http://inmap.talkingdata.com

特性：

• 多線程 高性能
• 多圖層疊加
• 智能的算法
• 友好的 API
• 能夠自定義主題

效果截圖以下：

inMap 是更加智能的地理可視化框架，主要面向從事數據可視化應用相關的工程師和設計師。

• 底層繪圖引擎：目前基於 canvas 2d 提供基礎繪圖能力，基於 WebGL 的版本正在規劃中；
• 算法：內置了經緯度墨卡託轉換、文字避讓算法、最佳標記點算法、自動分組標記配色算法等。

inMap 寫的每一個算法都是爲了加強用戶體驗，追求極致效果，咱們但願用 inMap 可以作出偉大的產品。

inMap 接口設計也很友好，但願讓開發者經過簡單的配置，就能快速構建出優美可視化效果。

文字避讓算法介紹：

咱們在項目中常常會遇到在地圖上打點並標上文字的需求，咱們用某流行的可視化庫展現出效果以下：

（文字密密麻麻一團，都疊在一塊，效果不好，估計會被要被產品經理咬住不放）

inMap 實現了基於文字排版算法，是否是很贊，效果圖以下：

是否是很酷啊，inMap 實現了本身的四分位文字排版算法，聽起來不明覺厲的樣子，彆着急，讓我慢慢道來。

每個標記點都有上下左右四個放文字的位子，若是左邊放不下，那就放右邊試試，還不行就放到下面試試，以此類推，原理就這麼簡單，哈哈。

實現細節以下：

• 求出要顯示文字的矩形（文字寬高）
• 建立帶有座標的虛擬文字集合對象、對集合的座標進行從小到大排序
• 遞歸遍歷虛擬文字集合、判斷是否與其餘相交，若是有相交就移動當前文字位子，直到不相交爲止。當找不到合適位置時，就選擇隱藏當前文字。

後續會輸出創造更好的可視化圖形和算法，並後續推出 WebGL 版本。