Cesium加载3Dtiles模型并自定义位置

Cesium加载3Dtiles模型并自定义位置

**

Cesium加载3Dtiles模型步骤:
(一)如果您使用的是大疆智图,则该软件可以直接输出3Dtiles格式(B3DM切片)的数据
然后即可用着段代码加载

	var viewer = new Cesium.Viewer('cesiumContainer', {
		//需要进行可视化的数据源的集合
		animation: false, //是否显示动画控件
		shouldAnimate: true,
		homeButton: false, //是否显示Home按钮
		fullscreenButton: false, //是否显示全屏按钮
		baseLayerPicker: false, //是否显示图层选择控件
		geocoder: false, //是否显示地名查找控件
		timeline: false, //是否显示时间线控件
		sceneModePicker: true, //是否显示投影方式控件
		navigationHelpButton: false, //是否显示帮助信息控件
		infoBox: false, //是否显示点击要素之后显示的信息
		requestRenderMode: true, //启用请求渲染模式
		scene3DOnly: false, //每个几何实例将只能以3D渲染以节省GPU内存
		sceneMode: 3, //初始场景模式 1 2D模式 2 2D循环模式 3 3D模式  Cesium.SceneMode
		fullscreenElement: document.body, //全屏时渲染的HTML元素 暂时没发现用处
		//加载天地图影像地图,WebMapTileServiceImageryProvider该接口是加载WMTS服务的接口
		imageryProvider: new Cesium.WebMapTileServiceImageryProvider({
			url: 'http://t0.tianditu.gov.cn/img_w/wmts?tk=ebf64362215c081f8317203220f133eb',
			layer: 'img',
			style: 'default',
			tileMatrixSetID: 'w',
			format: 'tiles',
			maximumLevel: 18
		})
	});
	// 如果需要叠加路网与注记矢量则添加以下代码
	viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({
		url: 'http://t0.tianditu.gov.cn/cia_w/wmts?tk=ebf64362215c081f8317203220f133eb',
		layer: 'cia',
		style: 'default',
		tileMatrixSetID: 'w',
		format: 'tiles',
		maximumLevel: 18
	}))
	//加载倾斜示范数据
	var palaceTileset = new Cesium.Cesium3DTileset({
		url: '../../SampleData/OSGB&3Dtiles/terra_b3dms/tileset.json',
			//控制切片视角显示的数量,可调整性能
		    maximumScreenSpaceError: 2,
            maximumNumberOfLoadedTiles: 100000,
	})
	//控制模型的位置
	palaceTileset.readyPromise.then(function (palaceTileset) {
		//添加到场景
		viewer.scene.primitives.add(palaceTileset);
		var longitude = 113.0 //模型需要改变的经度
		var latitude = 28.0 //模型需要改变的纬度
		var heightOffset = 20.0; //模型需要改变的高度

		//获取3Dtlies的bounds范围
		var boundingSphere = palaceTileset.boundingSphere;
		//获取3Dtlies的范围中心点的弧度
		var cartographic = Cesium.Cartographic.fromCartesian(boundingSphere.center);
		//定义3Dtlies改变之后中心点的弧度
		var offsetvalue = Cesium.Cartographic.fromDegrees(longitude, latitude, heightOffset)

		debugger
		//模型本身的位置
		var surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, 0.0);
		//模型改变的位置
		var offset = Cesium.Cartesian3.fromRadians(offsetvalue.longitude, offsetvalue.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));
	});

  加载效果如图所示:在这里插入图片描述
  (二)如果您使用的是CC(Smart3D),该软件可以输出OSGB格式的数据,我们可以借助:

  1. osg2cesiumApp v1.3软件来将我们的OSGB倾斜摄影数据转换成3Dtiles文件进行加载
  2. cesiumlab2软件来将我们的OSGB倾斜摄影数据转换成3Dtiles文件进行加载
  3. 我们可以借助SuperMap的iearth工具来转换

加载效果如图所示:
在这里插入图片描述
tips:如果还有小伙伴需要其他的源码的请加我 QQ657155100或者留言联系~
在这里插入图片描述
后续小编会持续更新cesium各种源码,特效以及其他效果或者模型加载的实现方式,还希望大家多多关注,小编也会持续更新的!

声明:转载请声明出处。

  • 14
    点赞
  • 57
    收藏
    觉得还不错? 一键收藏
  • 17
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值