CesiumJS+SuperMap3D.js混用实现通视分析

版本简介：

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用于场景渲染、光照效果和鼠标交互处理，而SuperMap3D则负责加载3D场景和实现通视分析功能。这种设计让Cesium负责基础的场景渲染，而SuperMap3D负责更高级的功能实现，例如加载特定的SCP文件和处理视线分析。

1. Cesium负责的部分：

场景的初始化与渲染

Cesium.Ion.defaultAccessToken = 'your token';
var viewer = new Cesium.Viewer('Container', {
    selectionIndicator: false,
	infoBox: false,
	terrainProvider: Cesium.createWorldTerrain()
});

这段使用了Cesium来创建场景。Cesium.Viewer用于初始化Cesium的Viewer，并且指定了不显示选择指示器、信息框，同时使用了Cesium自带的世界地形Cesium.createWorldTerrain()。

场景配置与光照

scene.shadowMap.darkness = 1.275; 
scene.hdrEnabled = false;
scene.sun.show = true;
scene.lightSource.ambientLightColor = new Cesium.Color(0.65, 0.65, 0.65, 1);
var position1 = new Cesium.Cartesian3.fromDegrees(116.261209157595, 39.3042238956531, 480);

这段代码使用了Cesium的场景相关配置，包括设置阴影、光照、HDR效果等。另外，通过Cesium.Cartesian3.fromDegrees()将经纬度转换为三维笛卡尔坐标，添加了光源。

鼠标交互处理

var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
handler.setInputAction(function (e) {
    scene.pickPositionAsync(e.position).then((position)=>{
        addTarget(position);
    });
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);

Cesium的ScreenSpaceEventHandler用于处理鼠标事件，这里通过鼠标点击事件获取场景中的点，并调用pickPositionAsync()来计算点击位置的三维坐标。

2. SuperMap3D负责的部分：

场景加载与配置

var promise = scene.open('http://www.supermapol.com/realspace/services/3D-CBD-2/rest/realspace');
SuperMap3D.when.all(promise, function (layer) {
    scene.camera.setView({
        destination: new SuperMap3D.Cartesian3.fromDegrees(116.44621857300415, 39.899281526734555, 216.7793905027196),
        orientation: {
            heading: 0.41348036210986194,
            pitch: -0.13636490404291735,
            roll: 6.283185307179563
        }
    });
    for (var i = 0; i < layer.length; i++) {
        layer[i].selectEnabled = false;
    }
    sightline.build();
}, function (e) {
    widget.showErrorPanel(title, undefined, e);
});

这里通过SuperMap3D的scene.open()加载了SuperMap的3D场景，并且通过SuperMap3D.Cartesian3.fromDegrees()设定相机视角。加载完成后，调用setView调整相机角度。

通视分析功能

var sightline = new Cesium.Sightline(scene);
sightline.viewPosition = cartographic;
sightline.addTargetPoint({
    position: cartographic,
    name: name
});

虽然Sightline是通过Cesium创建的，但功能实现是通过SuperMap3D管理的，特别是addTargetPoint函数，该函数负责通视分析中添加目标点。

3.具体代码

    
    
    
    
    
    
    
    
    

    
	




    

        

        

        

        

    
    

        

        

        

        

    
    

        

        

        

        

    


    添加观察点
    添加目标点
    清除

记得更改成自己的token

4.实现效果展示：