Cesium加载模型两种方式

最新推荐文章于 2024-05-31 15:41:42 发布

一个修理地球的人

最新推荐文章于 2024-05-31 15:41:42 发布

阅读量1.2w

点赞数

分类专栏： Cesium 文章标签： Cesium 添加模型

本文链接：https://blog.csdn.net/wo_buzhidao/article/details/84142222

版权

Cesium 专栏收录该内容

18 篇文章 8 订阅

订阅专栏

Cesium加载模型两种方式

代码如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>加载离线arcgis卫星、天地图标签、风机模型</title>
	<link rel="stylesheet" href="../Build/Widgets/widgets.css" />
		<script src="../Build/Cesium.js"></script>
	</head>
	<body>
		<div  id="cesiumContainer" style="width: 100%;height: 900px;background-color: rosybrown;"></div>
	</body>
	<script>
		  	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元素 暂时没发现用处
		            imageryProvider : new Cesium.WebMapTileServiceImageryProvider({
				          url: 'http://t0.tianditu.com/img_w/wmts?',
				          layer: 'img',
				          style: 'default',
				          format: 'tiles',
				          tileMatrixSetID: 'w',
				          credit: new Cesium.Credit('天地图全球影像服务'),
				      
				    })
		});
		
		// 启用地球照明
        //viewer.scene.globe.enableLighting = true;

		  //全球影像中文注记服务
	     viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({
		    url: "http://t0.tianditu.com/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default.jpg",
		    layer: "tdtAnnoLayer",
		    style: "default",
		    format: "image/jpeg",
		    tileMatrixSetID: "GoogleMapsCompatible",
		    maximumLevel: 13,
			minimumLevel: 1,
		    show: false
		}));
		//飞行定位
		viewer.scene.camera.flyTo({
		   destination: new Cesium.Cartesian3.fromDegrees(109,34,3000),
		    orientation: {
	            heading : Cesium.Math.toRadians(20.0), // 方向
	            pitch : Cesium.Math.toRadians(-90.0),// 倾斜角度
	            roll : 0
	       },
	       duration:1
		});
		/**
		 * 删除所有实体模型
		 */
		viewer.entities.removeAll();
		var position=Cesium.Cartesian3.fromDegrees(109,34, 0);
			addFengjiModel(position);
			addFengjiModel2();
		function  addFengjiModel(position){
			var hpRoll = new Cesium.HeadingPitchRoll(Cesium.Math.toRadians(180), 0, 0);
		    var orientation = Cesium.Transforms.headingPitchRollQuaternion(position, hpRoll);
		    var color=Cesium.Color.LIME ;
		    // 添加模型
		    var model = viewer.entities.add({
		        // 模型id
		       // id:'model',
		        // 模型位置
		        position: position,
		        // 模型方向
		        orientation: orientation,
		        // 模型资源
		        model: {
		            // 模型路径
		            uri: '../model/fengji.gltf',
		            // 模型最小刻度
		            minimumPixelSize: 128,
//		            // 模型最大刻度
		            maximumSize: 128,
		            //设置模型最大放大大小
		            maximumScale : 200,
		            // 模型是否可见
		            show: true,
		            // 模型轮廓颜色
		            silhouetteColor:Cesium.Color.WHITE,
		            // 模型颜色  ，这里可以设置颜色的变化
		            color: color ,
		              // 仅用于调试，显示魔仙绘制时的线框
			        debugWireframe : false,
			        // 仅用于调试。显示模型绘制时的边界球。
			        debugShowBoundingVolume : false,
			        
			        scale:10,
			        runAnimations:true                //是否运行模型中的动画效果
		        },
		        // 添加描述
		        description: '风机模型'
		    });
		    // 视角切换到模型
		    //viewer.trackedEntity = model;
		}
		
		function addFengjiModel2(){
			  var position = Cesium.Cartesian3.fromDegrees(109.02,34.02,0);
			    // 设置模型方向
			    var hpRoll = new Cesium.HeadingPitchRoll(Cesium.Math.toRadians(45), 0, 0);
			    // 生成一个函数，该函数从以提供的原点为中心的参考帧到提供的椭圆体的固定参考帧计算4x4变换矩阵。
			    var fixedFrame = Cesium.Transforms.localFrameToFixedFrameGenerator('north','west');
			    var scene = viewer.scene;
			    scene.primitives.add(Cesium.Model.fromGltf({
			        // 资源路径
			        url: '../model/fengji.gltf',
			        // 模型矩阵
			        modelMatrix: Cesium.Transforms.headingPitchRollToFixedFrame(position, hpRoll, Cesium.Ellipsoid.WGS84, fixedFrame, position),
			        // 模型最小刻度
			        minimumPixelSize: 128,
			        // 模型标尺
			        scale : 2.0,
			        // 模型最大刻度
			        maximumScale: 20000,
			        // 仅用于调试。显示模型绘制时的边界球。
			        debugShowBoundingVolume : false,
			        // 仅用于调试，显示魔仙绘制时的线框
			        debugWireframe : false
			    }));
		}
	</script>
</html>

一个修理地球的人

关注

0
点赞
踩
17

收藏

觉得还不错? 一键收藏
4
评论
Cesium加载模型两种方式

Cesium加载模型两种方式代码如下&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;加载离线arcgis卫星、天地图标签、风机模型&lt;/title&gt; &lt;link rel="stylesheet" href
复制链接

扫一扫

专栏目录