136:vue+cesium 上传glb文件,使用entity方法在地图上显示3D物体

作者: 还是大剑师兰特 ,曾为美国某知名大学计算机专业研究生,现为国内GIS领域高级前端工程师,优快云知名博主,深耕openlayers、leaflet、mapbox、cesium,canvas,echarts等技术开发,欢迎加微信(gis-dajianshi),一起交流。

查看本专栏目录 - 本文是第 136个示例

一、示例效果:

在这里插入图片描述

二、示例简介

本示例介绍如何在vue+cesium中上传glb文件,在地图上显示3D物体。支持加载 .glb 的方式:使用 Entity.model 或 Scene.primitives.add(new Cesium.ModelPrimitive(…))

三、配置方式

1)查看基础设置:https://xiaozhuanlan.com/topic/1374609285

在 TypeScript 环境的 Vite 创建的 Vue 3 项目中使用 Cesium 并导入 `.glb` 文件,你可以按照以下步骤进行操作: 1. 安装 Cesium: ``` npm install cesium --save ``` 2. 在 `index.html` 中引入 Cesium 的 CSS 和 JavaScript 文件: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Vue 3 App</title> <link href="./node_modules/cesium/Build/Cesium/Widgets/widgets.css" rel="stylesheet" /> <script type="module" src="./node_modules/cesium/Build/Cesium/Cesium.js"></script> </head> <body> <div id="app"></div> <script src="/src/main.ts" type="module"></script> </body> </html> ``` 3. 修改 `main.ts` 文件,导入并使用 Cesium: ```typescript import { createApp } from 'vue'; import App from './App.vue'; import * as Cesium from 'cesium'; const app = createApp(App); app.config.globalProperties.$Cesium = Cesium; app.mount('#app'); ``` 4. 在你的组件中,通过 `$Cesium` 对象来创建 `Viewer`,并使用 `Entity` 加载 `.glb` 文件: ```vue <template> <div id="cesiumContainer"></div> </template> <script lang="ts"> import { defineComponent, onMounted } from 'vue'; export default defineComponent({ name: 'Cesium', setup() { onMounted(() => { const viewer = new $Cesium.Viewer('cesiumContainer'); viewer.entities.add({ name: 'Model', position: $Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706), model: { uri: '/model.glb', }, }); }); return {}; }, }); </script> ``` 这样,你就可以在 TypeScript 环境的 Vite 创建的 Vue 3 项目中使用 Cesium 并导入 `.glb` 文件了。需要注意的是,在使用 `Entity` 加载 `.glb` 文件时,你需要提供相应文件的路径。
评论 27
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

还是大剑师兰特

打赏一杯可口可乐

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值