CesiumJs 简单操作模型
一、所需的地形文件和模型以及 CesiumJs 包
操作之前，我们需要两份对应的文件，一份是地形文件（可无），一份是对应的模型文件，本次展示的模型是转换成了 3Dtiles 类型的。
如果我们只做基础的模型展示，只需要引入一个 js 和 一个 css 文件即可
<script src="js/Cesium194/Cesium.js"></script> <link href="js/Cesium194/Widgets/widgets.css" rel="stylesheet" />
然后将处理好的模型文件和地图文件放入项目中即可，也可以采用远程读取方式
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 }
