百度地图jsAPI使用总结（四）散点地图之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);