Mapv 地图可视化工具库

Mapv 是一款基于百度地图的大数据可视化开源库，可以用来展示大量的点、线、面的数据，每种数据也有不同的展示类型，如直接打点、热力图、网格、聚合等方式展示数据。

浏览器支持

Mapv使用canvas开发，支持现在被称为“现代”浏览器, 通常兼容除了IE8及IE以下版本的其他大部分浏览器。

使用

<scriptsrc="dist/mapv.js"charset="utf-8"></script>

开发调试

安装相关的node插件

npminstall

执行grunt监听src代码变化

grunt

示例

访问更多示例地址

示例代码创建mapv对象

//第一步创建mapv示例varmapv=newMapv({map:map//百度地图的map实例});

创建点数据图层

//创建一个图层varlayer=newMapv.Layer({zIndex:3,//图层的层级mapv:mapv,//对应的mapvdataType:'point',//数据类型，point:点数据类型,polyline:线数据类型,polygon:面数据类型//数据，格式如下data:[{lng:116.46507,//经度lat:39.929101,//纬度count:1//当前点的权重值},{lng:116.43507,lat:39.909101,count:2}],drawType:'simple',//渲染数据方式,simple:普通的打点,[更多查看类参考](https://github.com/huiyan-fe/mapv/wiki/%E7%B1%BB%E5%8F%82%E8%80%83)//渲染数据参数drawOptions:{fillStyle:"rgba(255,255,50,1)",//填充颜色strokeStyle:"rgba(50,50,255,0.8)",//描边颜色，不传就不描边lineWidth:5,//描边宽度radius:5,//半径大小unit:'px'//半径对应的单位，px:默认值，屏幕像素单位,m:米,对应地图上的大约距离,18级别时候1像素大约代表1米}});

创建线数据图层

varlayer=newMapv.Layer({mapv:mapv,dataType:'polyline',data:[{geo:[[116.39507,39.879101],[116.49507,39.889101],[116.46507,39.929101],[116.43507,39.909101]],count:10}],drawType:'simple',zIndex:5,animation:true,drawOptions:{lineWidth:2,strokeStyle:"rgba(0,0,255,1)"},animationOptions:{radius:10}});

创建面数据图层

varlayer=newMapv.Layer({zIndex:3,mapv:mapv,dataType:'polygon',data:[{geo:[[116.39507,39.879101],[116.49507,39.889101],[116.46507,39.929101],[116.43507,39.909101]],count:10}],drawType:'simple',drawOptions:{lineWidth:8,strokeStyle:"rgba(255,255,0,1)",fillStyle:"rgba(255,0,0,0.8)"}});

谁在使用

资源

示例

教程

API参考

编辑器使用方法

截图