文档学习
摄像机由位置(position)，方向(direction)和视锥台定义。
方向与视图形成正交基准，上和右=视图x上单位矢量。
视锥由6个平面定义。每个平面都由 Cartesian4对象表示，其中x，y和z分量定义垂直于平面的单位矢量，w分量是从原点/相机位置开始的平面。
方法
1. flyTo
flyTo文档
官方demo
如果想在自己项目中运行sandcastle上的demo的话,需要引入sandCastle. 步骤如下:
- 在官网上下载源码
-
将源码文件夹(Apps)放在项目里, public下也行, assets下也行,我最终放在了assets下面.
image.png
- 在页面中引用.
import "@/assets/cesium/Apps/Sandcastle/Sandcastle-header";
demo中的所有效果
image.png
挑一些经典demo贴上来.
1.flyInACity
效果: 飞入到一个城市上空, 然后在城市上空旋转一圈
知识点:
- flyTo destination:xx, 飞入到指定地点
- complete, 飞到指定地点后的回调
- orientation 相机视角的左右方向与上下方向的指定
- easingFunction 控制在飞行过程中如何插值时间
实现: 利用flyTo实现视角飞行效果, destionation先飞入一个定位,再在complete中实现飞入后的效果, 通过修改orientation实现旋转, easingFunction放慢旋转时间.
camera.flyTo({
destination: Cesium.Cartesian3.fromDegrees(
-73.98580932617188,
40.74843406689482,
363.34038727246224
),
complete: function () {
setTimeout(function () {
camera.flyTo({
destination: Cesium.Cartesian3.fromDegrees(
-73.98585975679403,
40.75759944127251,
186.50838555841779
),
orientation: {
heading: Cesium.Math.toRadians(200.0),
pitch: Cesium.Math.toRadians(-50.0),
},
easingFunction: Cesium.EasingFunction.LINEAR_NONE,
});
}, 1000);
},
});
2.flyToRectangle
Rectangle 类
在地图上标记一个 rectangle,并飞入到该长方形
function flyToRectangle() {
const west = -90.0;
const south = 38.0;
const east = -87.0;
const north = 40.0;
const rectangle = Cesium.Rectangle.fromDegrees(west, south, east, north);
camera.flyTo({
destination: rectangle,
});
// Show the rectangle. Not required; just for show.
viewer.entities.add({
rectangle: {
coordinates: rectangle,
fill: false,
outline: true,
outlineColor: Cesium.Color.WHITE,
},
});
}
- setReferenceFrame
- DebugModelMatrixPrimitive 生成一个模型, 但是没啥用 仅供调试;
- lookAtTransform (transform, offset ) 使用目标和变换矩阵设置相机的位置和方向。偏移可以是笛卡尔坐标或航向/俯仰/范围。
这个demo没看太懂,不知道offset是怎么弄的.
function setReferenceFrame() {
const center = Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883);
const transform = Cesium.Transforms.eastNorthUpToFixedFrame(center);
// View in east-north-up frame
camera.constrainedAxis = Cesium.Cartesian3.UNIT_Z;
camera.lookAtTransform(
transform,
new Cesium.Cartesian3(-120000.0, -120000.0, 120000.0)
);
// Show reference frame. Not required.
referenceFramePrimitive = scene.primitives.add(
new Cesium.DebugModelMatrixPrimitive({
modelMatrix: transform,
length: 100000.0,
})
);
}
实用方法
1. 固定相机高度视角
/* 设置相机最小高度 */
viewer.scene.screenSpaceCameraController.minimumZoomDistance = 2000;
/* 设置相机最大高度 */
viewer.scene.screenSpaceCameraController.maximumZoomDistance = 20000;
