永久会员
- 威望
- 3418
- 贡献
- 5111
- 热心值
- 0
- 金币
- 3125
- 注册时间
- 2019-8-13
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript"
src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=qLV8OeIGEVBKEfYQ7EP4XbTtPpFp3vMg"></script>
<script src="https://mapv.baidu.com/build/mapv.js"></script>
<script src="https://mapv.baidu.com/gl/examples/static/common.js"></script>
<script src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.54/dist/mapvgl.min.js"></script>
<script src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.72/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>
<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: 60,
center: [cityCenter.lng, cityCenter.lat],
zoom: 6,
style: purpleStyle,
});
return map;
}
//准备数据源
function initData() {
var data = [];
var cities = ['北京', '天津', '上海', '重庆', '石家庄', '太原', '呼和浩特', '哈尔滨', '长春',
'沈阳', '济南', '南京', '合肥', '杭州', '南昌', '福州', '郑州', '武汉', '长沙', '广州',
'南宁', '西安', '银川', '兰州', '西宁', '乌鲁木齐', '成都', '贵阳', '昆明', '拉萨', '海口'
];
var randomCount = 100;
//生成贝塞尔曲线坐标集
//1.实例化贝塞尔曲线对象
var curve = new mapvgl.BezierCurve();
while(randomCount--) {
//2.设置起点和终点坐标
var start = mapv.utilCityCenter.getCenterByCityName(cities[parseInt(Math.random() * cities.length)]);
var end = mapv.utilCityCenter.getCenterByCityName(cities[parseInt(Math.random() * cities.length)]);
curve.setOptions({
start:[start.lng,start.lat],
end:[end.lng,end.lat],
});
//3.生成贝塞尔曲线坐标集
var curveData = curve.getPoints();
data.push({
geometry: {
type:'LineString',
coordinates: curveData
}
});
};
return data;
}
//绘制数据源
function setData(map,data) {
//1.初始化图层
var view = new mapvgl.View({
map: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);
}
</script>
</body>
</html>
|
|
楼主: 1358582763
[复制链接]
发表于 2020-10-5 17:29
