Cesium 加载B3DM模型

一、引入Cesium,可以使用该链接下载cesium

链接: https://pan.baidu.com/s/1BRQyaFCkxO2xQQT5RzFUCw?pwd=kcv9 提取码: kcv9

在index.html文件中引入cesium

复制代码
<script type="text/javascript" src="/Cesium/Cesium.js"></script>

二、初始化cesium,cesium初始化参数可自行配置

复制代码
const cesiurView = ref();
const initCesiut = () => {
	Cesium.Ion.defaultAccessToken ='';
	cesiurView.value = new Cesium.Viewer(props.id, {
		animation: false, //是否显示动画控件
		shouldAnimate: true,
		homeButton: false, //是否显示Home按钮
		fullscreenButton: false, //是否显示全屏按钮
		baseLayerPicker: false, //是否显示图层选择控件
		geocoder: false, //是否显示地名查找控件
		timeline: false, //是否显示时间线控件
		sceneModePicker: false, //是否显示投影方式控件
		navigationHelpButton: false, //是否显示帮助信息控件
		infoBox: false, //是否显示点击要素之后显示的信息
		requestRenderMode: true, //启用请求渲染模式
		scene3DOnly: true, //仅渲染3D
		sceneMode: 3, //初始场景模式 1 2D模式 2 2D循环模式 3 3D模式  Cesium.SceneMode
		selectionIndicator: false,//不创建selectionIndicator小部件
		skyAtmosphere:false,//不显示天空
	});
	cesiurView.value._cesiumWidget._creditContainer.style.display = 'none';// 隐藏logo
	cesiurView.value.scene.screenSpaceCameraController.inertiaZoom = 0.5;
	cesiurView.value.scene.screenSpaceCameraController.enableTilt = true; // 禁止俯仰角
	cesiurView.value.scene.globe.depthTestAgainstTerrain = false; //关闭地形
	cesiurView.value.scene.globe.show = false;
	cesiurView.value.scene.sun.show = false; //是否显示太阳
	cesiurView.value.scene.moon.show = false; //是否显示有月亮
	cesiurView.value.scene.skyBox.show = false; //是否显示星空
	cesiurView.value.scene.backgroundColor = new Cesium.Color(0,0,0,1)
};

cesium内置token,容易因token过期造成cesium加载失败,可以在Cesium官网中注册账号,获取token,然后可使用Cesium.Ion.defaultAccessToken该方法替换内置token。

二、添加B3DM到cesium中

复制代码
const addB3DMModel = async () => {
	let tileset = await Cesium.Cesium3DTileset.fromUrl(``, {
		maximumScreenSpaceError: 2,//各级别最大误差
		show: true,
		skipLevels: 0,//加载图层是跳转的最小级别,0 不跳转
		immediatelyLoadDesiredLevelOfDetail: false,//只加载所需图块
		loadSiblings: false,//是否下载所有图块
		cullWithChildrenBounds: true,
	});
	cesiurView.value.scene.primitives.add(tileset, {
		disableDepthTestDistance: Number.POSITIVE_INFINITY,
	});
	cesiurView.value.zoomTo(tileset);//定位到当前模型
};

效果如下:

以上方法仅仅是记录使用cesium展示B3DM模型,具体详情大家可以自行研究

相关推荐
Simon_He4 分钟前
一个免费的在线压缩网站超越了付费的压缩软件
前端·开源·图片资源
喝可乐的布偶猫10 分钟前
韩顺平之第九章综合练习-----------房屋出租管理系统
java·开发语言·ide·eclipse
Code季风16 分钟前
深入理解微服务中的服务注册与发现(Consul)
java·运维·微服务·zookeeper·架构·go·consul
光军oi20 分钟前
java微服务(Springboot篇)——————IDEA搭建第一个Springboot入门项目
java·spring boot·微服务
巴巴_羊39 分钟前
React Ref使用
前端·javascript·react.js
拾光拾趣录1 小时前
CSS常见问题深度解析与解决方案(第三波)
前端·css
徊忆羽菲1 小时前
Echarts3D柱状图-圆柱体-文字在柱体上垂直显示的实现方法
javascript·ecmascript·echarts
轻语呢喃1 小时前
JavaScript :字符串模板——优雅编程的基石
前端·javascript·后端
杨进军1 小时前
React 协调器 render 阶段
前端·react.js·前端框架
中微子1 小时前
Blob 对象及 Base64 转换指南
前端