<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>漫游</title>
<link rel="stylesheet" href="http://bigemap.com:9000/bigemap-gl.js/v1.1.0/Widgets/widgets.css">
<script src="http://bigemap.com:9000/bigemap-gl.js/v1.1.0/bigemap-gl.js"></script>
<style>
body{
padding: 0;
margin: 0;
}
#container {
width: 100%;
height: 100%;
position: absolute;
}
.bmgl-widget-credits {
display: none;
}
.toolbox {
width: 240px;
padding: 10px;
background-color: rgba(254, 228, 199, 0.7);
border-radius: 5px;
display: flex;
flex-direction: column;
justify-content: space-around;
position: absolute;
top: 10px;
left: 50px;
z-index: 1;
}
.toolbox div {
line-height: 30px;
display: flex;
margin: 2px 0;
}
.toolbox div label {
margin-left: 10px;
}
.toolbox div select {
border: 0;
border-radius: 5px;
}
</style>
</head>
<body>
<div id="container">
<div class="toolbox">
<div>
<input type="range" value="200" name="高度" id="gdinput" min="10" max="500" step="1" oninput="change('gd')">
<label for="gdinput">高度：200</label>
</div>
<div>
<input type="range" value="-23" name="角度" id="jdinput" min="-89" max="-1" step="1" oninput="change('jd')">
<label for="jdinput">角度：-23</label>
</div>
<div>
<input type="range" value="-90" name="航向角" id="hxinput" min="-90" max="180" step="1" oninput="change('hx')">
<label for="hxinput">航向角：-90</label>
</div>
<div>
<input type="range" value="100" name="速度" id="sdinput" min="10" max="500" step="1" oninput="change('sd')">
<label for="sdinput">速度：100</label>
</div>
<div>
<label for="focussing">视角：</label>
<select onchange="sethxValue()" id="VisualAngle">
<option value="left">左测面</option>
<option value="right">右测面</option>
<option value="after" selected>后测</option>
<option value="before">前测</option>
</select>
</div>
<div>
<label for="focussing">是否聚焦：</label>
<select onchange="setlookat()" id="focussing">
<option value="1">聚焦</option>
<option value="2">不聚焦</option>
</select>
</div>
</div>
</div>
<script src="http://www.bigemap.com/Public/tg/roam.js"></script>
<script>
// 回放实例
var lb;
//高度
var gd = 200
//角度
var jd = -23
//速度
var sd = 100
// 航向角
var hx = -90
var lookat = true
var carshow = true
var replay = true
var hxValues = {}
var viewer
function init_earth(params) {
bmgl.Config.HTTP_URL = "http://bigemap.com:9000";
// u
viewer = new bmgl.Viewer("container", {
mapId: "bigemap.zhongkexingtu",
requestRenderMode: false,
// timeline: true
});
//定义线段数组
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, // 角度
gd: gd, // 高度
hx: hx, // 航向
lookat: lookat, // 控制是否聚焦模型
replay: replay,
carshow: carshow,
// hxValue: 'after', // 控制面
carurl: '/templates/glb/bmgl_Air.glb'
}
//初始化回放对象
lb = new Roam(viewer, linearr, config)
lb.move()
for(let key in lb.hxValue) {
hxValues[lb.hxValue[key]] = key
}
}
init_earth()
var change = (type) => {
switch (type) {
case 'gd':
lb.setgd(event.target.value)
break;
case 'jd':
lb.setjd(event.target.value)
break;
case 'sd':
lb.setsd(event.target.value)
break;
case 'hx':
var direction = hxValues[Math.round(event.target.value / 10) * 10]
if(direction) {
document.querySelector('#VisualAngle').value = direction
}
lb.sethx(event.target.value)
break;
}
var nextElementSibling = event.target.nextElementSibling
nextElementSibling.innerText = nextElementSibling.innerText.replace(/(：)(.*)/, function(match, p1, p2) {
return p1 + event.target.value; // 保留“：”并添加" "字符串
});
}
var setlookat = () => {
if (event.target.value == 1) {
lb.setlookat(true)
} else {
lb.setlookat(false)
}
}
var sethxValue = () => {
hx = lb.hxValue[event.target.value]
var hxinput = document.querySelector('#hxinput')
hxinput.value = hx
hxinput.nextElementSibling.innerText = hxinput.nextElementSibling.innerText.replace(/(：)(.*)/, function(match, p1, p2) {
return p1 + hx; // 保留“：”并添加" "字符串
});
lb.sethxValue(event.target.value)
}
</script>
</body>
</html>
源码