飞到一个地方
如果你知道位置的经纬度和高度,你可以使用相机的flyTo功能直接飞到CesiumJS中的那个位置。
viewer.camera.flyTo({
destination: Cesium.Cartesian3.fromDegrees(-117.16, 32.71, 15000.0),
});
更改相机的方向
flyTo要在完成后更改相机的方向,请添加一个orientation选项:
viewer.camera.flyTo({
destination: Cesium.Cartesian3.fromDegrees(-117.16, 32.71, 15000.0),
orientation: {
// 航向:相对于东
heading: Cesium.Math.toRadians(20.0),
// 俯仰:相对于北
pitch: Cesium.Math.toRadians(-35.0),
// 翻滚:相对于上
roll: 0.0,
},
});
获取一个点位置
如果您知道要飞往的地点的名称但不确定该地点的坐标是什么,您可以使用pickPosition来查找。
以下代码片段将在点击时打印出某个点的位置Cartesian3:
var handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
handler.setInputAction(function (event) {
var pickedPosition = viewer.scene.pickPosition(event.position);
if (Cesium.defined(pickedPosition)) {
console.log(pickedPosition);
}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
飞往已添加资源
如果你已经将资源添加到场景,并希望将相机聚焦在它上面。
viewer.flyTo 函数接受 Entity、 EntityCollection、 DataSource、 Cesium3DTilset等等。
// 添加一个矩形到场景
var rectangle = viewer.entities.add({
rectangle: {
coordinates: Cesium.Rectangle.fromDegrees(-90.0, 38.0, -87.0, 40.0),
},
});
// 将相机飞往这个矩形
viewer.flyTo(rectangle);
控制相机飞行运动
相机的一个选项camera.flyTo功能easingFunction。
以下代码示例将缓动函数设置为QUADRATIC_IN_OUT从东京晴空塔飞到西雅图太空针塔
viewer.camera.flyTo({
destination: new Cesium.Cartesian3(
-3961951.575572026,
3346492.0945766014,
3702340.5336036095
),
orientation: {
direction: new Cesium.Cartesian3(
0.8982074415844437,
-0.4393530288745287,
0.013867512433959908
),
up: new Cesium.Cartesian3(
0.12793638617798253,
0.29147314437764565,
0.9479850669701113
),
},
complete: function () {
setTimeout(function () {
viewer.camera.flyTo({
destination: new Cesium.Cartesian3(
-2304817.2435183465,
-3639113.128132953,
4688495.013644141
),
orientation: {
direction: new Cesium.Cartesian3(
0.3760550186878076,
0.9007147395506565,
0.21747547189489164
),
up: new Cesium.Cartesian3(
-0.20364591529594356,
-0.14862471084230877,
0.9676978022659334
),
},
easingFunction: Cesium.EasingFunction.QUADRATIC_IN_OUT,
duration: 5,
});
}, 1000);
},
});
锁定相机
将相机锁定到一个点,将摄像机的移动限制在某个区域或资源。
使用相机的 lookAtTransform 功能。以下代码片段将相机锁定在日本富士山:
const center = Cesium.Cartesian3.fromRadians(
2.4213211833389243,
0.6171926869414084,
3626.0426275055174
);
const transform = Cesium.Transforms.eastNorthUpToFixedFrame(center);
viewer.scene.camera.lookAtTransform(
transform,
new Cesium.HeadingPitchRange(0, -Math.PI / 4, 2900)
);
围绕一个点运行
将相机锁定到一个点后,您可以创建一个相机轨道来展示您的资源。这可以通过使用带有事件侦听器的相机功能来实现: lookAtTransform
// Lock camera to a point
const center = Cesium.Cartesian3.fromRadians(
2.4213211833389243,
0.6171926869414084,
3626.0426275055174
);
const transform = Cesium.Transforms.eastNorthUpToFixedFrame(center);
viewer.scene.camera.lookAtTransform(
transform,
new Cesium.HeadingPitchRange(0, -Math.PI / 8, 2900)
);
// Orbit this point
viewer.clock.onTick.addEventListener(function (clock) {
viewer.scene.camera.rotateRight(0.005);
});
screenSpaceCameraController(屏幕空间相机控制器)
将 ScreenSpaceCameraController 用户输入(例如鼠标和触摸)从窗口坐标转换为相机运动。它包含用于启用和禁用不同类型的输入、修改惯性量以及最小和最大缩放距离的属性。
例如,你可以使用 来 ScreenSpaceCameraController 控制是否允许摄像头进入地下:
// Disable camera collision to allow it to go underground
viewer.scene.screenSpaceCameraController.enableCollisionDetection = false;