百度地图可视化参考文档 MapV开发文档 (baidu.com)
Baidu地图飞线动画
1. 在head中初始化样式和引入所需的JS库文件
<style>
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#map_container {
width: 100%;
height: 100%;
}
</style>
<!-- 百度地图基础库 -->
<script type="text/javascript"
src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=******"></script>
<!-- 公共的文件代码 里面包含 地图初始化 和 实用样式 -->
<script src="https://mapv.baidu.com/gl/examples/static/common.js"></script>
<!-- 使用根据城市名称获取城市的坐标 -->
<script src="https://mapv.baidu.com/build/mapv.js"></script>
<!--使用mapcgl的时候需要引入-->
<script src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.54/dist/mapvgl.min.js"></script>
<!-- 使用飞线图层需要使用的依赖 -->
<script src="https://unpkg.com/mapvgl/dist/mapvgl.threelayers.min.js"></script>
2. 初始化一个容器，容器id固定为 map_container,是由common.js决定
- 由于使用了一个封装好的
comm.js文件所以需要固定容器的id。
在common.js中容器的id
<div id="map_container"></div>
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. 该案例的完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>datav-Mapvgl-fly-line</title>
<style>
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#map_container {
width: 100%;
height: 100%;
}
</style>
<!-- 百度地图基础库 -->
<script type="text/javascript"
src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=G1*****"></script>
<!-- 公共的文件代码 里面包含 地图初始化 和 实用样式 -->
<script src="https://mapv.baidu.com/gl/examples/static/common.js"></script>
<!-- 使用根据城市名称获取城市的坐标 -->
<script src="https://mapv.baidu.com/build/mapv.js"></script>
<!--使用mapcgl的时候需要引入-->
<script src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.54/dist/mapvgl.min.js"></script>
<!-- 使用飞线图层需要使用的依赖 -->
<script src="https://unpkg.com/mapvgl/dist/mapvgl.threelayers.min.js"></script>
</head>
<body>
<!-- 飞线动画 -->
<div id="map_container"></div>
<script>
let map = initMyMap();
let data = initData();
setData(map, data)
/**
* 初始化地图
*/
function initMyMap() {
let centerCity = mapv.utilCityCenter.getCenterByCityName('上海')
return initMap(
{
// 切斜角度
tilt: 60,
// 旋转角度
heading: 0,
// 地图样式
style: purpleStyle,
// 地图缩放比例
zoom: 6,
// 地图的中心点坐标
center: [centerCity.lng, centerCity.lat]
}
)
}
/**
* 准备数据源
* @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;
}
/**
* 绘制数据源
* @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);
}
</script>
</body>
</html>
