百度地图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);