前言
inMap 是一款基于 canvas 的大数据可视化库,专注于大数据方向点线面的可视化效果展示。目前支持散点、围栏、热力、网格、聚合等方式;致力于让大数据可视化变得简单易用。
GitHub 地址:https://github.com/TalkingData/inmap(本地下载)
文档地址:http://inmap.talkingdata.com/
在地理信息可视化中,我们经常会遇到在地图上标记文字的需求,下面展示的是某流行 chart 图表框架的效果:
要显示的文字空间不够时,就会造成文字重叠显示混乱,用户体验很不友好。
怎么解决这个问题呢?我们采用文字避让算法,解决这种坑爹的问题。
下面展示的是 inMap 文字避让效果:
文字标注算法是 GIS 中最复杂的问题之一(属于 NP 复杂度问题,所以通常不能找到最优解,只能找到较优解)。
inMap 避让算法采用的是四分位模型算法,接下来手把手教你写避让算法,老司机带你装逼带你飞。
准备数据
inMap 接收的是经纬度数据,需要把它映射到 canvas 的像素坐标,这就用到了墨卡托转换,墨卡托算法很复杂,以后我们会有单独的一篇文章来讲讲他的原理。经过转换,你得到的数据应该是这样的:
[ { "name": "海门",//要显示的文字 "lng": 121.15, "lat": 31.89, "count": 7, "pixel": { //像素坐标 "x": 968, "y": 736 } }, { "name": "鄂尔多斯", "lng": 109.781327, "lat": 39.608266, "count": 5, "pixel": { "x": 659, "y": 478 } }, ... ]
好了,我们得到转换后的像素坐标数据(x、y),就可以做下面的事情了。
求出每段文字矩形的实际大小
measureText() 是 canvas 内置的方法,返回字体宽度的像素单位:
let ctx = this.container.getContext('2d'); // canvas 上下文 let width= ctx.measureText(name).width;
我们通过 measureText 得到每个文字的宽度,canvas 并没有直接获取文字的方法,那文字的高度如何的得到呢?
我们通过反复测试发现 canvas 的 font 等于 “13px Arial” 字体(别的字体不敢保证)的时候,文字的高度大概是 fontSize 的 1.1 倍。
所以代码如下:
let fontSize = parseInt(ctx.font); let height = fontSize * 1.1;
文字的宽度和高度得到后,我们就可以创建文字矩形的坐标系了。