通过 let tileset = new Cesium.Cesium3DTileset({ url: tilesetUrl });创建瓦片图层,然后将瓦片添加到cesium实例上去,但是怎么映射到对应的b3dm文件
时间: 2024-09-24 13:30:42 浏览: 81
在Cesium中,通过`let tileset = new Cesium.Cesium3DTileset({ url: tilesetUrl })`创建的瓦片图层实际上是基于glTF (GL Transmission Format)或B3DM (Binary glTF)等格式的3D模型数据。如果你想将这些3D模型映射到对应的B3DM文件,你需要做以下几个步骤:
1. **确认B3DM格式**:
确定你的3D模型是否是以B3DM格式保存的。如果是,那么这个url指向的就是B3DM文件。
2. **加载B3DM文件**:
`Cesium3DTileset`可以直接加载B3DM文件。如果B3DM文件包含多个瓦片(例如每个楼层是一个单独的瓦片),`url`应该指向整个资源集的根目录。
```javascript
let tileset = new Cesium.Cesium3DTileset({
url: 'path/to/your/b3dm/folder',
});
```
3. **添加到场景**:
创建好`tileset`之后,将其添加到Cesium Viewer的`scene`中:
```javascript
viewer.scene.primitives.add(tileset);
```
4. **调整层级**:
如果模型包含多个部分需要叠加,可以使用`setReferenceFrame`方法来指定视图的参考框架,或者使用`show`和`hide`方法控制模型的可见性。
5. **错误处理**:
负责检查网络请求状态和解析错误,因为B3DM文件可能会因为各种原因无法加载成功。
阅读全文
相关推荐
![-](https://img-home.csdnimg.cn/images/20241231045053.png)
![-](https://img-home.csdnimg.cn/images/20241231045053.png)
![-](https://img-home.csdnimg.cn/images/20241231044955.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
<template> 电子围栏 视频监控 实时定位 环境检测 2 2 2 2 <Rail v-if="currentComponent === 'Rail'" /> <Location v-if="currentComponent === 'Location'" /> <Monitor v-if="currentComponent === 'Monitor'" /> </template> <script> import Rail from "@/views/rail/rail.vue"; import Video from "@/views/video/video.vue"; import Location from "@/views/location/location.vue"; import Monitor from "@/views/monitor/monitor.vue"; let viewer; Cesium.Ion.defaultAccessToken = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJlYzc0OGZjYi03NDY5LTRmMmQtYTc2YS05ZTY2YzZlMTRmYTQiLCJpZCI6MTM5MzQ0LCJpYXQiOjE2ODQzMTI2MjF9.nNF8IyvsjDSdeRJeea8ftf4TC1DOgSa_jue-ZZ0dZ8M"; export default { name: "MineHome", components: { Rail, Video, Location, Monitor, }, data() { return { currentComponent: "Rail", currentTab: "", // 记录当前选中的按钮 buttonStyle: { // 记录按钮样式 Rail: true, Video: false, Location: false, Monitor: false, }, }; }, mounted() { this.toggleComponent("Rail"); this.initMap(); }, methods: { // 初始化地图 initMap() { viewer = new Cesium.Viewer("mapTree", { infoBox: false, // 禁用infoBox }); // 加载倾斜模型 var tileset = new Cesium.Cesium3DTileset({ url: "http://47.104.159.54:8156/out2/tileset.json", }); viewer.scene.primitives.add(tileset); viewer.zoomTo(tileset); }, toggleComponent(componentName) { this.currentComponent = componentName; }, }, }; 根据这段代码实现 默认选中按钮字体颜色为红色 非选中为白色
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![rar](https://img-home.csdnimg.cn/images/20241231044955.png)
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)