Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

The problem of escaping from the angle of view #6856

Closed
miniergouzi opened this issue Jul 30, 2018 · 4 comments
Closed

The problem of escaping from the angle of view #6856

miniergouzi opened this issue Jul 30, 2018 · 4 comments

Comments

@miniergouzi
Copy link

q hl_dr bltv o8ab1oamh9

@hpinkos
Copy link
Contributor

hpinkos commented Jul 30, 2018

@miniergouzi Can you please provide some more information about how to reproduce this bug?

@miniergouzi
Copy link
Author

miniergouzi commented Jul 31, 2018

var viewer = new Cesium.Viewer('cesiumContainer');
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 = viewer.scene.globe.ellipsoid; // 获取地球球体对象

// 禁用默认的事件处理程序
// 如果为真,则允许用户旋转相机。如果为假,相机将锁定到当前标题。此标志仅适用于2D和3D。
scene.screenSpaceCameraController.enableRotate = false;
// 如果为true,则允许用户平移地图。如果为假,相机将保持锁定在当前位置。此标志仅适用于2D和Columbus视图模式。
scene.screenSpaceCameraController.enableTranslate = false;
// 如果为真,允许用户放大和缩小。如果为假,相机将锁定到距离椭圆体的当前距离
scene.screenSpaceCameraController.enableZoom = false;
// 如果为真,则允许用户倾斜相机。如果为假,相机将锁定到当前标题。这个标志只适用于3D和哥伦布视图。
scene.screenSpaceCameraController.enableTilt = false;
// 如果为true,则允许用户使用免费外观。如果错误,摄像机视图方向只能通过转换或旋转进行更改。此标志仅适用于3D和哥伦布视图模式。
scene.screenSpaceCameraController.enableLook = false;

// 鼠标开始位置
var startMousePosition;
// 鼠标位置
var mousePosition;
// 鼠标状态标志
var flags = {
looking : false,
moveForward : false, // 向前
moveBackward : false, // 向后
moveUp : false,// 向上
moveDown : false,// 向下
moveLeft : false,// 向左
moveRight : false,// 向右
lookUp:false, //向上平移
lookDown:false
};

var handler = new Cesium.ScreenSpaceEventHandler(canvas);

// 接收用户鼠标(手势)事件
handler.setInputAction(function(movement) {
// 处理鼠标按下事件
// movement: 接收值为一个对象,含有鼠标单击的x,y坐标
flags.looking = true;
// 设置鼠标当前位置
mousePosition = startMousePosition = Cesium.Cartesian3.clone(movement.position);
}, Cesium.ScreenSpaceEventType.LEFT_DOWN);

handler.setInputAction(function(movement) {
// 处理鼠标移动事件
// 更新鼠标位置
mousePosition = movement.endPosition;
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

handler.setInputAction(function(position) {
// 处理鼠标左键弹起事件
flags.looking = false;
}, Cesium.ScreenSpaceEventType.LEFT_UP);

// 根据键盘按键返回标志
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';
case 'Z'.charCodeAt(0):
return 'lookDown';
case 'C'.charCodeAt(0):
return 'lookUp';
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);

// 对onTick事件进行监听
// onTick事件:根据当前配置选项,从当前时间提前计时。应该每个帧都调用tick,而不管动画是否发生。
// 简单的说就是每过一帧都会执行这个事件
viewer.clock.onTick.addEventListener(function(clock) {
// 获取实例的相机对象
var camera = viewer.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);
}



// 获取相机高度
//cartesianToCartographic(): 将笛卡尔坐标转化为地图坐标,方法返回Cartographic对象,包含经度、纬度、高
var cameraHeight = ellipsoid.cartesianToCartographic(camera.position).height;
var moveRate = cameraHeight /20;

//视角锁定平面
//camera.setView({destination:camera.positionWC,orientation:{heading:camera.heading,pitch:camera.pitch,roll:0.0}});


camera.setView({
    destination:camera.positionWC,
    orientation:{
        heading:camera.heading,
        pitch:camera.pitch,
    }
});

viewer.camera.moveStart.addEventListener(function(moveStartPosition){});
// 如果按下键盘就移动
if (flags.moveForward) {
    camera.moveForward(moveRate);
}
if (flags.moveBackward) {
    camera.moveBackward(moveRate);
}
if (flags.moveUp) {
    camera.moveUp(moveRate/5);
}
if (flags.moveDown) {
    camera.moveDown(moveRate/5);
}
if (flags.moveLeft) {
    camera.lookLeft(0.02);
}
if (flags.moveRight) {
    camera.lookRight(0.02);
}
if (flags.lookDown){
    camera.lookDown(0.01)
}
if (flags.lookUp) {
    camera.lookUp(0.01)
}

});

In the state of roaming, when the angle of view is tilted

Dear Ms.hpinkos! When I met this problem, I looked at Cesium related API, but I didn't find a solution. I don't know whether the problem is a bug in Cesium itself or my own code is not perfect.

@hpinkos

@miniergouzi
Copy link
Author

漫游动作中:镜头垂直向下或者视角向下倾斜时镜头陷入地面,当视角陷入一定程度镜头自动弹出地表弹出高度与陷入地面高度应该相同或者陷入地面之后不进行任何操作镜头也会弹出地表。有没有什么解决方案使镜头在地表运动从而限制镜头陷地。

@hpinkos
Copy link
Contributor

hpinkos commented Jul 31, 2018

@miniergouzi I believe this is a duplicate of this bug: #5837
I'm going to close this issue. I'll make a comment in #5837 so we can notify you when it's fixed. Thanks!

# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants