已被阅读 5846 次 | 文章分类:cesium | 2021-06-24 22:47
cesium可以实现摄像机绕着某一点,在水平方向上绕点旋转,这里利用zoomTo方法实现
1 效果预览
2 实现原理
利用zoomTo方法,使摄像机镜头绕着某一点,不断更新水平方向head角度,即可实现效果
zoomTo(target,HeadingPitchRange) 方法有两个参数,一个是目标对象,一个是摄像机姿态,我们轮询更新摄像机姿态就可以实现动态效果
zoomTo(target: Entity | Entity[] | EntityCollection | DataSource | ImageryLayer | Cesium3DTileset | TimeDynamicPointCloud | Promise<Entity | Entity[] | EntityCollection | DataSource | ImageryLayer | Cesium3DTileset | TimeDynamicPointCloud>, offset?: HeadingPitchRange): Promise<boolean>;
/**
* Flies the camera to the provided entity, entities, or data source.
* If the data source is still in the process of loading or the visualization is otherwise still loading,
* this method waits for the data to be ready before performing the flight.
*
* <p>The offset is heading/pitch/range in the local east-north-up reference frame centered at the center of the bounding sphere.
* The heading and the pitch angles are defined in the local east-north-up reference frame.
* The heading is the angle from y axis and increasing towards the x axis. Pitch is the rotation from the xy-plane. Positive pitch
* angles are above the plane. Negative pitch angles are below the plane. The range is the distance from the center. If the range is
* zero, a range will be computed such that the whole bounding sphere is visible.</p>
*
* <p>In 2D, there must be a top down view. The camera will be placed above the target looking down. The height above the
* target will be the range. The heading will be determined from the offset. If the heading cannot be
* determined from the offset, the heading will be north.</p>
* @param target - The entity, array of entities, entity collection, data source, Cesium3DTileset, point cloud, or imagery layer to view. You can also pass a promise that resolves to one of the previously mentioned types.
* @param [options] - Object with the following properties:
* @param [options.duration = 3.0] - The duration of the flight in seconds.
* @param [options.maximumHeight] - The maximum height at the peak of the flight.
* @param [options.offset] - The offset from the target in the local east-north-up reference frame centered at the target.
* @returns A Promise that resolves to true if the flight was successful or false if the target is not currently visualized in the scene or the flight was cancelled. //TODO: Cleanup entity mentions
*/
3 全部代码
/**
* 绕点旋转
*/
import {
Viewer,
Color,
Math as cesiumMath,
Cartesian3,
HeadingPitchRange,
} from 'cesium';
import 'cesium/Build/Cesium/Widgets/widgets.css';
import viewOption from './viewerOption';
// 创建viewer
var V = new Viewer('gisContainer', viewOption);
// 删除标志
document.getElementsByClassName('cesium-viewer-bottom')[0].style.display =
'none';
// 添加实体
var entity = V.entities.add({
position: Cartesian3.fromDegrees(114, 30),
point: {
color: Color.BLUE,
pixelSize: 10
}
});
let initialHeading = 0;
// 步长
let step = 0.05;
let setIntervalID = setInterval(intervalFn, step * 1000);
// 定义轮询函数
function intervalFn() {
if (initialHeading > 360) {
initialHeading = 0;
}
var offset = new HeadingPitchRange(
cesiumMath.toRadians(initialHeading), // 水平方向的旋转角 0-360度
-cesiumMath.toRadians(20),// 垂直平面俯仰角 // 0-90度
10000 // 相机距离地球球心的距离
);
V.zoomTo(entity, offset);
initialHeading += step;
}
其中viewoption文件,为了方便使用,单独整理并定义如下
import {
Viewer,
SceneMode,
Color,
ScreenSpaceEventHandler,
Entity,
DataSourceCollection,
Clock,
createDefaultImageryProviderViewModels,
createDefaultTerrainProviderViewModels,
EllipsoidTerrainProvider,
WebMercatorProjection,
ArcGisMapServerImageryProvider ,
SceneTransforms,
ScreenSpaceEventType,
CesiumTerrainProvider,
IonResource
} from 'cesium';
export default {
animation: false, //是否创建动画小器件,左下角仪表
baseLayerPicker: false, //是否显示图层选择器
fullscreenButton: false, //是否显示全屏按钮
geocoder: false, //是否显示geocoder小器件,右上角查询按钮
homeButton: false, //是否显示Home按钮
infoBox: false, //是否显示信息框
sceneModePicker: false, //是否显示3D/2D选择器
selectionIndicator: false, //是否显示选取指示器组件
timeline: false, //是否显示时间轴
navigationHelpButton: false, //是否显示右上角的帮助按钮
scene3DOnly: true, //如果设置为true,则所有几何图形以3D模式绘制以节约GPU资源
clock: new Clock(), //用于控制当前时间的时钟对象
selectedImageryProviderViewModel: undefined, //当前图像图层的显示模型,仅baseLayerPicker设为true有意义
imageryProviderViewModels: createDefaultImageryProviderViewModels(), //可供BaseLayerPicker选择的图像图层ProviderViewModel数组
selectedTerrainProviderViewModel: undefined, //当前地形图层的显示模型,仅baseLayerPicker设为true有意义
terrainProviderViewModels: createDefaultTerrainProviderViewModels(), //可供BaseLayerPicker选择的地形图层ProviderViewModel数组
imageryProvider: new ArcGisMapServerImageryProvider({
url: "http://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer",
}),
// skyBox : new Cesium.SkyBox({
// sources : {
// positiveX : 'Cesium-1.7.1/Skybox/px.jpg',
// negativeX : 'Cesium-1.7.1/Skybox/mx.jpg',
// positiveY : 'Cesium-1.7.1/Skybox/py.jpg',
// negativeY : 'Cesium-1.7.1/Skybox/my.jpg',
// positiveZ : 'Cesium-1.7.1/Skybox/pz.jpg',
// negativeZ : 'Cesium-1.7.1/Skybox/mz.jpg'
// }
// }),//用于渲染星空的SkyBox对象
fullscreenElement: document.body, //全屏时渲染的HTML元素,
useDefaultRenderLoop: true, //如果需要控制渲染循环,则设为true
targetFrameRate: undefined, //使用默认render loop时的帧率
showRenderLoopErrors: false, //如果设为true,将在一个HTML面板中显示错误信息
automaticallyTrackDataSourceClocks: true, //自动追踪最近添加的数据源的时钟设置
contextOptions: undefined, //传递给Scene对象的上下文参数(scene.options)
sceneMode: SceneMode.SCENE3D, //初始场景模式
mapProjection: new WebMercatorProjection(), //地图投影体系
dataSources: new DataSourceCollection()
};
QQ:3410192267 | 技术支持 微信:popstarqqsmall
Copyright ©2017 xiaobaigis.com . 版权所有 鲁ICP备17027716号