个人学习笔记——百度地图飞线动画

1、BezierCurve

BezierCurve通过传入起点和终点，生成带高度的贝塞尔曲线坐标集，可以用来生成飞线数据

属性	类型	描述
start	Array	起点坐标
end	Array	终点坐标

 

方法	描述	描述
getPoints	getPoints({number}|{undefined})	获取生成的曲线坐标集，传入的字段为曲线的分段数，默认值是20
setOptions({Object}options)	setOptions({Object}options)	修改起点、终点坐标等属性

引入BezierCurve

<script src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.54/dist/mapvgl.threelayers.min.js"></script>

生成贝塞尔曲线坐标集

1. 实例化贝塞尔曲线对象

var curve = new mapvgl.BezierCurve()

2. 设置起点和终点坐标

var start = mapv.utilCityCenter.getCenterByCityName('上海')
var end = mapv.utilCityCenter.getCenterByCityName('北京')
curve.setOptions({
    start: [start.lng, start.lat],
    end: [end.lng, end.lat]
})

3. 生成贝塞尔曲线坐标集

var curveData = curve.getPoints()
data.push({
    geometry: {
        type: 'LineString',
        coordinates: curveData
    }
})

 

2、飞线对象

options属性	类型	描述	解释
style	string	normal，默认值，飞线动画速度均匀。 chaos，飞线动画速度不均匀	飞线动画方式
color	string	’rgba(255, 5, 5, 1)’，默认值	底线颜色，同css颜色
textureColor	string	’rgba(255, 5, 5, 1)’，默认值	飞线动画颜色，同css颜色
textureColor	Number	5，默认值	飞线动画的宽度
textureLength	Number	30，默认值	飞线动画的长度，占整条线的百分比，取值0-100
step	step	0.1，默认值	飞线动画的步长，步长越大动画速度越快

3、绘制一条线

初始化百度地图

运用 common.js

var cityCenter = mapv.utilCityCenter.getCenterByCityName('上海')
return initMap({
    tilt: 30,
    center: [cityCenter.lng, cityCenter.lat],
    zoom: 7,
    style: snowStyle
})

需要引入 mapv ， mapvgl ，threelayers 三个库文件

准备数据源

var data = []
// 生成贝塞尔曲线坐标集
// 1. 实例化贝塞尔曲线对象
var curve = new mapvgl.BezierCurve()
// 2. 设置起点和终点坐标
var start = mapv.utilCityCenter.getCenterByCityName('上海')
var end = mapv.utilCityCenter.getCenterByCityName('北京')
curve.setOptions({
    start: [start.lng, start.lat],
    end: [end.lng, end.lat]
})
// 3. 生成贝塞尔曲线坐标集
var curveData = curve.getPoints()
data.push({
    geometry: {
        type: 'LineString',
        coordinates: curveData
    }
})

绘制数据源

1. 初始化图层

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

2. 初始化飞线对象

var flyLine = new mapvgl.FlyLineLayer({
    style: 'chaos',
    color: 'rgba(33,242,214,0.3)',
    step: 0.3,
    textureColor: '#ff0000',
    textureWidth: 20,
    textureLength: 10
})

3. 将飞线对象添加到图层中

view.addLayer(flyLine)

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

flyLine.setData(data)

效果如下

 

 

 

4、绘制多条线

随机获取城市中心点

var cities = [
    '北京', '天津', '上海', '重庆', '石家庄', '太原', '呼和浩特', '哈尔滨', '长春',
    '沈阳', '济南', '南京', '合肥', '杭州', '南昌', '福州', '郑州', '武汉', '长沙', '广州',
    '南宁', '西安', '银川', '兰州', '西宁', '乌鲁木齐', '成都', '贵阳', '昆明', '拉萨', '海口'
]
var randomCount = 100   // 随机次数
​
 // 随机获取城市中心点
var startPoint = mapv.utilCityCenter.getCenterByCityName(cities[parseInt(Math.random() * cities.length, 10)]);  // 起点
var endPoint = mapv.utilCityCenter.getCenterByCityName(cities[parseInt(Math.random() * cities.length, 10)])     // 终点

通过 setOptions 方法设置多个起点和终点坐标

curve.setOptions({
    start: [startPoint.lng, startPoint.lat],
    end: [endPoint.lng, endPoint.lat]
})

通过getPoints 方法获取贝塞尔集

var curveData = curve.getPoints()
data.push({
    geometry: {
        type: 'LineString',
        coordinates: curveData
    }
})

最终效果

完整代码

```js
var map = initBMap()
var data = initData()
setData(map, data)

// 初始化百度地图
function initBMap () {
    var cityCenter = mapv.utilCityCenter.getCenterByCityName('上海')
    return initMap({
        tilt: 60,
        center: [cityCenter.lng, cityCenter.lat],
        zoom: 6,
        style: purpleStyle
    })
}

// 准备数据源
function initData () {
    var data = []
    var cities = [
        '北京', '天津', '上海', '重庆', '石家庄', '太原', '呼和浩特', '哈尔滨', '长春',
        '沈阳', '济南', '南京', '合肥', '杭州', '南昌', '福州', '郑州', '武汉', '长沙', '广州',
        '南宁', '西安', '银川', '兰州', '西宁', '乌鲁木齐', '成都', '贵阳', '昆明', '拉萨', '海口'
    ]
    var randomCount = 100
    // 生成贝塞尔曲线坐标集
    // 1. 实例化贝塞尔曲线对象
    var curve = new mapvgl.BezierCurve()
    while (randomCount--) {
        // 2. 设置起点和终点坐标
        // 随机获取城市中心点
        var startPoint = mapv.utilCityCenter.getCenterByCityName(cities[parseInt(Math.random() * cities.length)]);
        var endPoint = mapv.utilCityCenter.getCenterByCityName(cities[parseInt(Math.random() * cities.length)])
        curve.setOptions({
            start: [startPoint.lng, startPoint.lat],
            end: [endPoint.lng, endPoint.lat]
        })
        // 3. 生成贝塞尔曲线坐标集
        var curveData = curve.getPoints()
        data.push({
            geometry: {
                type: 'LineString',
                coordinates: curveData
            }
        })
    }
    console.log(data)
    return data
}

// 绘制数据源
function setData (map, data) {
    // 1. 初始化图层
    var view = new mapvgl.View({map})
    // 2. 初始化飞线对象
    var flyLine = new mapvgl.FlyLineLayer({
        style: 'chaos',
        color: 'rgba(33,242,214,0.3)',
        step: 0.3,
        textureColor: '#ff0000',
        textureWidth: 20,
        textureLength: 10
    })
    // 3. 将飞线对象添加到图层中
    view.addLayer(flyLine)
    // 4. 将飞线对象于数据源进行绑定
    flyLine.setData(data)
}