基于 Canvas 的大数据可视化库 inMap

inMap 是 TalkingData 可视化团队开源的一款基于 canvas 的大数据可视化库,专注于大数据方向点、线、面的可视化效果展示。目前支持散点、围栏、热力、网格、聚合等方式;致力于让大数据可视化变得简单易用。

特性

  • 高性能
  • 多线程
  • 多图层叠加
  • 友好的 API
  • 可以自定义主题

安装

使用 npm

$ npm install inmap --save

或使用 <script> 全局引用

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=0lPULNZ5PmrFVg76kFuRjezF"></script>
<script type="text/javascript" src="//unpkg.com/inmap/dist/inmap.min.js"></script>

inMap依赖百度地图,需要开发者到百度地图开发平台申请,方可使用百度地图。

示例代码

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body,
html {
width: 100%;
height: 100%;
margin: 0;
font-family: "微软雅黑";
}
#allmap {
width: 100%;
height: 100%;
}
p {
margin-left: 5px;
font-size: 14px;
}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=U3q69k0Dv0GCYNiiZeHPf7BS"></script>
<script src="http://inmap.iviewui.com/inmap/inmap.min.js"></script>
<title></title>
</head>
<body>
<div id="allmap"></div>
</body>
</html>
<script>
var inmap = new inMap.Map({
id: 'allmap',
skin: "Blueness",
center: [105.403119, 38.028658],
zoom: {
value: 5,
show: true,
max: 18,
min: 5
},
})
var overlay = new inMap.DotOverlay({
tooltip: {
show: true,
position: 'top',
formatter: "{count}"
},
legend: {
show: true,
title: "标题",
data: ["描述1", "描述2", "描述3", "描述4"],
formatter: function (start, end) {
return start + "万~" + (end || "max") + "万";
}
},
style: {
normal: {
backgroundColor: 'rgba(200, 200, 50, 1)',
borderWidth: 1,
borderColor: "rgba(255,255,255,1)",
size: 10,
},
mouseOver: {
backgroundColor: 'rgba(200, 200, 200, 1)',
borderColor: "rgba(255,255,255,1)",
borderWidth: 4,
},
selected: {
backgroundColor: 'rgba(184,0,0,1)',
borderColor: "rgba(255,255,255,1)"
},
splitList: [{ //设置区间颜色
start: 0,
end: 2,
size: 3,
},
{
start: 2,
end: 5,
size: 6,
},
{
start: 5,
end: 7,
size: 9,
},
{
start: 7,
size: 12,
}
],
},
data: data,
event: {
onMouseClick: function (item, event) {
//能获取当前点的信息
}
}
});
inmap.add(overlay);
</script>

效果截图

基于 Canvas 的大数据可视化库 inMap

阿里云服务器

编辑该文章

编辑该文章,必须放入您本人的支付宝或微信收款码,通过审核后可,如果浏览者觉得您写的不错了直接对您打赏

复制加密链接

This is a modal dialog!

邮箱

This is a modal dialog!