百度地图可视化参考文档 MapV开发文档 (baidu.com)
Baidu地图飞线动画
1. 在head中初始化样式和引入所需的JS库文件
2. 初始化一个容器，容器id固定为 map_container,是由common.js决定
- 由于使用了一个封装好的
comm.js文件所以需要固定容器的id。
在common.js中容器的id
3. 使用commn.js中的initMap方法初始化一个地图
/**
* 初始化地图
*/
function initMyMap() {
// 根据城市名称获取城市的中心点坐标 （经纬度数组对象 ）
let centerCity = mapv.utilCityCenter.getCenterByCityName('上海')
return initMap(
{
// 切斜角度
tilt: 60,
// 旋转角度
heading: 0,
// 地图样式
style: purpleStyle,
// 地图缩放比例
zoom: 6,
// 地图的中心点坐标
center: [centerCity.lng, centerCity.lat]
}
)
}
4. 准备数据源
数据中的每一个数据项代表一条贝塞尔曲线。贝赛尔曲线又由一些点构成，最后通过
mapvgl的飞线图层FlyLineLayer创建一条条的飞线。
4.1 生成贝赛尔曲线坐标集
- 实例化贝塞尔曲线对象(
BezierCurve) ;这是mapvgl中的内置工具。
let curve = new mapvgl.BezierCurve()
- 设置起点坐标和终点坐标 ；通过
setOptions方法设置贝赛尔曲线的起点坐标和终点坐标。
// 2. 设置起点和终点坐标
let start = mapv.utilCityCenter.getCenterByCityName('上海')
let end = mapv.utilCityCenter.getCenterByCityName('北京')
curve.setOptions(
{
start: [start.lng, start.lat],
end: [end.lng, end.lat]
}
)
- 生成贝塞尔曲线坐标集 ；使用
getPoints()方法获取到生成的贝赛尔曲线坐标集。并将其设置到data数组中。
let curveData = curve.getPoints()
data.push({
geometry: {
type: 'LineString',
coordinates: curveData
}
})
准备数据源部分的代码
/**
* 准备数据源
* @returns {[]}
*/
function initData() {
// 生成的数据信息
let data = []
// 城市数据信息
let cities = ['北京', '天津', '上海', '重庆', '石家庄', '太原', '呼和浩特', '哈尔滨', '长春',
'沈阳', '济南', '南京', '合肥', '杭州', '南昌', '福州', '郑州', '武汉', '长沙', '广州',
'南宁', '西安', '银川', '兰州', '西宁', '乌鲁木齐', '成都', '贵阳', '昆明', '拉萨', '海口']
// 需要定义 700 个 data 的数据项
let randomCount = 100
while (randomCount--) {
// 获取每一个城市的中心点坐标 随机生成 在 所有城市范围内挑选 生成的随机数是 [0,cities.length] 创建开始开始城市和终点城市
let start = mapv.utilCityCenter.getCenterByCityName(cities[parseInt(Math.random() * cities.length, 10)])
let end = mapv.utilCityCenter.getCenterByCityName(cities[parseInt(Math.random() * cities.length, 10)])
// 创建贝塞尔曲线对象
let curve = new mapvgl.BezierCurve();
// 根据起点和终点生成贝塞尔曲线坐标集
curve.setOptions(
{
start: [start.lng, start.lat],
end: [end.lng, end.lat]
}
)
let curveData = curve.getPoints()
// 3. 创建data数据
data.push(
{
geometry: {
type: 'LineString',
coordinates: curveData
}
}
)
}
return data;
}
5. 设置数据源
- 创建图层管理器对象：需要传递当前的
map对象。
// 创建图层管理器
let view = new mapvgl.View(
{map}
);
- 创建飞线图层:使用的是
FlyLineLayer对象。
let flyLineLayer = new mapvgl.FlyLineLayer(
{
// 飞线动画方式 normal，默认值，飞线动画速度均匀 chaos，飞线动画速度不均匀
style: 'chaos',
// 底线颜色
color: 'rgba(33, 242, 214, 0.3)',
// 飞线动画的颜色
textureColor: 'red',
// 飞线动画的宽度
textureWidth: 20,
// 飞线动画的长度，占整条线的百分比，取值0-100
textureLength: 10,
// 飞线动画的步长，步长越大动画速度越快 默认值 0.1
step: 0.1
}
);
- 将飞线图层添加到图层管理器中:
view.addLayer(flyLineLayer);
- 将准备的数据和 飞线图层绑定 :
flyLineLayer.setData(data);
这部分的完整代码
/**
* 绘制数据源
* @param map
* @param data
*/
function setData(map, data) {
// 创建图层管理器
let view = new mapvgl.View(
{map}
);
let flyLineLayer = new mapvgl.FlyLineLayer(
{
// 飞线动画方式 normal，默认值，飞线动画速度均匀 chaos，飞线动画速度不均匀
style: 'chaos',
// 底线颜色
color: 'rgba(33, 242, 214, 0.3)',
// 飞线动画的颜色
textureColor: 'red',
// 飞线动画的宽度
textureWidth: 20,
// 飞线动画的长度，占整条线的百分比，取值0-100
textureLength: 10,
// 飞线动画的步长，步长越大动画速度越快 默认值 0.1
step: 0.1
}
);
view.addLayer(flyLineLayer);
flyLineLayer.setData(data);
}
6. 该案例的完整代码
datav-Mapvgl-fly-line