百度地图之飞线动画

这是我参与8月更文挑战的第7天，活动详情查看：8月更文挑战 我们在很大活动中比如双十一大屏幕等都看见过飞线动画，我们今天一起学习百度地图飞线动画嗷～

使用commn.js中的initMap方法初始化一个地图,前面说过这里我们就省略啦～

3D曲线生成器 BezierCurve

实例化贝塞尔曲线对象(BezierCurve) ;这是mapvgl 中的内置工具。

1. 实例化贝赛尔曲线

 var curve = new mapvgl.BezierCurve();

2. 设置起点和终点最标

 var startPoint = mapv.utilCityCenter.getCenterByCityName(cities[parseInt(Math.random() * cities.length, 10)]);
 var endPoint = mapv.utilCityCenter.getCenterByCityName(cities[parseInt(Math.random() * cities.length, 10)]);
 curve.setOptions({
    start: [startPoint.lng, startPoint.lat],
    end: [endPoint.lng, endPoint.lat]
  });

3.   生成贝塞尔曲线坐标集 ；使用 getPoints()方法获取到生成的贝赛尔曲线坐标集。并将其设置到data数组中。
   • getPoints 获取生成的曲线坐标集，传入的字段为曲线的分段数，默认值是20 数据有啦，我们就要在地图上加载图层啦

FlyLineLayer

1. 用来展示轨迹飞线图层，继承自Layer，创建飞线图层使用的是 FlyLineLayer对象

var view = new mapvgl.View({map});

2. 基于Threejs实现，使用前需要额外引入mapvgl.threelayers包

• options
  • style normal，默认值，飞线动画速度均匀, chaos，飞线动画速度不均匀
  • color 底线颜色，同css颜色
  • textureColor 飞线动画颜色，同css颜色
  • textureWidth 飞线动画的宽度
  • textureLength 飞线动画的长度，占整条线的百分比，取值0-100
  • step 飞线动画的步长，步长越大动画速度越快

var flyLine = new mapvgl.FlyLineLayer({
   style: 'chaos',
   step: 0.3,
   color: 'rgba(33, 242, 214, 0.3)',
   textureColor: function (data) {
       return data.properties.count > 0.5 ? '#ff0000' : '#56ccdd';
   },
   textureWidth: 20,
   textureLength: 10
 })

3. 2. 使用 mapvgl中的 LineLayer图层创建线图层。并将其添加到图层管理器中

 view.addLayer(flyLine)

4. 将飞线对象与数据源进行绑定

 flyLine.setData(data)

我们来看看最终的效果图吧～请教各位大佬一下怎么做动图啊～～～～