<!DOCTYPE html>
<html>
<>
<meta charset="UTF-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<link href="http://bigemap.com:9000/bigemap-gl.js/v1.1.0/Widgets/widgets.css" rel="stylesheet" />
<script src="http://bigemap.com:9000/bigemap-gl.js/v1.1.0/bigemap-gl.js"></script>
<script src="http://www.bigemap.com:9000/bigemap.js/v2.1.0/bigemap.js"></script>
<script src="http://www.bigemap.com/Public/common/js/jquery.min.js"></script>
<script type="text/javascript" src="http://www.bigemap.com/mapoffline/js/togeojson.js"></script>
<script src="https://unpkg.com/@turf/turf/turf.min.js"></script>
<script src="http://www.bigemap.com/my/js/GeometryUtil.js"></script>
<script src="http://www.bigemap.com/my/js/movemarker.js"></script>
<script src="http://www.bigemap.com/my/Lineback.js"></script>
<style>
body {
margin: 0;
padding: 0;
}
#container {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
.bmgl-widget-credits {
display: none;
}
#map {
display: none;
opacity: 0;
}
.toolbox {
height: 300px;
width: 200px;
background-color: bisque;
display: flex;
flex-direction: column;
position: absolute;
top: 10px;
left: 50px;
z-index: 1;
}
.toolbox>li {
margin-top: 20px;
display: flex;
}
.toolbox>li>span {
margin: 0 10px;
}
.toolbox>li>div>button {
padding: 0 10px;
cursor: pointer;
margin: 3px;
}
</style>
<title>Google Map Streets</title>
</head>
<body>
<div id="container"></div>
<div id="map"></div>
<div class="toolbox">
<li>
<span>高度：</span>
<div>
<button onClick="jian('gd')"> - </button>
<span id="gdspan">50</span>
<button onClick="add('gd')">+</button>
</div>
</li>
<li>
<span>角度：</span>
<div>
<button onClick="jian('jd')">-</button>
<span id="jdspan">-3</span>
<button onClick="add('jd')">+</button>
</div>
</li>
<li>
<span>速度：</span>
<div>
<button onClick="jian('sd')">-</button>
<span id="sdspan">100</span>
<button onClick="add('sd')">+</button>
</div>
</li>
<li>
<span>是否聚焦：</span>
<div>
<select onchange="setlookat(this.value)">
<option value="1">聚焦</option>
<option value="2">不聚焦</option>
</select>
</div>
</li>
</div>
<script>
//高度
let gd = 200
//角度
let jd = -23
//速度
let sd = 100
let lookat = true
let carshow = true
let replay = true
let my
function init_earth(params) {
bmgl.Config.HTTP_URL = "http://bigemap.com:9000";
BM.Config.HTTP_URL = "http://bigemap.com:9000";
var viewer = new bmgl.Viewer("container", {
mapId: "bigemap.zhongkexingtu",
requestRenderMode: false,
});
var map = BM.map("map", "bigemap.zhongkexingtu", {
center: [30.4, 104.5],
zoom: 7,
zoomControl: true,
attributionControl: false,
});
//定义线段数组
let linearr = [
[
24.052854180336,
117.77287423610687
],
[
24.052736163139343,
117.76613116264343
],
[
24.052687883377075,
117.76526212692261
],
[
24.052467942237854,
117.76374399662018
],
[
24.05210316181183,
117.76218295097351
],
[
24.050960540771484,
117.75919497013092
],
[
24.049775004386902,
117.75666296482086
],
[
24.049168825149536,
117.75541305541992
],
[
24.048621654510498,
117.75388956069946
],
[
24.048272967338562,
117.75229632854462
],
[
24.0480637550354,
117.7503114938736
],
[
24.0481173992157,
117.7483856678009
],
[
24.048213958740234,
117.74764001369476
],
[
24.04828369617462,
117.74726450443268
],
[
24.048482179641724,
117.7462238073349
],
[
24.049023985862732,
117.74337530136108
],
[
24.049415588378906,
117.74092376232147
],
[
24.049479961395264,
117.73954510688782
],
[
24.049442410469055,
117.73835957050323
],
[
24.049270749092102,
117.73713111877441
],
[
24.049131274223328,
117.7360475063324
],
[
24.04884159564972,
117.734534740448
],
[
24.04835343360901,
117.73132145404816
],
[
24.047951102256775,
117.72918105125427
],
[
24.04758632183075,
117.72697627544403
],
[
24.04729127883911,
117.7253133058548
],
[
24.04681384563446,
117.72384345531464
],
[
24.04608964920044,
117.72271156311035
],
[
24.04536545276642,
117.72183179855347
],
[
24.04434621334076,
117.72098422050476
],
[
24.03879404067993,
117.71749198436737
]
]
let config = {
sd:sd,
jd:jd,
lookat:lookat,
replay:replay,
carshow:carshow,
// carurl:'./glb/car.glb'
}
//初始化回放对象
lb = new Lineback(viewer, map, linearr, config)
lb.move()
}
function jian(type) {
console.log(type);
switch (type) {
case 'gd':
gd -= 100
lb.setgd(gd)
break;
case 'jd':
jd -= 1
lb.setjd(jd)
break;
case 'sd':
sd -= 100
lb.setsd(sd)
break;
}
fz()
}
function add(type) {
console.log(type);
switch (type) {
case 'gd':
gd += 100
lb.setgd(gd)
break;
case 'jd':
lb.setjd(jd)
jd += 1
break;
case 'sd':
sd += 100
lb.setsd(sd)
break;
}
fz()
}
function setlookat(val){
console.log(val);
if (val == 1) {
lb.setlookat(true)
}else{
lb.setlookat(false)
}
}
function fz() {
document.getElementById('gdspan').innerText = gd
document.getElementById('jdspan').innerText = jd
document.getElementById('sdspan').innerText = sd
}
fz()
init_earth()
</script>
</body>
</html>
源码