資訊專欄INFORMATION COLUMN
摘要：本文作者可視化工程師李鳳祿是可視化團(tuán)隊(duì)開源的一款基于的大數(shù)據(jù)可視化庫，專注于大數(shù)據(jù)方向點(diǎn)線面的可視化效果展示。目前支持散點(diǎn)圍欄熱力網(wǎng)格聚合等方式致力于讓大數(shù)據(jù)可視化變得簡單易用。后續(xù)會(huì)輸出創(chuàng)造更好的可視化圖形和算法，并后續(xù)推出版本。
本文作者：TalkingData 可視化工程師 李鳳祿
inMap 是 TalkingData 可視化團(tuán)隊(duì)開源的一款基于 canvas 的大數(shù)據(jù)可視化庫，專注于大數(shù)據(jù)方向點(diǎn)、線、面的可視化效果展示。目前支持散點(diǎn)、圍欄、熱力、網(wǎng)格、聚合等方式；致力于讓大數(shù)據(jù)可視化變得簡單易用。
GitHub地址：https://github.com/TalkingData/inmap (求Star！)
文檔地址：http://inmap.talkingdata.com
特性：多線程 高性能
多圖層疊加
智能的算法
友好的 API
可以自定義主題
效果截圖如下：inMap 是更加智能的地理可視化框架，主要面向從事數(shù)據(jù)可視化應(yīng)用相關(guān)的工程師和設(shè)計(jì)師。
底層繪圖引擎：目前基于 canvas 2d 提供基礎(chǔ)繪圖能力，基于 WebGL 的版本正在規(guī)劃中；
算法：內(nèi)置了經(jīng)緯度墨卡托轉(zhuǎn)換、文字避讓算法、最佳標(biāo)記點(diǎn)算法、自動(dòng)分組標(biāo)記配色算法等。
inMap 寫的每個(gè)算法都是為了增強(qiáng)用戶體驗(yàn)，追求極致效果，我們希望用 inMap 能夠做出偉大的產(chǎn)品。
inMap 接口設(shè)計(jì)也很友好，希望讓開發(fā)者通過簡單的配置，就能快速構(gòu)建出優(yōu)美可視化效果。
文字避讓算法介紹：我們?cè)陧?xiàng)目中經(jīng)常會(huì)遇到在地圖上打點(diǎn)并標(biāo)上文字的需求，我們用某流行的可視化庫展示出效果如下：
（文字密密麻麻一團(tuán)，都疊在一塊，效果很差，估計(jì)會(huì)被要被產(chǎn)品經(jīng)理咬住不放）
inMap 實(shí)現(xiàn)了基于文字排版算法，是不是很贊，效果圖如下：
是不是很酷啊，inMap 實(shí)現(xiàn)了自己的四分位文字排版算法，聽起來不明覺厲的樣子，別著急，讓我慢慢道來。
每一個(gè)標(biāo)記點(diǎn)都有上下左右四個(gè)放文字的位子，如果左邊放不下，那就放右邊試試，還不行就放到下面試試，以此類推，原理就這么簡單，哈哈。
實(shí)現(xiàn)細(xì)節(jié)如下：
求出要顯示文字的矩形（文字寬高）
創(chuàng)建帶有坐標(biāo)的虛擬文字集合對(duì)象、對(duì)集合的坐標(biāo)進(jìn)行從小到大排序
遞歸遍歷虛擬文字集合、判斷是否與其他相交，如果有相交就移動(dòng)當(dāng)前文字位子，直到不相交為止。當(dāng)找不到合適位置時(shí)，就選擇隱藏當(dāng)前文字。
后續(xù)會(huì)輸出創(chuàng)造更好的可視化圖形和算法，并后續(xù)推出 WebGL 版本。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/92238.html
摘要：在許多志愿者的幫助下，將文檔全部翻譯為英文，在開發(fā)者社區(qū)頗受歡迎。有了英文版后，更多的國外開發(fā)者也參與到討論之中，相信接下來會(huì)有更多來自國外的。英文版的翻譯離不開社區(qū)的貢獻(xiàn)，在此特別感謝和三位熱心志愿者。 showImg(https://segmentfault.com/img/bVRG13?w=2880&h=1800); 兩年前，我開始接觸 Vue.js 框架，當(dāng)時(shí)就被它的輕量、組件...
摘要：在許多志愿者的幫助下，將文檔全部翻譯為英文，在開發(fā)者社區(qū)頗受歡迎。有了英文版后，更多的國外開發(fā)者也參與到討論之中，相信接下來會(huì)有更多來自國外的。英文版的翻譯離不開社區(qū)的貢獻(xiàn)，在此特別感謝和三位熱心志愿者。 showImg(https://segmentfault.com/img/bVRG13?w=2880&h=1800); 兩年前，我開始接觸 Vue.js 框架，當(dāng)時(shí)就被它的輕量、組件...
摘要：避讓算法采用的是四分位模型算法，接下來手把手教你寫避讓算法，老司機(jī)帶你裝逼帶你飛。創(chuàng)建四分位模型所謂四分位模型，每一個(gè)標(biāo)記點(diǎn)都有上下左右四個(gè)放文字的位子，如果左邊放不下，那就放右邊試試，還不行就放到下面試試，以此類推，原理就這么簡單，哈哈。 本文作者：TalkingData 可視化工程師李鳳祿編輯：Aresn inMap 是一款基于 canvas 的大數(shù)據(jù)可視化庫，專注于大數(shù)據(jù)方向點(diǎn)線...
摘要：目前支持散點(diǎn)圍欄熱力網(wǎng)格聚合等方式致力于讓大數(shù)據(jù)可視化變得簡單易用。如圖表示，紅色區(qū)域表示分析要素的密度大，而藍(lán)色區(qū)域表示分析要素的密度小。實(shí)現(xiàn)熱力原理讀取每個(gè)像素的值透明度，做一個(gè)顏色映射。 本文作者：TalkingData 可視化工程師李鳳祿編輯：Aresn 歡迎加入 QQ 群參與技術(shù)討論：618308202 inMap 是一款基于 canvas 的大數(shù)據(jù)可視化庫，專注于大數(shù)據(jù)方...
閱讀 2100·2021-11-11 16:55
閱讀 3171·2021-10-11 10:58
閱讀 3038·2021-09-13 10:28
閱讀 3967·2021-07-26 23:57
閱讀 1005·2019-08-30 15:56
閱讀 1331·2019-08-29 13:15
閱讀 1258·2019-08-26 18:18
閱讀 1266·2019-08-26 13:44
