Cesium添加glb文件

在这里插入图片描述

<template>
  <div class="cesium">
    <div id="cesiumContainer"></div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      url: 'b20200827-3.glb'
    };
  },
  mounted() {
    this.mapInit();
  },
  methods: {
    mapInit() {
      Cesium.Ion.defaultAccessToken = "你的token";
      var viewer = new Cesium.Viewer("cesiumContainer", {
        terrainProvider: Cesium.createWorldTerrain(),//显示地形
        geocoder: false, // 地理位置查询定位控件
        homeButton: false, // 默认相机位置控件
        timeline: false, // 时间滚动条控件
        navigationHelpButton: false, // 默认的相机控制提示控件
        fullscreenButton: false, // 全屏控件
        scene3DOnly: true, // 每个几何实例仅以3D渲染以节省GPU内存
        baseLayerPicker: false, // 底图切换控件
        animation: false, // 控制场景动画的播放速度控件
        selectionIndicator: false, //关闭绿色的方框
        infoBox: false, //关闭原生的弹窗
      });
      // 相机移动到指定位置
      viewer.camera.flyTo({
        destination: Cesium.Cartesian3.fromDegrees(115.879192319, 31.66929273, 4000),//飞到指定坐标
        orientation: {
          heading: Cesium.Math.toRadians(180.0),
          pitch: Cesium.Math.toRadians(-85.0),
          roll: Cesium.Math.toRadians(0.0),
        },
      });
      viewer._cesiumWidget._creditContainer.style.display = "none"; // 隐藏版权

      viewer.entities.add({
        id: "main",
        position: Cesium.Cartesian3.fromDegrees(
          115.879192319,
          31.66929273,
          145
        ),
        orientation: Cesium.Transforms.headingPitchRollQuaternion(
          Cesium.Cartesian3.fromDegrees(115.879192319, 31.66929273, 145),
          new Cesium.HeadingPitchRoll(Cesium.Math.toRadians(92.0), Cesium.Math.toRadians(0.0), Cesium.Math.toRadians(0.0))
        ),
        model: {
          uri: this.url,
        },
      });
      viewer.scene.globe.depthTestAgainstTerrain = true; 重要  固定物体在位置上
      viewer.scene.screenSpaceCameraController.minimumZoomDistance = 100; //限制地图浏览范围的观看最低高度
    },
  },
};
</script>
<style lang='scss' scoped>
.cesium {
  position: absolute;
  width: 100%;
  height: 100%;
  #cesiumContainer {
    width: 100%;
    height: 100%;
  }
}
</style>

这里面存在最大的坑就是glb文件必须放在public文件夹里面

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vite-cesium是一个基于Vite和Cesium的开发框架。通过引入vite-plugin-cesium插件,可以在Vue项目中快速集成Cesium功能。在终端中进入Vue项目目录,可以使用npm或pnpm命令安装依赖,如npm i cesium vite-plugin-cesium vite -D 或 pnpm i cesium vite-plugin-cesium -D 。在vite.config.js文件中引入vite-plugin-cesium插件,以便在项目中使用Cesium,具体代码可以根据不同的教程或示例进行配置。使用vite-cesium可以方便地搭建基于Vue和Cesium的开发框架,无需繁琐的配置,提高开发效率。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [Cesium+Vue3+vite 环境搭建(nvm安装使用),以及简单上手](https://blog.csdn.net/qq_45956730/article/details/129315689)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* *3* [Cesium开发实战开篇—vite+cesium框架搭建](https://blog.csdn.net/ls870061011/article/details/127143244)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值