前端VUE框架通過Cesium加載3dtiles，計(jì)算3dtiles的面積完整代碼

前端開發(fā)中，使用Vue框架可以幫助開發(fā)者更高效地開發(fā)復(fù)雜的Web應(yīng)用程序，并且越來越多的項(xiàng)目開始集成三維地球數(shù)據(jù)可視化。Cesium是一個(gè)開源的JavaScript庫，可以輕松地實(shí)現(xiàn)地球數(shù)據(jù)的可視化，同時(shí)支持3D場景的繪制。

本文將介紹如何使用Vue框架和Cesium加載3dtiles，以及在加載完成后如何計(jì)算3dtiles的面積。本文將會提供完整的代碼和樣例，以幫助初學(xué)者更容易地理解該過程。

界面的預(yù)覽

在本文中，我們將使用Vue框架和Cesium加載3dtiles文件，并且計(jì)算這個(gè)3dtiles的面積。下面是我們完成的UI界面的樣子。

當(dāng)用戶上傳3dtiles文件后，我們將會開始加載這個(gè)文件，并且在3D地球上繪制出來。同時(shí)，我們會在地球的右上角展示出計(jì)算得到的面積。

開始編寫代碼

首先，我們需要在Vue項(xiàng)目中集成Cesium。我們可以通過在Vue項(xiàng)目中安裝Cesium相關(guān)的依賴包來完成。在控制臺中輸入以下命令：

npm install cesium

接下來，在Vue組件中，我們可以通過如下方式引入Cesium：

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

當(dāng)然，你需要額外添加Cesium的樣式文件。

然后，我們需要創(chuàng)建一個(gè)Vue組件，以便我們在頁面上展示UI界面。在Vue組件的script標(biāo)簽中，我們首先需要引入Cesium。

<script>
    import * as Cesium from 'cesium/Cesium'
    import 'cesium/Widgets/widgets.css'
    export default {
        data() {
            return {
                viewer: null, // 用于存放3D地球?qū)ο?                area: null // 用于存放計(jì)算得到的面積
            }
        },
        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)
            },
            // 計(jì)算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>

在上面的代碼中，我們創(chuàng)建了一個(gè)Vue對象，并且定義了兩個(gè)方法：loadTileset和calculateArea。在mounted方法中，我們初始化了3D地球?qū)ο?，并且調(diào)用loadTileset方法，將3dtiles文件繪制到地球上。

接下來，我們需要在模板中添加UI界面。在Vue組件的template標(biāo)簽中，我們可以按如下方式添加界面。

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

在上面的代碼中，我們?yōu)橛脩籼峁┝艘粋€(gè)上傳文件的按鈕和一個(gè)計(jì)算面積的按鈕。在計(jì)算面積的按鈕旁邊，我們添加了一個(gè)span標(biāo)簽，用于展示計(jì)算出的面積。

最后，在style標(biāo)簽中添加一些樣式，以美化我們的界面。

<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)

在上面的代碼中，我們首先定義了一個(gè)Cesium3DTileset對象，然后通過viewer.scene.primitives.add(tileset)將這個(gè)對象添加到3D地球上，最后調(diào)用viewer.zoomTo(tileset)將地球縮放至3dtiles的范圍內(nèi)。

接下來，我們來看calculateArea方法，這個(gè)方法用于計(jì)算3dtiles的面積。

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

在上面的代碼中，我們使用Cesium3DTilesInspector工具來獲取3dtiles的TilesetPanel對象，并且計(jì)算這個(gè)對象的boundingSphere屬性的面積。

最后，我們需要在mounted方法中初始化3D地球?qū)ο?，并且調(diào)用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對象初始化一個(gè)3D地球，并且傳遞了一些配置參數(shù)。最后，我們調(diào)用loadTileset方法，將3dtiles文件加載并且繪制到地球上。

總結(jié)

在本文中，我們介紹了如何使用Vue框架和Cesium通過加載3dtiles文件來展示3D地球，并且計(jì)算了3dtiles的面積。我們提供了完整的代碼和樣例，以幫助初學(xué)者更容易地學(xué)習(xí)此過程。

希望通過本文的介紹，能夠?qū)ψx者有所幫助。如果您有任何疑問或者建議，歡迎在評論區(qū)留言。文章來源地址http://www.zghlxwxcb.cn/news/detail-478099.html

到了這里，關(guān)于前端VUE框架通過Cesium加載3dtiles，計(jì)算3dtiles的面積的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！