<!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%;
}
.bmgl-widget-credits {
display: none
}
</style>
<title>Google Map Streets</title>
</head>
<body>
<div id='container'></div>
<script>
bmgl.Config.HTTP_URL = 'http://ua.bigemap.com:30081/bmsdk/';
var viewer = new bmgl.Viewer('container', { mapId: 'bigemap.dc-satellite' });
var scene = viewer.scene;
var canvas = viewer.canvas;
canvas.setAttribute("tabindex", "0"); // needed to put focus on the canvas
canvas.onclick = function () {
canvas.focus();
};
var ellipsoid = scene.globe.ellipsoid;
//關(guān)閉地球默認(rèn)選擇 平移 事件
scene.screenSpaceCameraController.enableRotate = false;
scene.screenSpaceCameraController.enableTranslate = false;
scene.screenSpaceCameraController.enableZoom = false;
scene.screenSpaceCameraController.enableTilt = false;
scene.screenSpaceCameraController.enableLook = false;
// 創(chuàng)建變量記錄當(dāng)前鼠標(biāo)位置，然后標(biāo)記并跟隨Camera移動(dòng)軌跡：
var startMousePosition;
var mousePosition;
var flags = {
looking: false,
moveForward: false,
moveBackward: false,
moveUp: false,
moveDown: false,
moveLeft: false,
moveRight: false,
};
// 添加一個(gè)事件控制用戶設(shè)置標(biāo)記，當(dāng)鼠標(biāo)左鍵被點(diǎn)擊的時(shí)候，用于記錄當(dāng)前鼠標(biāo)的位置：
var handler = new bmgl.ScreenSpaceEventHandler(canvas);
//設(shè)置點(diǎn)擊事件
handler.setInputAction(function (movement) {
flags.looking = true;
mousePosition = startMousePosition = bmgl.Cartesian3.clone(
movement.position
);
}, bmgl.ScreenSpaceEventType.LEFT_DOWN);
handler.setInputAction(function (movement) {
mousePosition = movement.endPosition;
}, bmgl.ScreenSpaceEventType.MOUSE_MOVE);
handler.setInputAction(function (position) {
flags.looking = false;
}, bmgl.ScreenSpaceEventType.LEFT_UP);
// 創(chuàng)建鍵盤事件控制用戶切換Camera移動(dòng)標(biāo)記。我們?yōu)橄铝邪存I和行為設(shè)置了標(biāo)記：
// w Camera向前。
// s Camera向后。
// a Camera向左。
// d Camera向右。
// q Camera向上。
// e Camera向下。
function getFlagForKeyCode(keyCode) {
switch (keyCode) {
case "W".charCodeAt(0):
return "moveForward";
case "S".charCodeAt(0):
return "moveBackward";
case "Q".charCodeAt(0):
return "moveUp";
case "E".charCodeAt(0):
return "moveDown";
case "D".charCodeAt(0):
return "moveRight";
case "A".charCodeAt(0):
return "moveLeft";
default:
return undefined;
}
}
document.addEventListener(
"keydown",
function (e) {
var flagName = getFlagForKeyCode(e.keyCode);
if (typeof flagName !== "undefined") {
flags[flagName] = true;
}
},
false
);
document.addEventListener(
"keyup",
function (e) {
var flagName = getFlagForKeyCode(e.keyCode);
if (typeof flagName !== "undefined") {
flags[flagName] = false;
}
},
false
);
// 現(xiàn)在當(dāng)標(biāo)記表明事件發(fā)生為true是，我們更新（update）camera。我們新增 ** onTick的監(jiān)聽事件在clock中：
viewer.clock.onTick.addEventListener(function (clock) {
var camera = viewer.camera;
// 接下來(lái)，我們讓Camera指向鼠標(biāo)指向的方向。在變量聲明之后添加下列代碼到事件監(jiān)聽函數(shù)
if (flags.looking) {
var width = canvas.clientWidth;
var height = canvas.clientHeight;
// Coordinate (0.0, 0.0) will be where the mouse was clicked.
var x = (mousePosition.x - startMousePosition.x) / width;
var y = -(mousePosition.y - startMousePosition.y) / height;
var lookFactor = 0.05;
camera.lookRight(x * lookFactor);
camera.lookUp(y * lookFactor);
}
//moveForward、moveBackward、moveUp、moveDown、moveLeft和moveRight方法只需要一個(gè)距離參數(shù)（米）
// 用于移動(dòng)Camera的距離。當(dāng)每一個(gè)按鍵被按下時(shí)，
// Camera就會(huì)在球體表面移動(dòng)固定的距離。Camera離地面越近，移動(dòng)的速度就越慢。
var cameraHeight = ellipsoid.cartesianToCartographic(camera.position)
.height;
var moveRate = cameraHeight / 100.0;
if (flags.moveForward) {
camera.moveForward(moveRate);
}
if (flags.moveBackward) {
camera.moveBackward(moveRate);
}
if (flags.moveUp) {
camera.moveUp(moveRate);
}
if (flags.moveDown) {
camera.moveDown(moveRate);
}
if (flags.moveLeft) {
camera.moveLeft(moveRate);
}
if (flags.moveRight) {
camera.moveRight(moveRate);
}
});
</script>
</body>
</html>