最终实现效果如下 (1 2 3 4实现功能 , 5为拓展)
1.1 下载后可以用vscode打开 , 目前我们用到了下面俩个文件夹
![](https://i-blog.csdnimg.cn/blog_migrate/39d8c5b37f72f50d4cb0810da190ace6.png)
1.2 注册拿到token
![](https://i-blog.csdnimg.cn/blog_migrate/2ae3dc0f27abdb47ec03870d25bb2a51.png)
111
2 新建一个cesium地图案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../Cesium/Cesium.js"></script>
<link rel="stylesheet" href="../Cesium/Widgets/widgets.css">
<style>
html,
body{
margin: 0;padding: 0;
}
</style>
</head>
<body>
<div id ="hyyCesium"></div>
<script>
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIxOGJmZmVjMy1hNGFiLTRmZDctODdkYy1kYmE3NzliZDI5NDciLCJpZCI6MTgyODQyLCJpYXQiOjE3MDE4NjM1NTJ9.2jTKo5Dx3V6aeYL-fZc1hcwbKXurR0xLQAoxrconvP8'
// 第一参数放html的id,第二取消了自动动画和时间轴
const viewer = new Cesium.Viewer('hyyCesium',{animation:false , timeline:false})
</script>
</body>
</html>
2.1 目前文件夹结构如下
![](https://i-blog.csdnimg.cn/blog_migrate/482c8302a060e672b0753e55b3226c7a.png)
2.2 目前效果如下
![](https://i-blog.csdnimg.cn/blog_migrate/b1ec6f4280ed97fc9026eab8052629be.gif)
注意 : 发现存在跨域问题 , 且有时候刷新地图也不显示 , 我跳转到了自己的跨域浏览器
![](https://i-blog.csdnimg.cn/blog_migrate/d1fd63f33ed2f0ee92eed051f4c700e1.png)
![](https://i-blog.csdnimg.cn/blog_migrate/a4e15b298761361ab59a6509acab917a.png)
3 flyTo缓缓跳转到故宫
<script>
...
// 其实地图是不会移动的 , 改变的只是相机的视角
const position = Cesium.Cartesian3.fromDegrees(116.39,39.911,1500) //必须要设置一个高度!
// flyto比setview跳转效果更好 , 因为有缓冲时间
viewer.camera.flyTo({
destination:position,
orientation:{
heading:Cesium.Math.toRadians(0), //沿着y轴旋转 , 0就是正北 , -90就是俯视向下
pitch:Cesium.Math.toRadians(-90), //沿着x轴旋转
roll:0, //沿着z轴旋转的角度
},
duration:5 //有飞行的过渡效果
})
</script>
![](https://i-blog.csdnimg.cn/blog_migrate/75dc6cb5decc46229b93b26cadcbad9c.gif)
4 viewBundingSphere直接跳转到飞机身上 , 视角定死在飞机身上 , 滚轮可放大缩小不能看其他区域
<script>
...
// 其实地图是不会移动的 , 改变的只是相机的视角
const position = Cesium.Cartesian3.fromDegrees(116.39,39.911,1500) //要设置一个高度
// 直接跳转到飞机身上 , 视角定死在飞机身上 , 滚轮可放大缩小不能看其他
const orientation = Cesium.Transforms.headingPitchRollQuaternion(position,new Cesium.HeadingPitchRoll(-90,0,0)) //用来控制飞机的朝向
const entity = viewer.entities.add({
position:position,
orientation:orientation,
model:{
uri:'../Cesium/models/CesiumAir/Cesium_Air.glb', // 注意这里是uri
minimumPixeSize:100, // 模型缩放的一些属性
maximumScale:100000,
show:true
}
})
viewer.camera.viewBoundingSphere(new Cesium.BoundingSphere(position,20),new Cesium.HeadingPitchRange(0,0,0)) //将相机视角定位到指定的位置并设置视野范围
</script>
![](https://i-blog.csdnimg.cn/blog_migrate/bd6725f62b0619dc9906da2c19820927.gif)
5 拓展 : lookAt直接跳转(无缓冲时间)到故宫 , 围绕故宫旋转 , 滚轮可放大缩小不能看其他区域
<script>
...
// 其实地图是不会移动的 , 改变的只是相机的视角
// lookAt直接跳到故宫 , 旋转也是以故宫视角为主 , 滚轮可放大缩小不能看其他
const center = Cesium.Cartesian3.fromDegrees(116.39,39.91,500)
const heading = Cesium.Math.toRadians(50) // 沿着y轴旋转 , 0就是正北 , -90就是俯视向下
const pitch = Cesium.Math.toRadians(-90) //控制视口的上下旋转 === 沿着x轴旋转
const range = 2500
viewer.camera.lookAt(center,new Cesium.HeadingPitchRange(heading , pitch , range)) //让相机看向指定位置,并设置相机高度、俯仰角和方位角
</script>
![](https://i-blog.csdnimg.cn/blog_migrate/e01238b4c1f860709cc765db6df8ca82.gif)