CesiumJS+SuperMap3D.js混用实现可视域分析 S3M图层加载 裁剪区域绘制
版本简介：
cesium：1.99；Supermap3D：SuperMap iClient JavaScript 11i(2023)；
官方下载文档链家：SuperMap技术资源中心|为您提供全面的在线技术服务
示例参考：support.supermap.com.cn:8090/webgl/Cesium/examples/webgl/examples.html#analysis
support.supermap.com.cn:8090/webgl/examples/webgl/examples.html
Cesium：场景初始化、渲染、Bing地图、S3M图层加载。
SuperMap3D：可视域分析、S3M图层加载、裁剪区域绘制、Knockout绑定等功能。
两者结合：Cesium 提供基础渲染和事件处理，SuperMap3D 提供高级的功能实现。
1. Cesium 部分
场景初始化与配置
Cesium.Ion.defaultAccessToken = '...';
var viewer = new Cesium.Viewer('Container', {
selectionIndicator: false,
infoBox: false,
terrainProvider: Cesium.createWorldTerrain()
});
viewer.resolutionScale = window.devicePixelRatio;
- 这段代码是使用 Cesium 进行场景渲染的部分。
Cesium.Ion.defaultAccessToken用于访问 Cesium Ion 服务，viewer是 Cesium Viewer 的实例，它用于创建一个可视化容器，其中指定了Container元素来渲染场景。createWorldTerrain()设置了全球地形服务，resolutionScale提高了分辨率，以适应高DPI屏幕。
添加Bing地图图层
viewer.imageryLayers.addImageryProvider(new Cesium.BingMapsImageryProvider({
url: 'https://dev.virtualearth.net',
mapStyle: Cesium.BingMapsStyle.AERIAL,
key: URL_CONFIG.BING_MAP_KEY
}));
- 这里是Cesium的图层管理部分，使用
BingMapsImageryProvider添加了 Bing 地图的航拍图层。Cesium 的图层管理方式主要通过imageryLayers.addImageryProvider()实现。
事件处理与视口操作
var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
handler.setInputAction(function (e) {
//...
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
- 这一部分代码处理的是 Cesium 中的鼠标事件，如屏幕空间事件(
ScreenSpaceEventHandler) 和鼠标移动事件 (MOUSE_MOVE)。这是 Cesium 的交互控制，通过捕捉鼠标操作来对场景进行更新。
2. SuperMap3D 部分
可视域分析与裁剪
var viewshed3D = new SuperMap3D.ViewShed3D(scene);
- 这里是 SuperMap3D 提供的可视域分析功能的初始化。
SuperMap3D.ViewShed3D是用于在 3D 场景中执行可视域分析的类，用于计算某个点是否可见。
加载S3M图层
var promise = scene.open('http://www.supermapol.com/realspace/services/3D-CBD-2/rest/realspace');
SuperMap3D.when(promise, function (layers) {
// 设置相机位置等操作
}, function (e) {
// 错误处理
});
- 这里通过
scene.open()加载了 SuperMap3D 的 S3M 图层，这个图层是 SuperMap 提供的特定格式，通常用于大规模3D场景的渲染和展示。
裁剪区域操作
var handlerPolygon = new SuperMap3D.DrawHandler(viewer, SuperMap3D.DrawMode.Polygon, 0);
handlerPolygon.movingEvt.addEventListener(function (windowPosition) {
if (handlerPolygon.isDrawing) {
tooltip.showAt(windowPosition, '绘制相交区域(右键结束绘制)
'); // 绘制提示
}
});
handlerPolygon.drawEvt.addEventListener(function (result) {
var array = [].concat(result.object.positions);
var positions = [];
for (var i = 0, len = array.length; i < len; i++) {
var cartographic = SuperMap3D.Cartographic.fromCartesian(array[i]);
var longitude = SuperMap3D.Math.toDegrees(cartographic.longitude);
var latitude = SuperMap3D.Math.toDegrees(cartographic.latitude);
var h = cartographic.height;
positions.push(longitude, latitude, h);
}
viewshed3D.addClipRegion({name: 'test', position: positions}); // 添加裁剪区域
});
- 这是 SuperMap3D 的裁剪操作部分。通过
SuperMap3D.DrawHandler绘制多边形区域，viewshed3D.addClipRegion()函数则用于将绘制的区域应用到可视域分析对象中，进行裁剪。 DrawHandler用于激活绘制多边形裁剪面的功能。movingEvt事件在绘制过程中显示提示信息。drawEvt事件在绘制完成时获取多边形的坐标，并将其设置为可视域的裁剪区域。
Knockout 绑定
SuperMap3D.knockout.track(viewModel);
SuperMap3D.knockout.applyBindings(viewModel, toolbar);
- 这段代码是使用 SuperMap3D 提供的 Knockout 绑定功能，目的是将数据模型
viewModel与 UI 绑定。这个功能允许动态更新可视域分析的参数。
3. Cesium 和 SuperMap3D 的结合
Cesium 在整个代码中主要负责场景渲染、基础交互和图层的管理，如初始化 Viewer、处理鼠标事件、添加图层等。而 SuperMap3D 负责具体的功能实现，比如可视域分析、S3M 图层加载、裁剪操作等。
两者通过 viewer.scene 来共享场景，SuperMap3D 的功能在 Cesium 的场景之上实现。例如：
var viewshed3D = new SuperMap3D.ViewShed3D(scene);—— 这里的scene是 Cesium 场景，而viewshed3D是 SuperMap3D 的可视域对象，它依赖于 Cesium 的场景。- 加载S3M图层和添加裁剪区域也是在 Cesium 场景中进行操作，二者配合使用
4.完整代码展示
可视域分析
注意替换Cesium.Ion.defaultAccessToken，以及天地图官网申请的密钥