在SuperMap iClient3D 11i(2022) for Cesium中使用DynamicLayer3D图层,实现将S3M模型绕某倾斜摄影三维模型服务循环飞行。
时间: 2024-05-20 20:15:05 浏览: 114
SuperMap iClient for 3D 倾斜摄影模型挖方
实现将S3M模型绕某倾斜摄影三维模型服务循环飞行的过程可以分为以下几步:
1. 创建Cesium Viewer对象和SuperMap iClient3D的场景。
```javascript
var viewer = new Cesium.Viewer("cesiumContainer");
var scene = viewer.scene;
var iClient3D = new SuperMap.Web.iClient3DLayer(scene);
```
2. 创建DynamicLayer3D图层对象,设置图层参数。
```javascript
var dynamicLayer3D = new SuperMap.Web.iClient3D.DynamicLayer3D({
url: "http://localhost:8090/iserver/services/3D-Model/rest/realspace", // 倾斜摄影三维模型服务地址
name: "s3m_layer", // 图层名称
datasources: ["gugong"], // 数据源名称
visible: true // 图层可见性
});
```
这里需要注意的是,需要在倾斜摄影三维模型服务中发布S3M模型,并将其归属到指定的数据源中。
3. 将DynamicLayer3D图层添加到SuperMap iClient3D的场景中。
```javascript
iClient3D.addLayer(dynamicLayer3D);
```
4. 获取倾斜摄影三维模型的高度信息。
```javascript
var terrainProvider = new Cesium.CesiumTerrainProvider({
url: "http://localhost:8090/iserver/services/3D-Model/rest/realspace/datas/gugong/config",
});
var ellipsoid = scene.globe.ellipsoid;
var promise = Cesium.sampleTerrainMostDetailed(terrainProvider, [camera.positionCartographic]);
Cesium.when(promise, function(updatedPositions) {
var height = updatedPositions[0].height;
camera.position = ellipsoid.cartographicToCartesian(
new Cesium.Cartographic.fromDegrees(116.403964, 39.915119, height + 7000)
);
camera.up = new Cesium.Cartesian3(0, 0, 1);
camera.lookAt(new Cesium.Cartesian3(116.403964, 39.915119, height + 100), new Cesium.Cartesian3(0, 0, height + 7000));
});
```
这里需要使用Cesium的sampleTerrainMostDetailed方法来获取倾斜摄影三维模型的高度信息,并将相机位置设置在模型上方。
5. 创建动画函数,实现循环飞行效果。
```javascript
var heading = 0;
function flyLoop() {
var pitch = Cesium.Math.toRadians(30);
var roll = Cesium.Math.toRadians(0);
heading += Cesium.Math.toRadians(1);
if (heading > Cesium.Math.TWO_PI) {
heading -= Cesium.Math.TWO_PI;
}
var position = Cesium.Cartesian3.fromDegrees(
116.403964 + Math.cos(heading) * 0.01,
39.915119 + Math.sin(heading) * 0.01,
camera.positionCartographic.height
);
camera.setView({
destination: position,
orientation: {
heading: heading,
pitch: pitch,
roll: roll
}
});
}
```
这里的循环飞行效果是通过不断修改相机位置和方向实现的。
6. 调用动画函数,启动循环飞行效果。
```javascript
setInterval(flyLoop, 50);
```
这里使用setInterval函数每隔50毫秒调用一次动画函数,实现循环飞行效果。
完整代码如下所示:
```javascript
var viewer = new Cesium.Viewer("cesiumContainer");
var scene = viewer.scene;
var iClient3D = new SuperMap.Web.iClient3DLayer(scene);
var dynamicLayer3D = new SuperMap.Web.iClient3D.DynamicLayer3D({
url: "http://localhost:8090/iserver/services/3D-Model/rest/realspace",
name: "s3m_layer",
datasources: ["gugong"],
visible: true
});
iClient3D.addLayer(dynamicLayer3D);
var terrainProvider = new Cesium.CesiumTerrainProvider({
url: "http://localhost:8090/iserver/services/3D-Model/rest/realspace/datas/gugong/config",
});
var ellipsoid = scene.globe.ellipsoid;
var promise = Cesium.sampleTerrainMostDetailed(terrainProvider, [camera.positionCartographic]);
Cesium.when(promise, function(updatedPositions) {
var height = updatedPositions[0].height;
camera.position = ellipsoid.cartographicToCartesian(
new Cesium.Cartographic.fromDegrees(116.403964, 39.915119, height + 7000)
);
camera.up = new Cesium.Cartesian3(0, 0, 1);
camera.lookAt(new Cesium.Cartesian3(116.403964, 39.915119, height + 100), new Cesium.Cartesian3(0, 0, height + 7000));
});
var heading = 0;
function flyLoop() {
var pitch = Cesium.Math.toRadians(30);
var roll = Cesium.Math.toRadians(0);
heading += Cesium.Math.toRadians(1);
if (heading > Cesium.Math.TWO_PI) {
heading -= Cesium.Math.TWO_PI;
}
var position = Cesium.Cartesian3.fromDegrees(
116.403964 + Math.cos(heading) * 0.01,
39.915119 + Math.sin(heading) * 0.01,
camera.positionCartographic.height
);
camera.setView({
destination: position,
orientation: {
heading: heading,
pitch: pitch,
roll: roll
}
});
}
setInterval(flyLoop, 50);
```
阅读全文