TalkingData 开源地理信息可视化框架 inMap

xeblog 发布于2019-08-22 11:21 / 3325人阅读

摘要：本文作者可视化工程师李凤禄是可视化团队开源的一款基于的大数据可视化库，专注于大数据方向点线面的可视化效果展示。目前支持散点围栏热力网格聚合等方式致力于让大数据可视化变得简单易用。后续会输出创造更好的可视化图形和算法，并后续推出版本。

本文作者：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 版本。

混合云专线服务开源框架开源论坛框架 inMap TalkingData

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/92238.html

iView 一周年了，同时发布了 2.0 正式版，但这只是开始...

摘要：在许多志愿者的帮助下，将文档全部翻译为英文，在开发者社区颇受欢迎。有了英文版后，更多的国外开发者也参与到讨论之中，相信接下来会有更多来自国外的。英文版的翻译离不开社区的贡献，在此特别感谢和三位热心志愿者。 showImg(https://segmentfault.com/img/bVRG13?w=2880&h=1800); 两年前，我开始接触 Vue.js 框架，当时就被它的轻量、组件...

alexnevsky 2019-08-20 18:23 评论0 收藏0
iView 一周年了，同时发布了 2.0 正式版，但这只是开始...

摘要：在许多志愿者的帮助下，将文档全部翻译为英文，在开发者社区颇受欢迎。有了英文版后，更多的国外开发者也参与到讨论之中，相信接下来会有更多来自国外的。英文版的翻译离不开社区的贡献，在此特别感谢和三位热心志愿者。 showImg(https://segmentfault.com/img/bVRG13?w=2880&h=1800); 两年前，我开始接触 Vue.js 框架，当时就被它的轻量、组件...

Drinkey 2019-08-01 17:16 评论0 收藏0
你不知道的前端算法之文字避让

摘要：避让算法采用的是四分位模型算法，接下来手把手教你写避让算法，老司机带你装逼带你飞。创建四分位模型所谓四分位模型，每一个标记点都有上下左右四个放文字的位子，如果左边放不下，那就放右边试试，还不行就放到下面试试，以此类推，原理就这么简单，哈哈。本文作者：TalkingData 可视化工程师李凤禄编辑：Aresn inMap 是一款基于 canvas 的大数据可视化库，专注于大数据方向点线...

yedf 2019-08-21 18:44 评论0 收藏0
你不知道的前端算法之热力图的实现

摘要：目前支持散点围栏热力网格聚合等方式致力于让大数据可视化变得简单易用。如图表示，红色区域表示分析要素的密度大，而蓝色区域表示分析要素的密度小。实现热力原理读取每个像素的值透明度，做一个颜色映射。本文作者：TalkingData 可视化工程师李凤禄编辑：Aresn 欢迎加入 QQ 群参与技术讨论：618308202 inMap 是一款基于 canvas 的大数据可视化库，专注于大数据方...

zhaochunqi 2019-08-21 18:25 评论0 收藏0