前端配置

結(jié)合cesium,有很多種方法，這里舉例最簡單的，小白入門首選

第一步是在app.vue配置cdn鏈接

<script src="https://cesium.com/downloads/cesiumjs/releases/1.83/Build/Cesium/Cesium.js"></script>
 <link href="https://cesium.com/downloads/cesiumjs/releases/1.83/Build/Cesium/Widgets/widgets.css" rel="stylesheet">

第二步配置vue頁面

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

<script>
  let viewer
  export default {
    name: 'CesiumDemo',
    data() {
      return {}
    },
    created() {},
    mounted() {
      this.getCesiumDem()
    },
    destroyed() {},
    methods: {
      // 實例cesium
      getCesiumDem() {
        Cesium.Ion.defaultAccessToken =
          '你的token,在cesium官網(wǎng)注冊，有很多教程'
        viewer = new Cesium.Viewer('cesiumDemo', {
          //需要進(jìn)行可視化的數(shù)據(jù)源的集合
          animation: false, //是否顯示動畫控件
          shouldAnimate: true,
          homeButton: false, //是否顯示Home按鈕
          fullscreenButton: false, //是否顯示全屏按鈕
          baseLayerPicker: false, //是否顯示圖層選擇控件
          geocoder: false, //是否顯示地名查找控件
          timeline: false, //是否顯示時間線控件
          sceneModePicker: true, //是否顯示投影方式控件
          navigationHelpButton: false, //是否顯示幫助信息控件
          infoBox: false, //是否顯示點擊要素之后顯示的信息
          requestRenderMode: false, //啟用請求渲染模式
          scene3DOnly: true, //每個幾何實例將只能以3D渲染以節(jié)省GPU內(nèi)存
          sceneMode: 3, //初始場景模式 1 2D模式 2 2D循環(huán)模式 3 3D模式  Cesium.SceneMode
          fullscreenElement: document.body, //全屏?xí)r渲染的HTML元素 暫時沒發(fā)現(xiàn)用處
        })
        //加載傾斜示范數(shù)據(jù)
        viewer._cesiumWidget._creditContainer.style.display = "none";//版權(quán)信息清除
        var palaceTileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
          url: './static/demo/tileset.json',//3dtiles文件位置（記得放在static或者pubilc文件夾下）
          show: true,
          //控制切片視角顯示的數(shù)量，可調(diào)整性能
          aximumScreenSpaceError: 2,
          maximumNumberOfLoadedTiles: 100000,
        }));
        //控制模型的位置
        palaceTileset.readyPromise.then(function(palaceTileset) {
          viewer.scene.primitives.add(palaceTileset);
          var heightOffset = -12; //可以改變3Dtiles的高度
          var boundingSphere = palaceTileset.boundingSphere;
          var cartographic = Cesium.Cartographic.fromCartesian(boundingSphere.center);
          var surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, 0.0);
          var offset = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, heightOffset);
          var translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3());
          palaceTileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
          viewer.zoomTo(palaceTileset, new Cesium.HeadingPitchRange(0.5, -0.2, palaceTileset.boundingSphere.radius *
            1.0));
        })
        //定位到三維模型
        viewer.scene.globe.depthTestAgainstTerrain == true;//深度檢測
        viewer.zoomTo(palaceTileset);
      }
    }
  }
</script>
<style scoped>
  /* cesiumDemo {
  width: 100vw;
  height: 100vh;
} */
  /* 隱藏cesium標(biāo)志 */
  .cesium-viewer .cesium-widget-credits {
    display: none;
  }
</style>

添加完，就可以正常運行了

打包后的運行

正常打包完，直接打開index是不會加載的，有的還會報錯，這是跨域所致，要配置服務(wù)器
具體步驟
一、打開dist文件，輸入cmd
二、配置服務(wù)器npm install http-server -g

三、添加請求頭http-server --cors -p 8888 -o

四、就可以運行啦文章來源地址http://www.zghlxwxcb.cn/news/detail-743061.html

到了這里，關(guān)于vue+cusium加載3dtiles模型的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！