<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8' />
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<link href='http://ua.bigemap.com:30081/bmsdk/bigemap-gl.js/v1.1.0/Widgets/widgets.css' 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-tian-w-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;
//关闭地球默认选择 平移 事件
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>