- 首先是页面基础模版
- 然后创建一个笛卡尔坐标
- 当打开页面直接跳转到这个坐标,就用
viewer.camera.xxxxx()这函数,这里的xxx可以替换成代码里的模式
<template>
<div id="cesiumContainer">
</div>
</template>
<script setup>
import { ref ,onMounted} from 'vue'
import * as Cesium from 'cesium'
onMounted(()=>{
// Cesium Token
Cesium.Ion.defaultAccessToken = "这里写自己的token"
const viewer = new Cesium.Viewer("cesiumContainer",{})
// 经纬度 转 笛卡尔坐标
const position = Cesium.Cartesian3.fromDegrees(120,30,2000)
// setView 通过自定义目的地(方向),直接跳转到目的地(没有动画)
// ------------ 其他的相机方式只需要更换这里
viewer.camera.setView({
destination: position,
orientation: { // 默认 (0,-90,0)
heading: Cesium.Math.toRadians(0),
pitch: Cesium.Math.toRadians(-90),
roll: Cesium.Math.toRadians(0)
}
// -------------
// 带有飞行动画,可以设置角度 和 飞行时间
/*
viewer.camera.flyTo({
destination:position,
orientation: {
heading: Cesium.Math.toRadians(0),
pitch: Cesium.Math.toRadians(-50),
roll: Cesium.Math.toRadians(0)
},
duration:3, // 单位秒
})
*/
// 固定相机 lookAt (不能改变位置,可以选择视角)
/*
这是重新创建了一个笛卡尔坐标
const position2 = Cesium.Cartesian3.fromDegrees(120,30);
viewer.camera.lookAt(
position2,
new Cesium.HeadingPitchRange(
Cesium.Math.toRadians(0),
Cesium.Math.toRadians(-90),
2000
)
);
*/
}) // 这是生命周期的结束括号
</script>
<style scoped>
#cesiumContainer {
position:absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
</style>