<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel='stylesheet' />
<script src='http://bigemap.com:9000/bigemap-gl.js/v1.1.0/bigemap-gl.js'></script>
</head>
<style>
* {
margin: 0;
padding: 0;
}
#container {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
#toolbar {
position: absolute;
background-color: white;
opacity: .7;
}
</style>
<body>
<div id="container"></div>
<div id="loadingOverlay">
<h1>Loading...</h1>
</div>
<div id="toolbar">
<table class="infoPanel">
<tbody>
<tr>
<td>
單擊bmgl窗口，然后使用鍵盤更改設置。
</td>
</tr>
<tr>
<td>頭部: <span id="heading"></span>°</td>
</tr>
<tr>
<td>← to 左/→ to 右</td>
</tr>
<tr>
<td>身體部分: <span id="pitch"></span>°</td>
</tr>
<tr>
<td>↑ to 上/↓ to 下</td>
</tr>
<tr>
<td>滾動: <span id="roll"></span>°</td>
</tr>
<tr>
<td>← + ? left/→ + ? right</td>
</tr>
</tbody>
</table>
</div>
</body>
<script>
bmgl.Config.HTTP_URL = 'http://bigemap.com:9000';
var viewer = new bmgl.Viewer('container', { mapId: 'bigemap.zhongkexingtu',requestRenderMode:false });
var canvas = viewer.canvas;
canvas.setAttribute("tabindex", "0"); // needed to put focus on the canvas
canvas.addEventListener("click", function () {
canvas.focus();
});
canvas.focus();
var scene = viewer.scene;
var camera = viewer.camera;
var controller = scene.screenSpaceCameraController;
var r = 0;
var center = new bmgl.Cartesian3();
var hpRoll = new bmgl.HeadingPitchRoll();
var hpRange = new bmgl.HeadingPitchRange();
var deltaRadians = bmgl.Math.toRadians(1.0);
var localFrames = [
{
pos: bmgl.Cartesian3.fromDegrees(-123.075, 44.045, 5000.0),
converter: bmgl.Transforms.eastNorthUpToFixedFrame,
comments: "東北向上\nlocal Frame",
},
{
pos: bmgl.Cartesian3.fromDegrees(-123.075, 44.05, 5500.0),
converter: bmgl.Transforms.localFrameToFixedFrameGenerator(
"north",
"west"
),
comments: "西北向上\nlocal Frame",
},
{
pos: bmgl.Cartesian3.fromDegrees(-123.075, 44.04, 4500.0),
converter: bmgl.Transforms.localFrameToFixedFrameGenerator(
"south",
"up"
),
comments: "南上西\nlocal Frame",
},
{
pos: bmgl.Cartesian3.fromDegrees(-123.075, 44.05, 4500.0),
converter: bmgl.Transforms.localFrameToFixedFrameGenerator(
"up",
"east"
),
comments: "上 東 北\nlocal Frame",
},
{
pos: bmgl.Cartesian3.fromDegrees(-123.075, 44.04, 5500.0),
converter: bmgl.Transforms.localFrameToFixedFrameGenerator(
"down",
"east"
),
comments: "東南下方\nlocal Frame",
},
];
var primitives = [];
var hprRollZero = new bmgl.HeadingPitchRoll();
for (var i = 0; i < localFrames.length; i++) {
var position = localFrames[i].pos;
var converter = localFrames[i].converter;
var comments = localFrames[i].comments;
var planePrimitive = scene.primitives.add(
bmgl.Model.fromGltf({
url: "/templates/glb/bmgl_Air.glb",
modelMatrix: bmgl.Transforms.headingPitchRollToFixedFrame(
position,
hpRoll,
bmgl.Ellipsoid.WGS84,
converter
),
minimumPixelSize: 128,
})
);
primitives.push({
primitive: planePrimitive,
converter: converter,
position: position,
});
var modelMatrix = bmgl.Transforms.headingPitchRollToFixedFrame(
position,
hprRollZero,
bmgl.Ellipsoid.WGS84,
converter
);
scene.primitives.add(
new bmgl.DebugModelMatrixPrimitive({
modelMatrix: modelMatrix,
length: 300.0,
width: 10.0,
})
);
var positionLabel = position.clone();
positionLabel.z = position.z + 300.0;
viewer.entities.add({
position: positionLabel,
label: {
text: comments,
font: "18px Helvetica",
fillColor: bmgl.Color.WHITE,
outlineColor: bmgl.Color.BLACK,
outlineWidth: 2,
style: bmgl.LabelStyle.FILL_AND_OUTLINE,
verticalOrigin: bmgl.VerticalOrigin.CENTER,
HorizontalOrigin: bmgl.HorizontalOrigin.RIGHT,
},
});
}
primitives[0].primitive.readyPromise.then(function (model) {
// Play and loop all animations at half-speed
model.activeAnimations.addAll({
multiplier: 0.5,
loop: bmgl.ModelAnimationLoop.REPEAT,
});
// Zoom to model
r = 2.0 * Math.max(model.boundingSphere.radius, camera.frustum.near);
controller.minimumZoomDistance = r * 0.5;
bmgl.Matrix4.multiplyByPoint(
model.modelMatrix,
model.boundingSphere.center,
center
);
var heading = bmgl.Math.toRadians(90.0);
var pitch = bmgl.Math.toRadians(0.0);
hpRange.heading = heading;
hpRange.pitch = pitch;
hpRange.range = r * 100.0;
camera.lookAt(center, hpRange);
});
document.addEventListener("keydown", function (e) {
switch (e.keyCode) {
case 40:
// pitch down
hpRoll.pitch -= deltaRadians;
if (hpRoll.pitch < -bmgl.Math.TWO_PI) {
hpRoll.pitch += bmgl.Math.TWO_PI;
}
break;
case 38:
// pitch up
hpRoll.pitch += deltaRadians;
if (hpRoll.pitch > bmgl.Math.TWO_PI) {
hpRoll.pitch -= bmgl.Math.TWO_PI;
}
break;
case 39:
if (e.shiftKey) {
// roll right
hpRoll.roll += deltaRadians;
if (hpRoll.roll > bmgl.Math.TWO_PI) {
hpRoll.roll -= bmgl.Math.TWO_PI;
}
} else {
// turn right
hpRoll.heading += deltaRadians;
if (hpRoll.heading > bmgl.Math.TWO_PI) {
hpRoll.heading -= bmgl.Math.TWO_PI;
}
}
break;
case 37:
if (e.shiftKey) {
// roll left until
hpRoll.roll -= deltaRadians;
if (hpRoll.roll < 0.0) {
hpRoll.roll += bmgl.Math.TWO_PI;
}
} else {
// turn left
hpRoll.heading -= deltaRadians;
if (hpRoll.heading < 0.0) {
hpRoll.heading += bmgl.Math.TWO_PI;
}
}
break;
default:
}
});
var headingSpan = document.getElementById("heading");
var pitchSpan = document.getElementById("pitch");
var rollSpan = document.getElementById("roll");
viewer.scene.preUpdate.addEventListener(function (scene, time) {
for (var i = 0; i < primitives.length; i++) {
var primitive = primitives[i].primitive;
var converter = primitives[i].converter;
var position = primitives[i].position;
bmgl.Transforms.headingPitchRollToFixedFrame(
position,
hpRoll,
bmgl.Ellipsoid.WGS84,
converter,
primitive.modelMatrix
);
}
});
viewer.scene.preRender.addEventListener(function (scene, time) {
headingSpan.innerHTML = bmgl.Math.toDegrees(hpRoll.heading).toFixed(
1
);
pitchSpan.innerHTML = bmgl.Math.toDegrees(hpRoll.pitch).toFixed(1);
rollSpan.innerHTML = bmgl.Math.toDegrees(hpRoll.roll).toFixed(1);
});
</script>
</html>
源碼