<!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>
<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;
padding:14px;
margin: 0;
background-color: #fcf8e3;
border-color: #faebcc;
left: 0;
right: 0;
text-align: center;
}
</style>
<title>模擬飛行</title>
</head>
<body>
<div class="info">
使用方向鍵控制飛行 “←” 向左飛行，“→”:向右飛行，“↑” 升高，“↓” 下降，若控制失效，請單擊本處獲得焦點
</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',
requestRenderMode:false,
mapId: 'bigemap.dc-tian-w-satellite',
shouldAnimate:true,
});
viewer.scene.globe.depthTestAgainstTerrain=true;
viewer.screenSpaceEventHandler.removeInputAction(bmgl.ScreenSpaceEventType.LEFT_CLICK);
var canvas = viewer.canvas;
canvas.setAttribute("tabindex", "0");
canvas.addEventListener("click", function () {
canvas.focus();
});
canvas.focus();
var config = {
init: {
lat: 30.950543,
lng: 103.0004609201,
height: 4000,
},
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),
endTransform: bmgl.Matrix4.IDENTITY,
});
var plane = viewer.entities.add({
position: bmgl.Cartesian3.fromDegrees(config.init.lng, config.init.lat, config.init.height),
orientation: bmgl.Transforms.headingPitchRollQuaternion(bmgl.Cartesian3.fromDegrees(config.position.lng, config.position.lat, config.position.height), new bmgl.HeadingPitchRoll(config.angle.left-90, 0, 0)),
model: {
maximumScale: 2000,
minimumPixelSize: 300,
uri: '/templates/glb/bmgl_Air.glb',
}
});
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){
if (!config.position.oldHeight) config.position.oldHeight=config.position.height;
config.position.height=data['0']['height']+100;
}
config.requireHeight=true;
}).otherwise(()=>{
config.requireHeight=true;
});
}
viewer.trackedEntity = plane;
viewer.clock.onTick.addEventListener(function (e) {
getHeight();
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;
}
plane.position = bmgl.Cartesian3.fromDegrees(config.position.lng, config.position.lat, config.position.height);
plane.orientation=bmgl.Transforms.headingPitchRollQuaternion(bmgl.Cartesian3.fromDegrees(config.position.lng, config.position.lat, config.position.height), new bmgl.HeadingPitchRoll.fromDegrees(config.angle.left-90, config.angle.p,config.angle.r));
});
document.addEventListener('keydown', function (e) {
config.keydown=true;
switch (e.keyCode) {
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;
});
</script>
</body>
</html>