<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'/>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no'/>
<link rel='stylesheet'/>
<script src='http://ua.bigemap.com:30081/bmsdk/bigemap-gl.js/v1.1.0/bigemap-gl.js'></script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.6.0/echarts.min.js"></script>
<style>
body {
margin: 0;
padding: 0;
}
#container {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
.info{
position: fixed;
top:0;
color: #8a6d3b;
z-index: 99;
margin: 0;
background-color: #fcf8e3;
border-color: #faebcc;
left: 0;
right: 0;
text-align: center;
}
#chart{
border: 1px solid red;
height: 200px;
position: absolute;
z-index:99;
left: 0;
padding:14px;
bottom: 0;
right: 0;
background-color: rgba(241,250,250,0.3);
}
</style>
<title>模擬飛行</title>
</head>
<body>
<div class="info">
使用方向鍵控制飛行 “←” 向左飛行，“→”:向右飛行，“↑” 升高，“↓” 下降，空格暫停
</div>
<div id="chart">
</div>
<div id='container'></div>
<script>
bmgl.Config.HTTP_URL = 'http://ua.bigemap.com:30081/bmsdk/';
var viewer = new bmgl.Viewer('container', {
terrainId: 'bigemap.dc-terrain',
mapId: 'bigemap.dc-satellite',
requestRenderMode:false,
shouldAnimate:true,
});
var canvas = viewer.canvas;
canvas.setAttribute("tabindex", "0");
canvas.addEventListener("click", function () {
canvas.focus();
});
canvas.focus();
viewer.scene.globe.depthTestAgainstTerrain=true;
var config = {
init: {
lat: 30.950543,
lng: 103.0004609201,
height: 4000,
minHeight:0
},
fly:true,
requireHeight:true,
angle:{
delta: 0.5,
left:0,
down:0,
r:0,
p:0,
},
position: {},
delta: 0.00003,
};
config.position = Object.assign({}, config.init);
viewer.scene.camera.setView({
destination: bmgl.Cartesian3.fromDegrees(config.init.lng, config.init.lat, config.init.height),
// orientation: initialOrientation,
endTransform: bmgl.Matrix4.IDENTITY,
});
function getHeight(){
config.requireHeight=false;
var promise=bmgl.sampleTerrainMostDetailed(viewer.terrainProvider,[bmgl.Cartographic.fromDegrees(config.position.lng,config.position.lat)]);
bmgl.when(promise,(data)=>{
if (data&&data[0]&&data[0]['height']&&data[0]['height']>0&&config.position.height<data['0']['height']+100){
config.position.minHeight=data['0']['height']+100;
}
config.requireHeight=true;
}).otherwise(()=>{
config.requireHeight=true;
});
}
viewer.clock.onTick.addEventListener(function (e) {
getHeight();
if (config.fly){
config.position.lat += Math.cos(bmgl.Math.toRadians(config.angle.left))*config.delta;
config.position.lng += Math.sin(bmgl.Math.toRadians(config.angle.left))*config.delta;
}
if (config.angle.p&&!config.keydown){
config.angle.p>0?config.angle.p-=config.angle.delta:config.angle.p+=config.angle.delta;
}
if (config.angle.r&&!config.keydown){
config.angle.r>0?config.angle.r-=config.angle.delta:config.angle.r+=config.angle.delta;
}
// console.log(Math.max(config.position.height,config.position.minHeight));
var p=bmgl.Cartesian3.fromDegrees(config.position.lng, config.position.lat,Math.max(config.position.height,config.position.minHeight));
viewer.camera.setView({
destination:p,
orientation:{
heading:bmgl.Math.toRadians(config.angle.left),
pitch:bmgl.Math.toRadians(config.angle.p-3),
roll:-bmgl.Math.toRadians(config.angle.r)
},
endTransform:bmgl.Matrix4.IDENTITY,
});
});
document.addEventListener('keydown', function (e) {
config.keydown=true;
switch (e.keyCode) {
case 32://空格
config.fly=!config.fly;
break;
case 37://左
config.angle.left-=1;
if (config.angle.r>-30) config.angle.r-=config.angle.delta;
break;
case 38://向上
config.position.height+=10;
if (config.angle.p<30) config.angle.p+=config.angle.delta;
break;
case 39://向右
if (config.angle.r<30) config.angle.r+=config.angle.delta;
config.angle.left+=1;
break;
case 40://向下
config.position.height-=10;
if (config.angle.p>-30) config.angle.p-=config.angle.delta;
if (config.position.height<10) config.position.height=10;
break;
}
});
document.addEventListener('keyup',()=>{
config.keydown=false;
});
var option = {
tooltip : {
formatter: "{a} <br/>{c} {b}"
},
toolbox: {
show: false,
feature: {
restore: {show: true},
saveAsImage: {show: true}
}
},
series : [
{
name: '偏航角',
type: 'gauge',
center: ['20%', '50%'], // 默認全局居中
radius: '75%',
min:-30,
max:30,
splitNumber:10,
axisLine: { // 坐標軸線
lineStyle: { // 屬性lineStyle控制線條樣式
width: 8,
color:[[1, '#91c7ae']],
}
},
axisTick: { // 坐標軸小標記
length:12, // 屬性length控制線長
lineStyle: { // 屬性lineStyle控制線條樣式
color: 'auto'
}
},
splitLine: { // 分隔線
length:20, // 屬性length控制線長
lineStyle: { // 屬性lineStyle（詳見lineStyle）控制線條樣式
color: 'auto'
}
},
pointer: {
width:5
},
title: {
offsetCenter: [0, '-30%'], // x, y，單位px
},
detail: {
offsetCenter:[0,'30%'],
textStyle: { // 其余屬性默認使用全局文本樣式，詳見TEXTSTYLE
fontWeight: 'bolder',
fontSize: 18,
color:'#f1f1f1',
}
},
data:[{value: 0, name: 'deg'}]
},
{
name: '飛行高度',
type: 'gauge',
z: 3,
min: 1000,
max: 10000,
splitNumber: 10,
radius: '100%',
axisLine: { // 坐標軸線
lineStyle: { // 屬性lineStyle控制線條樣式
width: 10,
color: [[1,'#4596FB']]
}
},
axisTick: { // 坐標軸小標記
length: 15, // 屬性length控制線長
lineStyle: { // 屬性lineStyle控制線條樣式
color: 'auto'
}
},
splitLine: { // 分隔線
length: 20, // 屬性length控制線長
lineStyle: { // 屬性lineStyle（詳見lineStyle）控制線條樣式
color: 'auto'
}
},
title : {
textStyle: { // 其余屬性默認使用全局文本樣式，詳見TEXTSTYLE
fontWeight: 'bolder',
fontSize: 20,
fontStyle: 'italic'
}
},
detail : {
offsetCenter:[0,'30%'],
textStyle: { // 其余屬性默認使用全局文本樣式，詳見TEXTSTYLE
fontWeight: 'bolder',
fontSize: 18,
color:'#f1f1f1',
}
},
data:[{value: config.init.height, name: 'm'}]
},
{
name: '俯仰角',
type: 'gauge',
z: 3,
min: -30,
max:30,
center: ['75%', '55%'],
splitNumber: 10,
radius: '70%',
axisLine: { // 坐標軸線
lineStyle: { // 屬性lineStyle控制線條樣式
width: 10,
color:[[1, '#91c7ae']],
},
},
axisTick: { // 坐標軸小標記
length: 15, // 屬性length控制線長
lineStyle: { // 屬性lineStyle控制線條樣式
color: 'auto'
}
},
splitLine: { // 分隔線
length: 20, // 屬性length控制線長
lineStyle: { // 屬性lineStyle（詳見lineStyle）控制線條樣式
color: 'auto'
}
},
title : {
show:false,
textStyle: { // 其余屬性默認使用全局文本樣式，詳見TEXTSTYLE
fontWeight: 'bolder',
fontSize: 20,
fontStyle: 'italic'
}
},
detail : {
offsetCenter:[0,'30%'],
textStyle: { // 其余屬性默認使用全局文本樣式，詳見TEXTSTYLE
fontWeight: 'bolder',
fontSize: 18,
color:'#f1f1f1',
}
},
data:[{value: 0, name: 'deg'}]
},
]
};
var myChart=echarts.init(document.getElementById('chart'));
myChart.setOption(option);
setInterval(function (){
option.series[0].data[0].value =(config.angle.r).toFixed(1);
option.series[1].data[0].value =Math.floor(Math.max(Math.max(config.position.height,config.position.minHeight)));
option.series[2].data[0].value =(config.angle.p).toFixed(1);
myChart.setOption(option,true);
myChart.resize();
},100);
</script>
</body>
</html>