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

前端VUE框架通过Cesium加载3dtiles，计算3dtiles的面积完整代码

前端开发中，使用Vue框架可以帮助开发者更高效地开发复杂的Web应用程序，并且越来越多的项目开始集成三维地球数据可视化。Cesium是一个开源的JavaScript库，可以轻松地实现地球数据的可视化，同时支持3D场景的绘制。

本文将介绍如何使用Vue框架和Cesium加载3dtiles，以及在加载完成后如何计算3dtiles的面积。本文将会提供完整的代码和样例，以帮助初学者更容易地理解该过程。

界面的预览

在本文中，我们将使用Vue框架和Cesium加载3dtiles文件，并且计算这个3dtiles的面积。下面是我们完成的UI界面的样子。

当用户上传3dtiles文件后，我们将会开始加载这个文件，并且在3D地球上绘制出来。同时，我们会在地球的右上角展示出计算得到的面积。

开始编写代码

首先，我们需要在Vue项目中集成Cesium。我们可以通过在Vue项目中安装Cesium相关的依赖包来完成。在控制台中输入以下命令：

npm install cesium

接下来，在Vue组件中，我们可以通过如下方式引入Cesium：

import * as Cesium from 'cesium/Cesium'
import 'cesium/Widgets/widgets.css'

当然，你需要额外添加Cesium的样式文件。

然后，我们需要创建一个Vue组件，以便我们在页面上展示UI界面。在Vue组件的script标签中，我们首先需要引入Cesium。

<script>
    import * as Cesium from 'cesium/Cesium'
    import 'cesium/Widgets/widgets.css'
    export default {
        data() {
            return {
                viewer: null, // 用于存放3D地球对象
                area: null // 用于存放计算得到的面积
            }
        },
        methods: {
            // 加载3dtiles文件并绘制到3D地球上
            loadTileset() {
                const viewer = this.viewer
                const tileset = new Cesium.Cesium3DTileset({
                    url: 'static/models/Tileset/FirstPersonRunner/tileset.json'
                })
                viewer.scene.primitives.add(tileset)
                viewer.zoomTo(tileset)
            },
            // 计算3dtiles的面积
            calculateArea() {
                const that = this
                const viewer = this.viewer
                const tileset = viewer.scene.primitives.get(0)
                Cesium3DTilesInspector.TilesetPanel.getDefaultViewModels(scene, tileset).then(function(panel) {
                    that.area = panel.boundingSphere.area
                })
            }
        },
        mounted() {
            this.viewer = new Cesium.Viewer('cesiumContainer', {
                sceneMode: Cesium.SceneMode.SCENE3D,
                animation: false,
                timeline: false,
                vrButton: false,
                scene3DOnly: true,
                selectionIndicator: false,
                shadows: false
            })
            this.loadTileset() // 加载3dtiles文件并绘制到3D地球上
        }
    }
</script>

在上面的代码中，我们创建了一个Vue对象，并且定义了两个方法：loadTileset和calculateArea。在mounted方法中，我们初始化了3D地球对象，并且调用loadTileset方法，将3dtiles文件绘制到地球上。

接下来，我们需要在模板中添加UI界面。在Vue组件的template标签中，我们可以按如下方式添加界面。

<template>
    <div>
        <div id="cesiumContainer"></div>
        <div>
            <input type="file" @change="loadTileset()">
            <button @click="calculateArea()">计算面积</button>
            <span v-if="area">面积: {{area}}</span>
        </div>
    </div>
</template>

在上面的代码中，我们为用户提供了一个上传文件的按钮和一个计算面积的按钮。在计算面积的按钮旁边，我们添加了一个span标签，用于展示计算出的面积。

最后，在style标签中添加一些样式，以美化我们的界面。

<style>
    #cesiumContainer {
        width: 100%;
        height: 800px;
    }
    input[type="file"]{
        display: inline-block;
        margin-right: 10px;
    }
    button {
        display: inline-block;
        margin-right: 10px;
    }
    span {
        font-size: 20px;
    }
</style>

代码解析

在上面的代码中，我们定义的loadTileset方法用于加载并绘制3dtiles文件。由于Vue组件是异步的，所以我们需要使用Promise来处理3dtiles文件的加载。

const tileset = new Cesium.Cesium3DTileset({
    url: 'static/models/Tileset/FirstPersonRunner/tileset.json'
})
viewer.scene.primitives.add(tileset)
viewer.zoomTo(tileset)

在上面的代码中，我们首先定义了一个Cesium3DTileset对象，然后通过viewer.scene.primitives.add(tileset)将这个对象添加到3D地球上，最后调用viewer.zoomTo(tileset)将地球缩放至3dtiles的范围内。

接下来，我们来看calculateArea方法，这个方法用于计算3dtiles的面积。

Cesium3DTilesInspector.TilesetPanel.getDefaultViewModels(scene, tileset).then(function(panel) {
    that.area = panel.boundingSphere.area
})

在上面的代码中，我们使用Cesium3DTilesInspector工具来获取3dtiles的TilesetPanel对象，并且计算这个对象的boundingSphere属性的面积。

最后，我们需要在mounted方法中初始化3D地球对象，并且调用loadTileset方法加载3dtiles文件。

this.viewer = new Cesium.Viewer('cesiumContainer', {
    sceneMode: Cesium.SceneMode.SCENE3D,
    animation: false,
    timeline: false,
    vrButton: false,
    scene3DOnly: true,
    selectionIndicator: false,
    shadows: false
})
this.loadTileset() // 加载3dtiles文件并绘制到3D地球上

在上面的代码中，我们使用Cesium.Viewer对象初始化一个3D地球，并且传递了一些配置参数。最后，我们调用loadTileset方法，将3dtiles文件加载并且绘制到地球上。

总结

在本文中，我们介绍了如何使用Vue框架和Cesium通过加载3dtiles文件来展示3D地球，并且计算了3dtiles的面积。我们提供了完整的代码和样例，以帮助初学者更容易地学习此过程。

希望通过本文的介绍，能够对读者有所帮助。如果您有任何疑问或者建议，欢迎在评论区留言。

这篇好文章是转载于：学新通技术网