CesiumJs 简单操作模型

2023-03-02

模型 true var

一、所需的地形文件和模型以及CesiumJs包操作之前，我们需要两份对应的文件，一份是地形文件（可无），一份是对应的模型文件，本次展示的模型是转换成了3Dtiles类型的。如果我们只做基础的模型展示，只需要引入一个js和一个css文件即可<scriptsrc="js/Cesium194/Ces

一、所需的地形文件和模型以及 CesiumJs 包

　　操作之前，我们需要两份对应的文件，一份是地形文件（可无），一份是对应的模型文件，本次展示的模型是转换成了 3Dtiles 类型的。
　　如果我们只做基础的模型展示，只需要引入一个 js 和一个 css 文件即可

<script src="js/Cesium194/Cesium.js"></script>
<link href="js/Cesium194/Widgets/widgets.css" rel="stylesheet" />

　　cesiumjs 包下载地址

　　然后将处理好的模型文件和地图文件放入项目中即可，也可以采用远程读取方式
　　tileset.json 是模型的属性放置文件，加载此文件可以渲染模型
　　secnetree.json 里面存放了模型的结构信息，如果需要展示模型的结构，只需要加载此文件，并对里面的内容进行序列化

二、放置显示模型的区域

　　首先我们需要一个放置模型的区域位置

<div id="cesiumContainer" style="width: 100%; height: 100%"></div>

三、加载地图

　　定义一个对象，初始化对象，并加载地图
　　url 的内容为地形文件

 1 var viewer = new Cesium.Viewer("cesiumContainer", {
 2             geocoder: false,
 3             selectionIndicator: false,
 4             animation: false,
 5             baseLayerPicker: false,
 6             timeline: false,
 7             sceneMode: Cesium.SceneMode.SCENE3D,
 8             sceneModePicker: false,
 9             navigationHelpButton: false,
10             useDefaultRenderLoop: true,
11             showRenderLoopErrors: true,
12             fullscreenButton: false,
13             infoBox: true,
14             baselLayerPicker: false,
15             vrButton: false,  // VR
16             homeButton: false,
17             imageryProvider: new Cesium.WebMapTileServiceImageryProvider({
18                 url: 'https://t0.tianditu.gov.cn/img_w/wmts?tk=testkey',
19                 layer: 'img',
20                 style: 'default',
21                 tileMatrixSetID: 'w',
22                 format: 'tiles',
23                 maximumLevel: 18
24             }),
25         });
26         viewer.terrainProvider = new Cesium.CesiumTerrainProvider({
27             url: "DEM/dixingfile",
28             baseLayerPicker: false,
29         });;
30 
31 //初始化对象中，所有属性的解释
32 var viewer = new Cesium.Viewer('cesiumContainer',{
33         animation:false,//是否显示左下角的仪表盘
34         baseLayerPicker:false,//是否显示图层选择器按钮，右上角那个地图图标
35         fullscreenButton:false,//是否显示全屏按钮
36         vrButton:false,//是否显示VR按钮
37         geocoder:false,//是否显示搜索按钮
38         homeButton:false,//是否显示主页按钮
39         infoBox:false,//是否显示提示信息
40         sceneModePicker:false,//是否显示右上角的模式切换按钮
41         selectionIndicator:false,//是否显示选取指示器组件
42         timeline:false,//是否显示下边的时间轴
43         navigationHelpButton:false,//是否显示右上角的帮助按钮
44         navigationInstructionsInitiallyVisible:true,//是不显示导航
45         scene3DOnly:true,//是否指定仅为三维模式，全部使用三维模式可节约GPU资源
46         clock : new Cesium.Clock(),//用于控制当前时间的时钟对象  
47         selectedImageryProviderViewModel:undefined,//当前图象图层的显示模型，设置baseLayerPicker为true才生效
48         imageryProviderViewModels : Cesium.createDefaultImageryProviderViewModels(),//可供BaseLayerPicker选择的图像图层ProviderViewModel数组
49         selectedTerrainProviderViewModel:undefined,//当前地形图层的显示模型，设置baseLayerPicker为true才生效
50         terrainProviderViewModels:Cesium.createDefaultTerrainProviderViewModels(),//可供BaseLayerPicker选择的地形图层ProviderViewModel数组
51         // imageryProvider : new Cesium.OpenStreetMapImageryProvider( {    
52         //     credit :'',    
53         //     url : ''    
54         // } ),//图像图层提供者
55         terrainProvider : new Cesium.EllipsoidTerrainProvider(),//地形图层提供者，
56         // skyBox : new Cesium.SkyBox({    
57         //     sources : {
58         //         positiveX : 'stars/TychoSkymapII.t3_08192x04096_80_px.jpg',
59         //         negativeX : 'stars/TychoSkymapII.t3_08192x04096_80_mx.jpg',
60         //         positiveY : 'stars/TychoSkymapII.t3_08192x04096_80_py.jpg',
61         //         negativeY : 'stars/TychoSkymapII.t3_08192x04096_80_my.jpg',
62         //         positiveZ : 'stars/TychoSkymapII.t3_08192x04096_80_pz.jpg',
63         //         negativeZ : 'stars/TychoSkymapII.t3_08192x04096_80_mz.jpg'
64         //     } 
65         // }),//用于渲染星空的SkyBox对象  
66         skyAtmosphere:new Cesium.SkyAtmosphere(),//设置天空大气层
67         fullscreenElement:document.body,//全屏时指定的元素
68         useDefaultRenderLoop:true,//是否开启默认的循环渲染器
69         targetFrameRate:10,//使用默认渲染循环时的目标帧速率
70         showRenderLoopErrors:true,//显示渲染错误信息
71         useBrowserRecommendedResolution:false,//使用浏览器的分辨率进行渲染
72         automaticallyTrackDataSourceClocks : true,//自动追踪最近添加的数据源的时钟设置  
73         contextOptions : undefined,//传递给Scene对象的上下文参数
74         sceneMode:Cesium.SceneMode.SCENE3D,//设置地图场景模式
75         mapProjection:new Cesium.GeographicProjection(),//设置地图投影坐标系
76         // globe:false,//在场景中使用的地球仪。如果设置为false，则不会添加地球仪。
77         orderIndependentTranslucency:true,//设置无关的透明性
78         creditContainer:null,//设置包含CreditDisplay的DOM元素或ID。
79         dataSources:new Cesium.DataSourceCollection(),//设置数据源
80         terrainExaggeration:1.0,//用来放大地形的标量
81         shadows:true,//设置阴影是否由光源投射。
82         terrainShadows:Cesium.ShadowMode.RECEIVE_ONLY,//设置地形图的阴影
83         mapMode2D:Cesium.MapMode2D.INFINITE_SCROLL,//设置二维地图是可旋转的还是可以在水平方向无限滚动。
84         projectionPicker:false,//是否显示投影选择器
85         requestRenderMode:true,//如果为true，则仅当根据场景中的更改确定需要时才会渲染帧
86         maximumRenderTimeChange:true,//设置请求呈现之前允许的最大模拟时间更改
87     });

四、添加模型

　　在将模型添加进去，并且定位模型坐标点，设置视角
　　url 指向的文件为模型文件，只需要加载 tileset.json 文件即可，因为这个文件存放了模型的信息内容

 1 var MainPosition = Cesium.Cartesian3.fromDegrees(110.3245336, 31.1508983, -20); //模型的经纬度信息
 2 var modelMatrix = Cesium.Transforms.headingPitchRollToFixedFrame(MainPosition, new Cesium.HeadingPitchRoll(Cesium.Math.toRadians(-174.9), 0, 0));
 3 
 4 tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
 5             url: "Cesium3DTiles/modelCLM/3dtiles/tileset.json",
 6             modelMatrix: modelMatrix,
 7         }));
 8 
 9         viewer.camera.flyTo({
10             duration: 0.5,
11             destination: Cesium.Cartesian3.fromDegrees(110.32784593574513, 31.15503131147595, 600.6198524134546),  //定位坐标点，建议使用谷歌地球坐标位置无偏差
12             orientation: {
13                 heading: Cesium.Math.toRadians(215),
14                 pitch: Cesium.Math.toRadians(-25),
15                 roll: Cesium.Math.toRadians(0.12880948542545628)
16             }
17         });

　　截至到这里，模型就基本可以展示出来了，下面是对模型的一些操作

五、模型点击事件

　　在点击模型的时候，模型构件是有对应的详细信息的，所以我们可以通过事件获取得到这些模型的属性信息
　　可以通过 feature.getPropertyNames() 拿到模型信息，然后使用对应的形式来处理这些信息
　　如果你不清楚你的模型有哪些属性，可以去模型文件 tileset.json 中查找所有属性。默认点击后会显示出所有信息。

 1 var handler3D = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
 2         handler3D.setInputAction(function (movement) {
 3             var feature = viewer.scene.pick(movement.position);
 4             if (feature instanceof Cesium.Cesium3DTileFeature) {
 5 
 6                 //模型构件的信息数据
 7                 //默认点击后，会显示模型所有属性信息，可通过下面遍历方式，取自己所需要查看的即可
 8                 var propertyNames = feature.getPropertyNames();
 9 
10                 for (var i = 0; i < propertyNames.length; ++i) {
11                     var propertyName = propertyNames[i];
12                     console.log(propertyName)
13                     name1 = feature.getProperty("name")
14                 }
15             }     
16         }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

六、点击地图任意点，获取经纬度及高度

　　当我们遇到比较大的模型时，可以会在模型上进行一些操作，这时，我们需要拿到模型某个位置的经纬度及高度信息，可以通过以下方法拿到

 1 let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
 2         handler.setInputAction(function (event) {
 3             let ray = viewer.camera.getPickRay(event.position);
 4             let cartesian = viewer.scene.globe.pick(ray, viewer.scene);
 5             let cartographic = Cesium.Cartographic.fromCartesian(cartesian);
 6             let lng = Cesium.Math.toDegrees(cartographic.longitude); // 经度
 7             let lat = Cesium.Math.toDegrees(cartographic.latitude); // 纬度
 8             let alt = cartographic.height; // 高度
 9             let coordinate = {
10                 longitude: Number(lng),
11                 latitude: Number(lat),
12                 altitude: Number(alt)
13             };
14             console.log(coordinate);
15         }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

七、获取整个模型的所有构件信息

　　如果我们需要在加载完模型后拿到模型部分位置的信息，或者是对整个模型的某个部件进行处理，那么我们可以在模型加载完成后，将模型对象存入指定的位置。一定要在添加模型的位置去执行此方法，其他位置可能拿不到信息

 1  //构件数据放入对象中
 2 tileset.tileLoad.addEventListener(function (tile) {
 3     processTileFeatures(tile, function (data) {
 4        tileset3dDate.push(data);
 5    });
 6 });
 7             
 8 function processTileFeatures(tile, callback) {
 9     var content = tile.content;
10     var innerContents = content.innerContents;
11     if (Cesium.defined(innerContents)) {
12     var length = innerContents.length;
13     for (var i = 0; i < length; ++i) {
14        processContentFeatures(innerContents[i], callback);
15      }
16    } else {
17        processContentFeatures(content, callback);
18     }
19 }
20 
21 function processContentFeatures(content, callback) {
22    var featuresLength = content.featuresLength;
23    for (var i = 0; i < featuresLength; ++i) {
24         var feature = content.getFeature(i);
25         callback(feature);
26     }
27 }