new Cesium.Camera (scene)
摄像机由位置,方向和视锥台定义。
方向与视图形成正交基准,上和右=视图x上单位矢量。
视锥由6个平面定义。每个平面都由 Cartesian4 对象表示,其中x,y和z分量定义垂直于平面的单位矢量,w分量是从原点/相机位置开始的平面。
官方文档示例:(链接:Camera - Cesium Documentation)
// Create a camera looking down the negative z-axis, positioned at the origin,
// with a field of view of 60 degrees, and 1:1 aspect ratio.
var camera = new Cesium.Camera(scene);
camera.position = new Cesium.Cartesian3();
camera.direction = Cesium.Cartesian3.negate(Cesium.Cartesian3.UNIT_Z, new Cesium.Cartesian3());
camera.up = Cesium.Cartesian3.clone(Cesium.Cartesian3.UNIT_Y);
camera.frustum.fov = Cesium.Math.PI_OVER_THREE;
camera.frustum.near = 1.0;
camera.frustum.far = 2.0;
示例:
使用Vue 3 <script setup>
语法和CesiumJS库来创建一个3D地球视图的示例。CesiumJS是一个用于创建3D地球、2D地图和2.5D视图的开源JavaScript库,广泛用于地理信息系统(GIS)和地球科学可视化。(这里用到的cesium版本为1.99)
引入依赖(其中注意要将token换成自己的):
-
Cesium: 引入Cesium库,这是主要的地图渲染和交互功能提供者。
-
Cartographic: ,在下列代码中并没有直接使用
Cartographic
,Cesium的Cartographic
类用于表示地理坐标(经度、纬度和高度),但在这个例子中,使用了Cesium.Cartesian3.fromDegrees
来从经纬度创建笛卡尔坐标。 -
Viewer: 引入Cesium的
Viewer
类,这是创建和管理Cesium视图的主要接口。
vue组件:
-
<script setup>
: Vue 3的Composition API的语法糖,允许你使用更简洁的语法来编写组件逻辑。 -
onMounted
: Vue的生命周期钩子,用于在组件挂载到DOM后执行代码。这里,它用于初始化Cesium的Viewer。
<script setup>
import { onMounted } from 'vue'
import * as Cesium from 'cesium'
import Cartographic from 'cesium/Source/Core/Cartographic';
import Viewer from 'cesium/Source/Widgets/Viewer/Viewer';
onMounted(() => {
Cesium.Ion.defaultAccessToken = 'your token'
// viewer是所有api的开始
const viewer = new Cesium.Viewer('cesiumContainer', {});
const position1 = Cesium.Cartesian3.fromDegrees(110,20,20000);
1.setView通过定义相机目的地,直接跳转到目的地
直接跳转到指定位置
viewer.camera.setView({
destination: position1,
//视角,默认是(0,-90,0)
orientation: {
heading: Cesium.Math.toRadians(0),
pitch: Cesium.Math.toRadians(0),
Roll: Cesium.Math.toRadians(0)
}
})
2.flyTo快速切换视角,带飞行动画,可以设置飞行时长
带有动画效果地飞到指定位置
viewer.camera.flyTo({
destination: position1,
//视角,默认是(0,-90,0)
orientation: {
heading: Cesium.Math.toRadians(0),
pitch: Cesium.Math.toRadians(-90),
Roll: Cesium.Math.toRadians(0)
},
//飞行时间,单位秒
duration: 3,
})
3.lookAt将视角固定在所设置的目的地点上,可以任意旋转视角,但是不会改变位置
使用viewer.camera.lookAt
方法将相机视角对准指定的位置(position2
),并设置了一个朝向(通过HeadingPitchRange
对象指定)。这里,朝向设置为朝向正北(heading为0度),向下看(pitch为-90度),并保持距离地面20000米。
const position2 = Cesium.Cartesian3.fromDegrees(-117.16,32.71)
viewer.camera.lookAt(
position2,
new Cesium.HeadingPitchRange(
Cesium.Math.toRadians(0),
Cesium.Math.toRadians(-90),
20000,//中心点距离地面的距离
// viewer.camera.lookAt(position1, new Cesium.Cartesian3(0.0, 0.0, 1000.0))
));
整体代码展示:
1.直接在终端运行即可:npm run dev
<script setup>
import { onMounted } from 'vue'
import * as Cesium from 'cesium'
import Cartographic from 'cesium/Source/Core/Cartographic';
import Viewer from 'cesium/Source/Widgets/Viewer/Viewer';
onMounted(() => {
Cesium.Ion.defaultAccessToken = 'your token'
// viewer是所有api的开始
const viewer = new Cesium.Viewer('cesiumContainer', {});
const position1 = Cesium.Cartesian3.fromDegrees(110,20,20000);
// //setView通过定义相机目的地,直接跳转到目的地
// viewer.camera.setView({
// destination: position1,
// //视角,默认是(0,-90,0)
// orientation: {
// heading: Cesium.Math.toRadians(0),
// pitch: Cesium.Math.toRadians(0),
// Roll: Cesium.Math.toRadians(0)
// }
// })
// //flyTo快速切换视角,带飞行动画,可以设置飞行时长
// viewer.camera.flyTo({
// destination: position1,
// //视角,默认是(0,-90,0)
// orientation: {
// heading: Cesium.Math.toRadians(0),
// pitch: Cesium.Math.toRadians(-90),
// Roll: Cesium.Math.toRadians(0)
// },
// //飞行时间,单位秒
// duration: 3,
// })
//lookAt将视角固定在所设置的目的地点上,可以任意旋转视角,但是不会改变位置
const position2 = Cesium.Cartesian3.fromDegrees(-117.16,32.71)
viewer.camera.lookAt(
position2,
new Cesium.HeadingPitchRange(
Cesium.Math.toRadians(0),
Cesium.Math.toRadians(-90),
20000,//中心点距离地面的距离
// viewer.camera.lookAt(position1, new Cesium.Cartesian3(0.0, 0.0, 1000.0))
));
})
</script>
<template>
<div id="cesiumContainer">
</div>
</template>
<style scoped>
#cesiumContainer {
width: 100vw;
height: 100vh;
overflow: hidden;
}
</style>
2.main.js:(element可以去掉,这里用不到)
import { createApp } from 'vue'
// import './style.css'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')
3.vite-config-js:
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import cesium from 'vite-plugin-cesium'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue(),cesium()]
})