vue+cusium加载3dtiles模型-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue+cusium加载3dtiles模型。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

前端配置

结合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官网注册，有很多教程'
        viewer = new Cesium.Viewer('cesiumDemo', {
          //需要进行可视化的数据源的集合
          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渲染以节省GPU内存
          sceneMode: 3, //初始场景模式 1 2D模式 2 2D循环模式 3 3D模式  Cesium.SceneMode
          fullscreenElement: document.body, //全屏时渲染的HTML元素 暂时没发现用处
        })
        //加载倾斜示范数据
        viewer._cesiumWidget._creditContainer.style.display = "none";//版权信息清除
        var palaceTileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
          url: './static/demo/tileset.json',//3dtiles文件位置（记得放在static或者pubilc文件夹下）
          show: true,
          //控制切片视角显示的数量，可调整性能
          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标志 */
  .cesium-viewer .cesium-widget-credits {
    display: none;
  }
</style>