织梦中英网站怎么做,wordpress清除主题信息,山西两学一做网站,免费特效模板下载new Cesium.Camera (scene)
摄像机由位置#xff0c;方向和视锥台定义。 方向与视图形成正交基准#xff0c;上和右视图x上单位矢量。 视锥由6个平面定义。每个平面都由 Cartesian4 对象表示#xff0c;其中x#xff0c;y和z分量定义垂直于平面的单位矢量#xff0c;w分量…new Cesium.Camera (scene)
摄像机由位置方向和视锥台定义。 方向与视图形成正交基准上和右视图x上单位矢量。 视锥由6个平面定义。每个平面都由 Cartesian4 对象表示其中xy和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: 在下列代码中并没有直接使用CartographicCesium的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,0orientation: {heading: Cesium.Math.toRadians(0),pitch: Cesium.Math.toRadians(0),Roll: Cesium.Math.toRadians(0)}})
2.flyTo快速切换视角带飞行动画可以设置飞行时长
带有动画效果地飞到指定位置
viewer.camera.flyTo({destination: position1,//视角默认是0,-90,0orientation: {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))));})/scripttemplatediv idcesiumContainer/div
/templatestyle scoped
#cesiumContainer {width: 100vw;height: 100vh;overflow: hidden;
}
/style2.main.js:(element可以去掉这里用不到)
import { createApp } from vue
// import ./style.css
import App from ./App.vueimport ElementPlus from element-plus
import element-plus/dist/index.cssconst 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()]
})效果展示
这里推荐一个cesium学习的博客右弦GISercesium实战系列总目录详细实用不断更新中现120篇_cesium实战目录-CSDN博客
