1、cesium的说明书zip下载完成之后 打开vscode使用open with live serve启动
否则启动失败
2、在vue3+vite项目中全局使用cesium
import { createApp } from 'vue';
import './style.css';
import App from './App.vue';
import * as Cesium from 'cesium';
import 'cesium/Build/Cesium/Widgets/widgets.css'; // 引入 Cesium 的样式文件!!!
const app = createApp(App);
// 将 Cesium 挂载到全局属性中
// app.config.globalProperties.Cesium = Cesium;
// 将 Cesium 提供给所有子组件
app.provide('Cesium', Cesium);
app.mount('#app');
app.config.globalProperties.Cesium = Cesium;(Vue3用不了 必须得this调用 Vue 3 中确实没有了 this 对象)
这种方法是将 Cesium 对象添加到 Vue 应用程序的全局属性中。这意味着在所有组件中,你都可以通过 this.$cesium 或 this.Cesium 访问到 Cesium 对象,无需通过 inject 或 provide 进行额外的设置。这种方法适用于你希望在整个应用程序中都能方便地访问 Cesium 对象的情况。
app.provide(‘Cesium’, Cesium);
这种方法是使用 Vue 3 的 provide 功能,将 Cesium 对象提供给所有子组件。通过 inject 可以在任何子组件中访问到提供的对象。这种方法更适合于你希望在一部分组件中使用 Cesium 对象,但不需要在整个应用程序中全局访问的情况。
或者可以把cesium挂载到全局Window上(没试到底行不行)
//全局
import * as Cesium from 'cesium';
// 将 Cesium 挂载到全局的 window 对象上
window.Cesium = Cesium;
//组件
viewer = new window.Cesium.Viewer(cesiumContainer.value, {
// 可选的配置
});
3、加载3dtiles文件 可以用cesium官方的文件
用id号添加资源 3dtils文件的话以.json文件为url入口
let city = new Cesium.Cesium3DTileset({
url: Cesium.IonResource.fromAssetId(75343),
});
viewer.scene.primitives.add(city);
4、设置视角
不建议使用 再次设置视角的时候这种格式的orientation很难换算的正确
直接输出camera使用position、heading、pitch、roll
// 设置相机初始位置
viewer.camera.setView({
destination: Cesium.Cartesian3.fromDegrees(-74.006, 40.7128, 10000), // 设置初始位置经纬度和高度
orientation: {
heading: Cesium.Math.toRadians(0), // east, default value is 0.0 (north)
pitch: Cesium.Math.toRadians(-90), // default value (looking down)
roll: 0.0, // default value
},
});
viewer.camera.setView({
destination: {x: 1334280.631322484,y: -4656574.805101877,z: 4136715.539571764},
orientation: {
heading: 6.2354288308616574,
pitch: -0.3858778804380578,
roll: 0.000033485985465375734,
},
});