百度地api地址解析，百度地api搜索功能 返回列表

百度地图jsAPI使用总结（四）散点地图之mapv 准备开发mapv一些比较容易被使用到的apimapv实现迁徙图效果

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

源码

准备

引入资源

开发

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

《百度地api地址解析，百度地api搜索功能》来自互联网同行内容，若有侵权，请联系我们删除！