您好,登錄后才能下訂單哦!
前言
inMap 是一款基于 canvas 的大數(shù)據(jù)可視化庫,專注于大數(shù)據(jù)方向點(diǎn)線面的可視化效果展示。目前支持散點(diǎn)、圍欄、熱力、網(wǎng)格、聚合等方式;致力于讓大數(shù)據(jù)可視化變得簡單易用。
GitHub 地址:https://github.com/TalkingData/inmap(本地下載)
文檔地址:http://inmap.talkingdata.com/
在地理信息可視化中,我們經(jīng)常會遇到在地圖上標(biāo)記文字的需求,下面展示的是某流行 chart 圖表框架的效果:
要顯示的文字空間不夠時(shí),就會造成文字重疊顯示混亂,用戶體驗(yàn)很不友好。
怎么解決這個(gè)問題呢?我們采用文字避讓算法,解決這種坑爹的問題。
下面展示的是 inMap 文字避讓效果:
文字標(biāo)注算法是 GIS 中最復(fù)雜的問題之一(屬于 NP 復(fù)雜度問題,所以通常不能找到最優(yōu)解,只能找到較優(yōu)解)。
inMap 避讓算法采用的是四分位模型算法,接下來手把手教你寫避讓算法,老司機(jī)帶你裝逼帶你飛。
準(zhǔn)備數(shù)據(jù)
inMap 接收的是經(jīng)緯度數(shù)據(jù),需要把它映射到 canvas 的像素坐標(biāo),這就用到了墨卡托轉(zhuǎn)換,墨卡托算法很復(fù)雜,以后我們會有單獨(dú)的一篇文章來講講他的原理。經(jīng)過轉(zhuǎn)換,你得到的數(shù)據(jù)應(yīng)該是這樣的:
[ { "name": "海門",//要顯示的文字 "lng": 121.15, "lat": 31.89, "count": 7, "pixel": { //像素坐標(biāo) "x": 968, "y": 736 } }, { "name": "鄂爾多斯", "lng": 109.781327, "lat": 39.608266, "count": 5, "pixel": { "x": 659, "y": 478 } }, ... ]
好了,我們得到轉(zhuǎn)換后的像素坐標(biāo)數(shù)據(jù)(x、y),就可以做下面的事情了。
求出每段文字矩形的實(shí)際大小
measureText() 是 canvas 內(nèi)置的方法,返回字體寬度的像素單位:
let ctx = this.container.getContext('2d'); // canvas 上下文 let width= ctx.measureText(name).width;
我們通過 measureText 得到每個(gè)文字的寬度,canvas 并沒有直接獲取文字的方法,那文字的高度如何的得到呢?
我們通過反復(fù)測試發(fā)現(xiàn) canvas 的 font 等于 “13px Arial” 字體(別的字體不敢保證)的時(shí)候,文字的高度大概是 fontSize 的 1.1 倍。
所以代碼如下:
let fontSize = parseInt(ctx.font); let height = fontSize * 1.1;
文字的寬度和高度得到后,我們就可以創(chuàng)建文字矩形的坐標(biāo)系了。
創(chuàng)建四分位模型
所謂四分位模型,每一個(gè)標(biāo)記點(diǎn)都有上下左右四個(gè)放文字的位子,如果左邊放不下,那就放右邊試試,還不行就放到下面試試,以此類推,原理就這么簡單,哈哈。
創(chuàng)建右側(cè)虛擬矩形坐標(biāo)描述:
右側(cè)虛擬矩形坐標(biāo)的描述把圓點(diǎn)也包含在內(nèi)了,是為了防止文字和圓點(diǎn)重疊。
在計(jì)算虛擬矩形的高度時(shí)有些坑,圓點(diǎn)大小不是固定的,是根據(jù)用戶動態(tài)配置的,圓點(diǎn)的直徑可能大于文字的高度,我們就設(shè)定虛擬矩形的高度永遠(yuǎn)都是最大的那個(gè),需要做一些特殊處理。
代碼如下:
_getLeftAnchor() { let x = this.center.x - this.radius - this.textReact.width, y = this.center.y - this.textReact.height / 2, diam = this.radius * 2, maxH = diam > this.textReact.height ? diam : this.textReact.height; //矩形的高度 return { x, y, minX: x, maxX: this.center.x + this.radius, minY: this.center.y - maxH / 2, maxY: this.center.y + maxH / 2 }; }
以此類推,描述下面、左面、上面的虛擬矩形坐標(biāo)。
判斷碰撞
判斷兩個(gè)矩形是否覆蓋相交,根據(jù)矩形的 minX,maxX,minY,maxY 判斷相交,原理比較簡單,代碼如下:
/** * 判斷分位是否相交 * @param {*} target */ isAnchorMeet(target) { let react = this.getCurrentRect(), targetReact = target.getCurrentRect(); if ((react.minX < targetReact.maxX) && (targetReact.minX < react.maxX) && (react.minY < targetReact.maxY) && (targetReact.minY < react.maxY)) { return true; } return false; }
創(chuàng)建虛擬文字集合對象
let labels = pixels.map((val) => { let radius = val.pixel.radius + this.style.normal.borderWidth; //圓點(diǎn)半徑 return new Label(val.pixel.x, val.pixel.y, radius, fontSize, byteWidth, val.name); });
遞歸遍歷虛擬文字集合、判斷是否與其他相交,如果有相交就移動當(dāng)前文字位子,直到不相交為止。當(dāng)找不到合適位置時(shí),就選擇隱藏當(dāng)前文字。
代碼如下:
do { var meet = false; //本輪是否有相交 for (let i = 0; i < labels.length; i++) { let temp = labels[i]; for (let j = 0; j < labels.length; j++) { if (i != j && temp.show && temp.isAnchorMeet(labels[j])) { temp.next(); meet = true; break; } } } } while (meet);
繪畫文字
labels.forEach(function (item) { if (item.show) { //是否顯示 let pixel = item.getCurrentRect(); ctx.beginPath(); ctx.fillText(item.text, pixel.x, pixel.y); ctx.fill(); } });
文字避讓算法到目前介紹完了,對應(yīng)的 inMap 文件地址為https://github.com/TalkingData/inmap/blob/master/src/worker/helper/Label.js,接下來還會繼續(xù)給大家分享干貨。
總結(jié)
以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,如果有疑問大家可以留言交流,謝謝大家對億速云的支持。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。