使用前端VUE框架通过Cesium加载3dtiles,计算3dtiles的面积

计算3dtiles面积需要使用Cesium内置的 Tileset 类型提供的方法。以下是一个通过Vue和Cesium加载3dtiles并计算其面积的示例代码:

<template>
  <div id="cesiumContainer"></div>
</template>

<script>
  import Cesium from 'cesium/Cesium'
  import 'cesium/Widgets/widgets.css'

  export default {
    name: 'TilesetArea',
    data() {
      return {
        viewer: null,
        tileset: null,
        tilesetArea: 0
      }
    },
    mounted() {
      this.init()
    },
    methods: {

      // 初始化
      init() {
        this.viewer = new Cesium.Viewer('cesiumContainer', {
          animation: false,
          baseLayerPicker: false,
          geocoder: false,
          timeline: false
        })

        this.viewer.imageryLayers.remove(this.viewer.imageryLayers.get(0))

        this.addTileset()
        this.viewer.zoomTo(this.tileset)
        
        this.computeTilesetArea() // 计算3dtiles面积

      },

      // 添加tileset
      addTileset() {
        this.tileset = new Cesium.Cesium3DTileset({
          url: 'https://XXX.XXX.XXX.XXX/Tilesets/tileset.json'
        })
        this.viewer.scene.primitives.add(this.tileset)
      },

      // 计算tileset面积
      computeTilesetArea() {
        let boundingSphere = this.tileset.boundingSphere
        let cartographic = Cesium.Rectangle.fromCartesian3(boundingSphere.center)

        let surfacePromise = Cesium.sampleTerrainMostDetailed(this.viewer.terrainProvider, [cartographic])
        Cesium.when(surfacePromise, function (updatedPositions) {
          let positions = Cesium.Cartesian3.fromRadiansArray(updatedPositions)
          let ph = new Cesium.PolygonHierarchy(positions)

          let area = Cesium.PolygonGeometryLibrary.computeArea2D([ph])
          this.tilesetArea = area / 1000000.0 // 平方米转平方千米
          
          console.log('tileset面积:' + this.tilesetArea + '平方千米')
        }.bind(this))
      }
    }
  }
</script>

<style>
  #cesiumContainer {
    width: 100%;
    height: 100vh;
    margin-top: -70px;
    position: absolute;
    top: 60px;
    left: 0px;
  }
</style>

在代码中,我们使用了Cesium内置的Tileset对象加载了一个3dtiles模型,并使用 computeArea2D() 方法计算其面积。需要注意的是由于计算的单位为平方米,所以最终将结果换算成了平方千米。

### 如何在Cesium加载倾斜摄影模型 在Cesium加载倾斜摄影模型可以通过多种方式实现,具体取决于所使用的数据格式以及需求。以下是两种常见的方法:一种是通过GLTF/GLB文件加载单个3D模型;另一种则是通过3DTiles格式加载大规模倾斜摄影数据。 #### 方法一:使用GLTF/GLB文件加载单一倾斜摄影机模型 对于简单的应用场景,可以直接加载一个GLTF或GLB格式的3D模型文件来表示倾斜摄影设备或其他对象。以下是一个具体的代码示例: ```javascript var viewer = new Cesium.Viewer('cesiumContainer'); // 定义模型的位置矩阵 var modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame( Cesium.Cartesian3.fromDegrees(100.0, 30.0, 0.0) // 经纬度坐标 (经度, 纬度, 高程) ); // 添加模型到场景中 viewer.scene.primitives.add(Cesium.Model.fromGltf({ url: 'path/to/model.glb', // 替换为实际的模型路径 modelMatrix: modelMatrix, scale: 1.0 })); ``` 上述代码展示了如何定义模型位置并将其添加至Cesium场景中[^1]。 --- #### 方法二:使用3DTiles格式加载大规模倾斜摄影数据 当需要处理复杂的大规模地理空间数据时,推荐使用3DTiles格式。这种格式专门针对高性能渲染进行了优化,非常适合用于城市建模、地形渲染等场景。以下是加载3DTiles数据的一个典型例子: ```javascript var viewer = new Cesium.Viewer('cesiumContainer'); // 加载3DTiles数据集 viewer.scene.primitives.add(new Cesium.Cesium3DTileset({ url: 'https://example.com/path/to/tileset.json' // 替换为目标3DTiles数据源URL })); // 自动调整相机视角以适应模型范围 viewer.zoomTo(viewer.scene.primitives); ``` 该代码片段演示了如何加载远程托管的3DTiles数据,并自动设置相机视角以便更好地观察模型[^2][^3]。 --- #### Vue3+Cesium初始化场景中的扩展应用 如果希望在一个现代化前端框架(如Vue3)环境中集成Cesium,则可以参考如下初始化逻辑。这有助于构建更复杂的三维可视化项目: ```html <template> <div id="cesiumContainer"></div> </template> <script> import * as Cesium from "cesium"; export default { mounted() { this.initCesium(); }, methods: { initCesium() { const viewer = new Cesium.Viewer("cesiumContainer"); // 示例:加载3DTiles数据 viewer.scene.primitives.add(new Cesium.Cesium3DTileset({ url: "https://example.com/path/to/tileset.json", })); viewer.zoomTo(viewer.scene.primitives); } } }; </script> <style> #cesiumContainer { width: 100%; height: 100vh; } </style> ``` 这段代码提供了一个完整的Vue组件模板,其中包含了Cesium初始化过程以及加载3DTiles数据的功能[^4]。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值