百度地图jsAPI使用总结（四）散点地图之mapv

准备
开发
mapv一些比较容易被使用到的api
mapv实现迁徙图效果

在之前一篇说过echarts在结合百度地图做散点图，在数据量比较大的时候页面会非常的不流畅(大概1000+就不太行了)，虽然百度地图api中可以利用BMap.PointCollection()加载海量点，但是如果有需要用颜色来区分数据种类的时候，这个方法就无法满足了。而mapv虽然视觉效果不如echarts，但上述需求却是可以很好的满足的。mapv是开源的，虽然没有什么完备的api文档，但是大家可以通过查看源码的方式来找到自己希望调用的方法。
源码

准备

引入资源

<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=yourKey"></script>
<script src="http://mapv.baidu.com/build/mapv.js"></script>

开发

mapv图层散点数据格式

var points = [{Geometry:{//样式为点type : "Point",//点在地图中的经纬度Coordinates: [111.68,29.05] },//点填充颜色fillStyle : "#00cc66",//点大小Size : 5
}];

mapv图层散点图配置项

var options1 = {draw : 'category',size : 3,//mapv层绑定方法methods : {//可以绑定点击方法（不限于点击点，点击其他位置也触发）click : function(item){//item:点的信息，点中点的时候有值，否则为空//item的内容是散点数据中全部内容if(item){console.log(item);}},//鼠标移动事件mousemove:function(item){if(item){console.log(item);}}}};

初始化图层

var dataSet = new mapv.DataSet(points);
var myLayer = new mapv.baiduMapLayer(map,dataSet,options1);

效果

按照上述代码进行编码就可以实现散点图效果了

mapv一些比较容易被使用到的api

mapv没有api文档，在GitHub上只有比较简略的介绍，在如下总结的api中有一些是我在查看源码的时候发现的方法

图层隐藏

myLayer.hide()

图层显示

myLayer.show()

修改配置项
参数的格式是object.options={/要修改的配置项/}

myLayer.update({options:{}
});

重置配置项
如果在原有的配置项上有追加的配置项，或者是删减一些配置项，应当使用setOptions方法

myLayer.setOptions({size:12//....配置项
});

图层销毁

myLayer.destroy();
//这个方法的实现是myLayer.hide();myLayer.unbindEvent();unbindEvent()方法作用是解绑图层事件

激活被销毁的图层

myLayer.show();
myLayer.bindEvent();

刷新数据
当散点数据有变化的时候可使用如下方法

dataSet.set(points);

mapv实现迁徙图效果

效果图

实现原理
这种迁徙图效果是由三个mapv图层叠加实现的
这三个图层分别为端点，弧线，弧线上发光线
实现代码如下
端点图层

var pointData = [{geometry:{type: 'Point',coordinates:[/*经度*/,/*纬度*/]}}];
var pointOptions = {shadowColor: 'rgba(55, 50, 250, 0.5)',shadowBlur: 10,size: 5,zIndex: 10,draw: 'simple',fillStyle : 'green'};
var specialPointDataSet = new mapv.DataSet(pointData);
var specialPointLayer = new mapv.baiduMapLayer(map, specialPointDataSet, pointOptions);

弧线图层

var fromCenter = {lng:/*经度*/,lat:/*纬度*/};//起始点
var toCenter = [lng:/*经度*/,lat:/*纬度*/];//终止点
//curve为弧线数据，其本质是点的数组
var curve = mapv.utilCurve.getPoints([fromCenter, toCenter]);
var lineData = [];
lineData.push({strokeStyle : 'blue',geometry: {type: 'LineString',coordinates: curve},count: 30 * Math.random()});
var lineDataSet = new mapv.DataSet(lineData);
var lineOptions = {shadowColor: 'rgba(255, 250, 50, 1)',shadowBlur: 20,lineWidth: 2,zIndex: 100,draw: 'simple'}
var lineLayer = new mapv.baiduMapLayer(map, lineDataSet, lineOptions);

发光线图层
发光线的实现本质是一组依次闪烁的点组成的

var timeData = [];
var curve = mapv.utilCurve.getPoints([fromCenter, toCenter]);
for (j = 0; j < curve.length; j++) {timeData.push({geometry: {type: 'Point',coordinates: curve[j]},count: 1,time: j});}
var timeDataSet = new mapv.DataSet(timeData);
var timeOptions = {fillStyle: 'rgba(255, 250, 250, 0.5)',zIndex: 200,size: 2.5,animation: {type: 'time',stepsRange: {start: 0,end: 50},trails: 10,duration: 2,},draw: 'simple'}
var timeMapvLayer = new mapv.baiduMapLayer(map, timeDataSet, timeOptions);

百度地图jsAPI使用总结（四）散点地图之mapv相关推荐

antdesign 地图_React 使用recharts实现散点地图的示例代码
一.前端框架react+ant design UI 二.首先安装recharts npm install recharts 或者 yarn add recharts 三.引入插件及chinaJSON. ...
通过QGIS XYZ Tiles访问国内四大图商地图服
谷歌地图.必应地图渐行渐远了,个中缘由就不说啦.今天要与大家分享的是如何通过QGIS XYZ Tiles访问具有互联网地图服务资质的四大图商地图服务,包括天地图.高德地图.腾讯地图和百度地图,所有UR ...
CBGS，百度地图15年的四个字母
[深几度·让互联网回归经济学系列] 撰稿|吴俊宇「摘要:几乎所有互联网大厂都在试图将自家ToC类产品建设成面向ToB的开放平台.以微信.支付宝为代表的国民级产品都已经完成了这个过程.百度地图也是如此 ...
如何打赢出行下半场？百度地图祭出这四招
12月23日,百度地图在北京举办"智能出行新启点"生态大会,发布了国内首个3D地图,上线了杨洋导航语音完整版,还推出了涵盖等多个合作方的"城市伙伴计划".看上去 ...
如何利用【百度地图API】，制作房产酒店地图？（下）——结合自己的数据库...
摘要:应广大API爱好者要求,写了一篇利用自己数据库标点的文章-- --------------------------------------------------------- 一.先按照前两篇 ...
使用echarts3实现散点地图
在开发过程中,我们总会接到关于数据处理分析的需求,其中有一部分很重要就是数据统计可视化展示,对于数据可视化方面,echarts这点就做的非常好.最近研究echarts,对于散点地图这一块挺感兴趣的,在 ...
基于高德地图JsAPI进行浏览器精确定位，实现手机端考勤打卡功能
前言: 由于项目需求需要在项目中实现手机端(基于网页)考勤打卡功能,最初考虑使用H5自身定位功能,但尝试过后,效果很不稳定.然后尝试使用百度地图JsAPI,百度家的稳定倒是很稳定,没想到的是定位位置和 ...
谷歌百度脸书IBM，人工智能四巨头2014盘点
二零一四年,人为智能取得前所未有的关心,EronMusk和霍金的"人工智能恶魔论"在学术界和产业界激励了猛烈斟酌;本钱对这个标的也是趋之若鹜,范围到二零零四年,用意折20亿美元的危 ...
浅谈百度地图的简单开发之引入基本地图以及修改地图样式（一）
今天,想给大家带来一个基于百度地图官方开放的API开发的高仿百度地图的Demo(还称不上是一个APP),基本实现了百度地图的几大核心功能,百度地图中的基本地图,百度地图的定位,百度地图的全景显示,百度 ...

百度地图jsAPI使用总结（四）散点地图之mapv

百度地图jsAPI使用总结（四）散点地图之mapv

准备

开发

mapv一些比较容易被使用到的api

mapv实现迁徙图效果

百度地图jsAPI使用总结（四）散点地图之mapv相关推荐

最新文章

热门文章