// 旋转地图
rotateCamera: function (cesiumView, callback) {
var pitch = Cesium.Math.toRadians(-25);
// 给定飞行一周所需时间,比如10s, 那么每秒转动度数
var angle = 360 / 100;
// 给定相机距离点多少距离飞行,这里取值为5000m
var distance = 280;
var startTime = Cesium.JulianDate.fromDate(new Date());
var stopTime = Cesium.JulianDate.addSeconds(startTime, 10, new Cesium.JulianDate());
cesiumView.clock.startTime = startTime.clone(); // 开始时间
cesiumView.clock.stopTime = stopTime.clone(); // 结速时间
cesiumView.clock.currentTime = startTime.clone(); // 当前时间
cesiumView.clock.clockRange = Cesium.ClockRange.CLAMPED; // 行为方式
cesiumView.clock.clockStep = Cesium.ClockStep.SYSTEM_CLOCK; // 时钟设置为当前系统时间; 忽略所有其他设置。
// 相机的当前heading
var initialHeading = cesiumView.camera.heading;
Exection = () => {
// 当前已经过去的时间,单位s
var delTime = Cesium.JulianDate.secondsDifference(cesiumView.clock.currentTime, cesiumView
.clock.startTime);
var heading = Cesium.Math.toRadians(delTime * angle) + initialHeading;
cesiumView.scene.camera.setView({
destination: Cesium.Cartesian3.fromDegrees(center[0], center[1], 0), // 旋转中心点的坐标
orientation: {
heading: heading,
pitch: pitch
}
});
cesiumView.scene.camera.moveBackward(distance);
// 执行需要回调的函数
callback();
};
cesiumView.clock.onTick.addEventListener(Exection);
},
setInterval(rotateCamera(cesiumView, callback), 1000);
函数封装(监听用户离开自动旋转)
// 旋转地图
rotateCamera() {
var pitch = Cesium.Math.toRadians(-25);
// 给定飞行一周所需时间,比如10s, 那么每秒转动度数
var angle = 360 / 100;
// 给定相机距离点多少距离飞行,这里取值为5000m
var distance = 280;
var startTime = Cesium.JulianDate.fromDate(new Date());
var stopTime = Cesium.JulianDate.addSeconds(
startTime,
10,
new Cesium.JulianDate()
);
cesiumView.clock.startTime = startTime.clone(); // 开始时间
cesiumView.clock.stopTime = stopTime.clone(); // 结速时间
cesiumView.clock.currentTime = startTime.clone(); // 当前时间
cesiumView.clock.clockRange = Cesium.ClockRange.CLAMPED; // 行为方式
cesiumView.clock.clockStep = Cesium.ClockStep.SYSTEM_CLOCK; // 时钟设置为当前系统时间; 忽略所有其他设置。
// 相机的当前heading
var initialHeading = cesiumView.camera.heading;
var Exection = () => {
// 当前已经过去的时间,单位s
var delTime = Cesium.JulianDate.secondsDifference(
cesiumView.clock.currentTime,
cesiumView.clock.startTime
);
var heading = Cesium.Math.toRadians(delTime * angle) + initialHeading;
cesiumView.scene.camera.setView({
destination: Cesium.Cartesian3.fromDegrees(
cameras.lng,
cameras.lat,
1000
), // 旋转中心点的坐标
orientation: {
heading: heading,
pitch: pitch,
},
});
cesiumView.scene.camera.moveBackward(distance);
// 执行需要回调的函数
// callback();
};
cesiumView.clock.onTick.addEventListener(Exection);
var timeinit=0 //时间累加器
// 到规定时间后 说明用户没有操作 递归旋转函数
var timeadd=null
// 监听全局鼠标移动
document.querySelector('html').addEventListener("mousemove",()=>{
//监听移除地图旋转事件
if (cesiumView && Exection) {
cesiumView.clock.onTick.removeEventListener(Exection);
}
//当鼠标移动 清楚定时器 重新计时
clearInterval(timeadd)
timeinit=0
timeadd=setInterval(() => {
timeinit++;
if(timeinit>=10){
this.rotateCamera()
}
}, 1000);
})
},
罗盘控件
插件链接:https://pan.baidu.com/s/1quR4yRtVUFU2Qozms24hJw
提取码:2jak
引入
<script src="<%= BASE_URL %>CesiumNavigation/CesiumNavigation.umd.js"></script>
<link href="<%= BASE_URL %>CesiumNavigation/cesium-navigation.css" rel="stylesheet">
代码使用
//注册导航栏
let options = {};
// 用于在使用重置导航重置地图视图时设置默认视图控制。接受的值是Cesium.Cartographic 和 Cesium.Rectangle.
options.defaultResetView = {
destination: Cesium.Cartesian3.fromDegrees(lng, lat, height),
duration: 1,
orientation: {
// 指向
heading: heading,
// 视角
pitch: pitch,
roll: roll
}
};
// 用于启用或禁用罗盘。true是启用罗盘,false是禁用罗盘。默认值为true。如果将选项设置为false,则罗盘将不会添加到地图中。
options.enableCompass = true;
// 用于启用或禁用缩放控件。true是启用,false是禁用。默认值为true。如果将选项设置为false,则缩放控件将不会添加到地图中。
options.enableZoomControls = false;
// 用于启用或禁用距离图例。true是启用,false是禁用。默认值为true。如果将选项设置为false,距离图例将不会添加到地图中。
options.enableDistanceLegend = false;
// 用于启用或禁用指南针外环。true是启用,false是禁用。默认值为true。如果将选项设置为false,则该环将可见但无效。
options.enableCompassOuterRing = true;
CesiumNavigation.umd(viewer, options);