<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>MapVGL</title>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<style>
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#map_container {
width: 100%;
height: 100%;
margin: 0;
}
</style>
</head>
<body>
<div id="map_container"></div>
<script src="//api.map.baidu.com/api?v=1.0&type=webgl&ak=1XjLLEhZhQNUzd93EjU5nOGQ"></script>
<script src="static/common.js"></script>
<script src="//mapv.baidu.com/build/mapv.min.js"></script>
<script src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.100/dist/mapvgl.min.js"></script>
<script type="text/javascript" src="//bj.bcebos.com/v1/mapopen/github/BMapGLLib/TrackAnimation/src/TrackAnimation.min.js"></script>
<script>
/* eslint-disable */
/* global BMapGL */
/* global mapv */
/* global mapvgl */
/* global initMap */
/* global whiteStyle */
var map = initMap({
tilt: 60,
heading: 0,
center: [112.164779,37.212845],
zoom: 14,
// style: whiteStyle,
style: purpleStyle,
skyColors: [
// 地面颜色
'rgba(226, 237, 248, 0)',
// 天空颜色
'rgba(186, 211, 252, 1)'
]
});
var view = new mapvgl.View({
map: map
});
var data = [
/*
{geometry: {"type":"LineString","coordinates":[[116.308528,40.050574],[116.307378,40.052314],[116.306175,40.054274],[116.30515,40.056608],[116.304809,40.058955],[116.304055,40.060611]]}},
{geometry: {"type":"LineString","coordinates":[[116.304414,40.058458],[116.301845,40.058113],[116.299689,40.057795],[116.298485,40.05745],[116.297245,40.056911],[116.2957,40.05698],[116.294964,40.05676]]}},
{geometry: {"type":"LineString","coordinates":[[116.305222,40.058099],[116.309678,40.059024],[116.311942,40.059548],[116.312714,40.058043],[116.312948,40.057933],[116.313505,40.056829],[116.315804,40.057698]]}},
*/
{"geometry":{"type":"LineString","coordinates":[[112.257777,37.295026],[112.253782,37.290389],[112.253782,37.290389],[112.253489,37.290051],[112.253489,37.290051],[112.253195,37.28971],[112.253195,37.28971],[112.251845,37.288149],[112.251845,37.288149],[112.25146,37.287706],[112.25146,37.287706],[112.246837,37.282147],[112.246837,37.282147],[112.246496,37.281681],[112.246496,37.281681],[112.246044,37.281022],[112.246044,37.281022],[112.245732,37.280544],[112.245732,37.280544],[112.244621,37.278847],[112.244621,37.278847],[112.244307,37.278369],[112.244307,37.278369],[112.242814,37.276089],[112.242814,37.276089],[112.242504,37.275616],[112.242504,37.275616],[112.240411,37.27234],[112.240411,37.27234],[112.240095,37.271841],[112.240095,37.271841],[112.239918,37.27156],[112.239918,37.27156],[112.239613,37.271078],[112.239613,37.271078],[112.235741,37.26637],[112.235741,37.26637],[112.235258,37.265992],[112.235258,37.265992],[112.234288,37.26538],[112.234288,37.26538],[112.233852,37.265109],[112.233852,37.265109],[112.233412,37.264836],[112.233412,37.264836],[112.232757,37.264438],[112.232757,37.264438],[112.232228,37.264116],[112.232228,37.264116],[112.230065,37.262802],[112.230065,37.262802],[112.229536,37.26248],[112.229536,37.26248],[112.225786,37.260195],[112.225786,37.260195],[112.225248,37.259867],[112.225248,37.259867],[112.223184,37.258605],[112.223184,37.258605],[112.22272,37.258322],[112.22272,37.258322],[112.222076,37.257928],[112.222076,37.257928],[112.221612,37.257644],[112.221612,37.257644],[112.220567,37.257004],[112.220567,37.257004],[112.220103,37.25672],[112.220103,37.25672],[112.21857,37.255774],[112.21857,37.255774],[112.218035,37.255444],[112.218035,37.255444],[112.2166,37.254557],[112.2166,37.254557],[112.216019,37.254197],[112.216019,37.254197],[112.215502,37.253878],[112.215502,37.253878],[112.21492,37.253517],[112.21492,37.253517],[112.209979,37.250443],[112.209979,37.250443],[112.209397,37.25008],[112.209397,37.25008],[112.202775,37.24592],[112.202775,37.24592],[112.202239,37.245581],[112.202239,37.245581],[112.19887,37.243442],[112.19887,37.243442],[112.198342,37.243106],[112.198342,37.243106],[112.1954,37.241215],[112.1954,37.241215],[112.194875,37.240875],[112.194875,37.240875],[112.19372,37.240106],[112.19372,37.240106],[112.193202,37.239758],[112.193202,37.239758],[112.192405,37.239205],[112.192405,37.239205],[112.191892,37.238847],[112.191892,37.238847],[112.187648,37.235554],[112.187648,37.235554],[112.187182,37.23517],[112.187182,37.23517],[112.178875,37.22794],[112.178875,37.22794],[112.178411,37.227533],[112.178411,37.227533],[112.173182,37.222956],[112.173182,37.222956],[112.172726,37.222558],[112.172726,37.222558],[112.171414,37.221411],[112.171414,37.221411],[112.170933,37.22099],[112.170933,37.22099],[112.167452,37.217897],[112.167452,37.217897],[112.167126,37.217422],[112.167126,37.217422],[112.166488,37.216547],[112.166488,37.216547],[112.166183,37.216066],[112.166183,37.216066],[112.165335,37.214612],[112.165335,37.214612],[112.165054,37.214127],[112.165054,37.214127],[112.16438,37.212965],[112.16438,37.212965],[112.164098,37.21248],[112.164098,37.21248],[112.16406,37.212415],[112.16406,37.212415],[112.163871,37.212088],[112.163871,37.212088],[112.163708,37.211808],[112.163708,37.211808],[112.16348,37.211417],[112.16348,37.211417],[112.163232,37.210989],[112.163232,37.210989],[112.163009,37.210606],[112.163009,37.210606],[112.162723,37.210128],[112.162723,37.210128],[112.162631,37.209984],[112.162631,37.209984],[112.162318,37.209506],[112.162318,37.209506],[112.161277,37.208024],[112.161277,37.208024],[112.160892,37.207541],[112.160892,37.207541],[112.160628,37.207206],[112.160628,37.207206],[112.160249,37.206736],[112.160249,37.206736],[112.151795,37.199586],[112.151795,37.199586],[112.151278,37.199223],[112.151278,37.199223],[112.14806,37.196923],[112.14806,37.196923],[112.147531,37.196547],[112.147531,37.196547],[112.141672,37.192405],[112.141672,37.192405],[112.141194,37.192069],[112.141194,37.192069],[112.135544,37.188112],[112.135544,37.188112],[112.135035,37.187756],[112.135035,37.187756],[112.133411,37.186623],[112.133411,37.186623],[112.132901,37.186269],[112.132901,37.186269],[112.132068,37.185689],[112.132068,37.185689],[112.131558,37.185334],[112.131558,37.185334],[112.130035,37.184278],[112.130035,37.184278],[112.129652,37.184012],[112.129652,37.184012],[112.129273,37.183749],[112.129273,37.183749],[112.125923,37.181431],[112.125923,37.181431],[112.125412,37.181078],[112.125412,37.181078],[112.12354,37.179786],[112.12354,37.179786],[112.123029,37.179433],[112.123029,37.179433],[112.118159,37.176102],[112.118159,37.176102],[112.117642,37.175755],[112.117642,37.175755],[112.117113,37.175469],[112.117113,37.175469],[112.116613,37.175104],[112.116613,37.175104],[112.112613,37.172251],[112.112613,37.172251],[112.112007,37.171819],[112.112007,37.171819],[112.10611,37.167774],[112.10611,37.167774],[112.105505,37.167359],[112.105505,37.167359],[112.102207,37.165093],[112.102207,37.165093],[112.101699,37.164743],[112.101699,37.164743],[112.101192,37.164393],[112.101192,37.164393],[112.10068,37.164041],[112.10068,37.164041],[112.100436,37.163873],[112.100436,37.163873],[112.099925,37.16352],[112.099925,37.16352],[112.093563,37.159105],[112.093563,37.159105],[112.093055,37.158749],[112.093055,37.158749],[112.088776,37.15573],[112.088776,37.15573],[112.088273,37.155378],[112.088273,37.155378],[112.08764,37.154931],[112.08764,37.154931],[112.087134,37.154573],[112.087134,37.154573],[112.085264,37.153244],[112.085264,37.153244],[112.08476,37.152885],[112.08476,37.152885],[112.082501,37.15123]]}}
];
var lineLayer = new mapvgl.LineLayer({
width: 10,
color: 'rgba(55, 71, 226, 0.9)',
style: 'road',
enablePicked: true,
onClick: e => {
console.log(e);
}
});
view.addLayer(lineLayer);
lineLayer.setData(data);
var carlineLayer = new mapvgl.CarLineLayer({
url: 'model/car.gltf',
autoPlay: true,
scale: 200,
});
view.addLayer(carlineLayer);
carlineLayer.setData(data);
map.setDefaultCursor('default');
var coordinates = data[0].geometry.coordinates;
var point = [];
for (var i = 0; i < coordinates.length; i += 5) {
point.push(new BMapGL.Point(coordinates[i][0], coordinates[i][1]));
}
var pl = new BMapGL.Polyline(point, {strokeWeight: 1, strokeColor:'#f00000', strokeOpacity: 0});
var trackAni = new BMapGLLib.TrackAnimation(map, pl, {
overallView: true,
tilt: 70,
heading: 130,
zoom: 15,
duration: 20000,
delay: 100
});
trackAni.start();
</script>
</body>
</html>
