首页 / 浏览问题 / 三维GIS / 问题详情
webgl版有地下模式吗
24EXP 2017年04月20日
desktop用地下模式,可以进行地表开挖,那么webgl的client能实现类似的效果吗,有没有相关的实例

1个回答

抱歉啦,现在WebGL客户端还不能进行地表开挖。
3,389EXP 2017年04月20日
没法地表开挖,那有什么显示地下单元的方法呢?

有的哈。

本地包的这个范例:/examples/showUnderGround.html。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <title>地下场景</title>
    <link href="./css/widgets.css" rel="stylesheet">
    <script src="./js/config.js"></script>
    <script type="text/javascript" src="./js/require.min.js" data-main="js/main"></script>
    <style>
        html, body, #cesiumContainer {
            width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
        }
        #toolbar{
            margin: 5px;
            padding: 2px 5px;
            position: absolute;
            left: 0px;
            top: 0px;
            background: rgba(42, 42, 42, 0.8);
            padding: 4px;
            border-radius: 4px;
            color: #ffffff;
        }
        #toolbar input {
            vertical-align: middle;
            padding-top: 2px;
            padding-bottom: 2px;
        }
    </style>
</head>
<body>
<div id="cesiumContainer"></div>
<div id="toolbar">
    <table>
        <tbody>
        <tr>
            <td>透明度</td>
            <td>
                <input type="range" min="0" max="1" step="0.02" data-bind="value: globeAlpha, valueUpdate: 'input'">
                <input type="text" size="5" data-bind="value: globeAlpha">
            </td>
        </tr>
        </tbody>
    </table>
</div>
<script>
    function onload(Cesium) {
        var viewer = new Cesium.Viewer('cesiumContainer');
        var globe = viewer.scene.globe;
        globe.globeAlpha = 1.0;
        var scene = viewer.scene;
        scene.skyAtmosphere.show = false;
        scene.skyBox.show = false;
        viewer.scene.undergroundMode = true;//设置开启地下场景
        viewer.scene.screenSpaceCameraController.minimumZoomDistance = -1000;//设置相机最小缩放距离,距离地表-1000米

        //监听滑动条变化,改变alpha的值,设置地表透明度
        var viewModel = {
            globeAlpha : 1.0
        };
        Cesium.knockout.track(viewModel);
        var toolbar = document.getElementById('toolbar');
        Cesium.knockout.applyBindings(viewModel, toolbar);
        Cesium.knockout.getObservable(viewModel,'globeAlpha').subscribe(
                function(newValue) {
                    globe.globeAlpha = newValue;//设置地表透明度
                }
        );

        viewer.scene.addS3MTilesLayerByScp('http://www.supermapol.com/realspace/services/3D-pipelineS3M/rest/realspace/datas/JS_ResultNetWork3D@CQData/config',{
            name : 'pipeline'
        });
        viewer.scene.addS3MTilesLayerByScp('http://www.supermapol.com/realspace/services/3D-pipelineS3M/rest/realspace/datas/JS_ResultNetWork3D_Node@CQData/config',{
            name : 'pipeline_node'
        });
        scene.camera.setView({
            destination : Cesium.Cartesian3.fromDegrees(108.951657,34.907628, -100),
            orientation : {
                heading : 4.925611831674058,
                pitch : -0.38480194654845334,
                roll : 6.279697125036652
            }
        });
    }
</script>
</body>
</html>

...