| 注册
请输入搜索内容

热门搜索

Java Linux MySQL PHP JavaScript Hibernate jQuery Nginx
jopen
9年前发布

Mapv:基于百度地图的大数据可视化开源库

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

更多文档信息请查看wiki

访问更多示例地址

Mapv:基于百度地图的大数据可视化开源库 Mapv:基于百度地图的大数据可视化开源库 Mapv:基于百度地图的大数据可视化开源库 Mapv:基于百度地图的大数据可视化开源库 Mapv:基于百度地图的大数据可视化开源库 Mapv:基于百度地图的大数据可视化开源库

示例代码

创建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)"    }  });

项目主页:http://www.open-open.com/lib/view/home/1440993490409


 本文由用户 jopen 自行上传分享,仅供网友学习交流。所有权归原作者,若您的权利被侵害,请联系管理员。
 转载本站原创文章,请注明出处,并保留原始链接、图片水印。
 本站是一个以用户分享为主的开源技术平台,欢迎各类分享!
 本文地址:https://www.open-open.com/lib/view/open1440993490409.html
Mapv 图表/报表制作