我的资源:https://download.csdn.net/download/Hei_lovely_cat/12545427
先上效果图
1、引用
<script src="https://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
//见资源中此文件,如果是vue项目记得放到static中哦~
<script src="./static/js/mapv.js"></script>
<script src="https://mapv.baidu.com/build/mapv.min.js"></script>
2、代码详解
- 引用地图
this.map = new BMap.Map("allmap", { enableMapClick: false, // minZoom: 10, // maxZoom: 19 }); //构造底图时,关闭底图可点功能 this.map.centerAndZoom(new BMap.Point(114.646861, 38.054677), 11); this.map.enableScrollWheelZoom(true); // 开启缩放 //处理数据 this.getMapData();
- 对接口的解析
//对数据的处理,从哪流向哪 let qianxiData = [] //弧线 for (var i in this.maps) { var obj = {} obj.from = { lng: this.maps[i].outletLng, lat: this.maps[i].outletLat } obj.to = { lng: this.maps[i].endLng, lat: this.maps[i].endLat } qianxiData.push(obj) } this.mapvLine(qianxiData)
- 动态曲线+流动动画,直接引用即可
//动态河流 mapvLine(qianxiData) { var showType = '迁入'; //判断条件 var lineData = []; //线 var timeData = []; //动画 var citys = {} for (var i = 0; i < qianxiData.length; i++) { var fromColumn = showType == '迁入' ? 'from' : 'to'; var toColumn = showType == '迁入' ? 'to' : 'from'; var fromCenter = qianxiData[i][fromColumn]; var toCenter = qianxiData[i][toColumn]; if (!fromCenter || !toCenter) { continue; } var point = citys[qianxiData[i].from] = qianxiData[i].count; var point = showType == '迁入' ? fromCenter : toCenter; var curve = mapv.utilCurve.getPoints([fromCenter, toCenter]); //弧线图层 for (var j in curve) { timeData.push({ geometry: { type: 'Point', coordinates: curve[j] }, count: 1, time: j }); } lineData.push({ geometry: { type: 'LineString', coordinates: curve }, }); } var lineDataSet = new mapv.DataSet(lineData); var lineOptions = { strokeStyle: 'rgba(64,158,255, 1)', shadowColor: 'rgba(255, 250, 50, 1)', shadowBlur: 20, lineWidth: 4, zIndex: 100, draw: 'simple' } var lineLayer = new mapv.baiduMapLayer(this.map, lineDataSet, lineOptions); var pointOptions = { fillStyle: 'rgba(255, 250, 250, 0.5)', strokeStyle: 'rgba(255, 250, 250, 1)', lineWidth: 4, size: 10, zIndex: 300, draw: 'simple' } var timeDataSet = new mapv.DataSet(timeData); var timeOptions = { fillStyle: 'rgba(255, 250, 250, 0.5)', zIndex: 150, size: 2.5, animation: { type: 'time', stepsRange: { start: 0, end: 50 }, trails: 10, duration: 2, }, draw: 'simple' } var timeMapvLayer = new mapv.baiduMapLayer(this.map, timeDataSet, timeOptions); },
注意:处理的数据格式要按上方格式来~