你可能不知道的前端算法之文字避让（inMap）
前言
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;
文字的宽度和高度得到后，我们就可以创建文字矩形的坐标系了。
创建四分位模型
所谓四分位模型，每一个标记点都有上下左右四个放文字的位子，如果左边放不下，那就放右边试试，还不行就放到下面试试，以此类推，原理就这么简单，哈哈。
创建右侧虚拟矩形坐标描述：
右侧虚拟矩形坐标的描述把圆点也包含在内了，是为了防止文字和圆点重叠。
在计算虚拟矩形的高度时有些坑，圆点大小不是固定的，是根据用户动态配置的，圆点的直径可能大于文字的高度，我们就设定虚拟矩形的高度永远都是最大的那个，需要做一些特殊处理。
代码如下：
_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
};
}
以此类推，描述下面、左面、上面的虚拟矩形坐标。
判断碰撞
判断两个矩形是否覆盖相交，根据矩形的 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;
}
创建虚拟文字集合对象
let labels = pixels.map((val) => {
let radius = val.pixel.radius + this.style.normal.borderWidth; //圆点半径
return new Label(val.pixel.x, val.pixel.y, radius, fontSize, byteWidth, val.name);
});
递归遍历虚拟文字集合、判断是否与其他相交，如果有相交就移动当前文字位子，直到不相交为止。当找不到合适位置时，就选择隐藏当前文字。
代码如下：
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();
}
});
文字避让算法到目前介绍完了，对应的 inMap 文件地址为https://github.com/TalkingData/inmap/blob/master/src/worker/helper/Label.js，接下来还会继续给大家分享干货。
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对脚本之家的支持。
相关文章
这篇文章主要给大家介绍了关于微信小程序登录按钮遮罩浮层效果的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2018-12-12
JavaScript中如何使用cookie实现记住密码功能及cookie相关函数介绍
cookie是网站设计者放置在客户端（浏览器）的小文本文件，cookie不仅能够实现保存密码功能，还可以通过cookie保存最近浏览记录增加用户体验。本文给大家介绍js使用cookie实现记住密码功能及cookie相关函数讲解，感兴趣的朋友一起看看吧2016-11-11
这篇文章主要介绍了chrome调试javascript详解,需要的朋友可以参考下2015-10-10
这篇文章主要为大家详细介绍了JavaScript canvas实现加载图片，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-08-08
这篇文章主要介绍了JavaScript获取指定元素位置的方法,实例分析了javascript中left、scrollLeft、top、scrollTop、offsetHeight等属性的使用技巧,需要的朋友可以参考下2015-04-04
这篇文章主要为大家详细介绍了JS轮播图实现简单代码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-08-08
火狐也不知道为什么，自己功能上，样式上面，都无法让其强制换行，这里用JS来实现火狐里面强制换行的方法。2010-06-06
从一个列表界面点击新增按钮,进入新增元素的界面,然后新增之后返回列表界面,并刷新列表界面,下面小编给大家分享uniapp返回上一页,并实现刷新界面数据的代码,感兴趣的朋友跟随小编一起看看吧2024-04-04
这篇文章主要介绍了bootstrap 输入框组 通过加减按钮来增加删除内嵌输入框组,当我点击 + 按钮时，会添加一行输入框组；当点击 - 按钮时，会删除这一行输入框组。具体实现代码大家参考下本文2017-11-11
这篇文章主要介绍了Bootstrap打造一个左侧折叠菜单的系统模板(一)的相关资料,需要的朋友可以参考下2016-05-05
最新评论