61 lines
1.9 KiB
HTML
61 lines
1.9 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
|
|
<style type="text/css">
|
|
body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
|
|
</style>
|
|
<script src="//mapopen.bj.bcebos.com/github/BMapGLLib/TrackAnimation/src/TrackAnimation.min.js"></script>
|
|
<script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=s0zhKgClIXRG8hQp3HB4KtiXPWw1dP8B"></script>
|
|
<title>视角动画</title>
|
|
</head>
|
|
<body>
|
|
<div id="allmap"></div>
|
|
</body>
|
|
</html>
|
|
<script type="text/javascript">
|
|
// GL版命名空间为BMapGL
|
|
// 按住鼠标右键，修改倾斜角和角度
|
|
var bmap = new BMapGL.Map("allmap"); // 创建Map实例
|
|
bmap.centerAndZoom(new BMapGL.Point(116.297611, 40.047363), 17); // 初始化地图,设置中心点坐标和地图级别
|
|
bmap.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
|
|
var path = [{
|
|
'lng': 116.297611,
|
|
'lat': 40.047363
|
|
}, {
|
|
'lng': 116.302839,
|
|
'lat': 40.048219
|
|
}, {
|
|
'lng': 116.308301,
|
|
'lat': 40.050566
|
|
}, {
|
|
'lng': 116.305732,
|
|
'lat': 40.054957
|
|
}, {
|
|
'lng': 116.304754,
|
|
'lat': 40.057953
|
|
}, {
|
|
'lng': 116.306487,
|
|
'lat': 40.058312
|
|
}, {
|
|
'lng': 116.307223,
|
|
'lat': 40.056379
|
|
}];
|
|
var point = [];
|
|
for (var i = 0; i < path.length; i++) {
|
|
point.push(new BMapGL.Point(path[i].lng, path[i].lat));
|
|
}
|
|
var pl = new BMapGL.Polyline(point);
|
|
setTimeout('start()', 3000);
|
|
function start () {
|
|
trackAni = new BMapGLLib.TrackAnimation(bmap, pl, {
|
|
overallView: true,
|
|
tilt: 20,
|
|
duration: 10000,
|
|
delay: 300
|
|
});
|
|
trackAni.start();
|
|
}
|
|
</script>
|