绘制数据源
其他部分与飞线动画（一）一致
var linePointLayer = new mapvgl.LinePointLayer({
size:10, // 点的大小
speed:50, // 点运动速度
color: 'rgba(255,255,0,0.6)',
// animationType: mapvgl.LinePointLayer.ANIMATION_TYPE_UNIFORM_SPEED,
animationType: mapvgl.LinePointLayer.ANIMATION_TYPE_SMOOTH, // 点的运动类型
shapeType: mapvgl.LinePointLayer.SHAPE_TYPE_CIRCLE, // 点的类型
blend:'lighter'
});
view.addLayer(linePointLayer);
linePointLayer.setData(data);
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=你的key">
</script>
<script type="text/javascript" src="https://mapv.baidu.com/gl/examples/static/common.js">
</script>
<script type="text/javascript" src="//mapv.baidu.com/build/mapv.js">
</script>
<script src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.80/dist/mapvgl.min.js">
</script>
<script src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.140/dist/mapvgl.threelayers.min.js">
</script>
<style>
html, body {
width:100%;
height:100%;
padding:0;
margin:0;
}
#map_container {
width:100%;
height:100%;
}
.anchorBL, .BMap_cpyCtrl {
display:none;
}
</style>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="map_container"></div>
<script>
var map = initBMap()
var data = initData()
setData(map, data)
// 初始化百度地图
function initBMap() {
var cityCenter = mapv.utilCityCenter.getCenterByCityName('济南')
var map = initMap({
tilt:0,
center:[cityCenter.lng, cityCenter.lat],
zoom:5,
style:purpleStyle})
return map;
};
// 准备数据源
function initData() {
var data = [];
// 生成贝塞尔曲线坐标集
var cities = ['济南','临沂','潍坊','东营','滨州','青岛','威海','枣庄','德州','淄博','烟台'];
// 1、实例化贝塞尔曲线对象
var curve = new mapvgl.BezierCurve();
randomCount = 100;
var targetCity = mapv.utilCityCenter.getCenterByCityName('济南')
var curve = new mapvgl.BezierCurve();
for (var i = 1; i < cities.length; i++){
var startCity = mapv.utilCityCenter.getCenterByCityName(cities[i])
curve.setOptions({
start:[startCity.lng, startCity.lat],
end: [targetCity.lng, targetCity.lat]
});
var curveData = curve.getPoints();
data.push({
geometry:{
type: 'LineString',
coordinates:curveData
}})
}
return data;
};
// 绘制数据源
function setData(map, data){
// 1、初始化图层
var view = new mapvgl.View({ map });
// 2、初始化 LineLayer
var lineLayer = new mapvgl.LineLayer({
color:'rgba(20,12,255,0.8)',
width:1,
});
view.addLayer(lineLayer);
lineLayer.setData(data);
var linePointLayer = new mapvgl.LinePointLayer({
size:10, // 点的大小
speed:50, // 点运动速度
color: 'rgba(255,255,0,0.6)',
animationType: mapvgl.LinePointLayer.ANIMATION_TYPE_SMOOTH,
shapeType: mapvgl.LinePointLayer.SHAPE_TYPE_CIRCLE,
blend:'lighter'
});
view.addLayer(linePointLayer);
linePointLayer.setData(data);
};
</script>
</body>
</html>
|