<!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://bigemap.com:9000/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://bigemap.com:9000';
var viewer = new bmgl.Viewer('container', { mapId: 'bigemap.zhongkexingtu' });
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;
//關閉地球默認選擇 平移 事件
scene.screenSpaceCameraController.enableRotate = false;
scene.screenSpaceCameraController.enableTranslate = false;
scene.screenSpaceCameraController.enableZoom = false;
scene.screenSpaceCameraController.enableTilt = false;
scene.screenSpaceCameraController.enableLook = false;
// 創建變量記錄當前鼠標位置，然后標記并跟隨Camera移動軌跡：
var startMousePosition;
var mousePosition;
var flags = {
looking: false,
moveForward: false,
moveBackward: false,
moveUp: false,
moveDown: false,
moveLeft: false,
moveRight: false,
};
// 添加一個事件控制用戶設置標記，當鼠標左鍵被點擊的時候，用于記錄當前鼠標的位置：
var handler = new bmgl.ScreenSpaceEventHandler(canvas);
//設置點擊事件
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);
// 創建鍵盤事件控制用戶切換Camera移動標記。我們為下列按鍵和行為設置了標記：
// 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
);
// 現在當標記表明事件發生為true是，我們更新（update）camera。我們新增 ** onTick的監聽事件在clock中：
viewer.clock.onTick.addEventListener(function (clock) {
var camera = viewer.camera;
// 接下來，我們讓Camera指向鼠標指向的方向。在變量聲明之后添加下列代碼到事件監聽函數
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方法只需要一個距離參數（米）
// 用于移動Camera的距離。當每一個按鍵被按下時，
// Camera就會在球體表面移動固定的距離。Camera離地面越近，移動的速度就越慢。
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>