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各种源码，特效以及其他效果或者模型加载的实现方式，还希望大家多多关注，小编也会持续更新的！

声明：转载请声明出处。