Mapv 地图可视化工具库 项目简介
Mapv 是一款基于百度地图的大数据可视化开源库,可以用来展示大量的点、线、面的数据,每种数据也有不同的展示类型,如直接打点、热力图、网格、聚合等方式展示数据。浏览器支持Mapv使用canvas开发,支持现在被称为“现代”浏览器, 通常兼容除了IE8及IE以下版本的其他大部分浏览器。使用<script src="dist/mapv.js" charset="utf-8"></script>开发调试安装相关的node插件npm install执行grunt监听src代码变化grunt示例访问更多示例地址示例代码创建mapv对象// 第一步创建mapv示例var mapv = new Mapv({
map: map // 百度地图的map实例});创建点数据图层// 创建一个图层var layer = new Mapv.Layer({
zIndex: 3, // 图层的层级
mapv: mapv, // 对应的mapv
dataType: '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米
}
});创建线数据图层var layer = new Mapv.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
}
});创建面数据图层var layer = new Mapv.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参考编辑器使用方法截图
map: map // 百度地图的map实例});创建点数据图层// 创建一个图层var layer = new Mapv.Layer({
zIndex: 3, // 图层的层级
mapv: mapv, // 对应的mapv
dataType: '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米
}
});创建线数据图层var layer = new Mapv.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
}
});创建面数据图层var layer = new Mapv.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参考编辑器使用方法截图