SuperMap iClient3D for WebGL 示范案例（一）倾斜模型加载

2023-11-04 17:08:10
0.前言
SuperMap官网提供了许多webgl示范案例，然而仅依赖示范案例源码独立实现这些功能还存在很多问题，这里通过个人实现过程，详述这些功能的实现步骤和代码。
<!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="../../Build/Cesium/Widgets/widgets.css" rel="stylesheet">
    <link href="./css/pretty.css" rel="stylesheet">
    <script src="./js/jquery.min.js"></script>
    <script src="./js/config.js"></script>
    <script src="./js/slider.js"></script>
    <script type="text/javascript" src="../../Build/Cesium/Cesium.js"></script>
    <style>
        #toolbar input {
            vertical-align: middle;
            padding-top: 2px;
            padding-bottom: 2px;
            margin: 10px 0px;
            width:150px;;
        }
    </style>
</head>
<body>
<div id="cesiumContainer"></div>
<div id="toolbar" class="param-container tool-bar">
    <table>
        <tbody><tr>
            <td>亮度</td>
            <td>
                <input type="range" min="0" max="2" step="0.02" data-bind="value: brightness, valueUpdate: 'input'">
            </td>
        </tr>
        <tr>
            <td>对比度</td>
            <td>
                <input type="range" min="0" max="2" step="0.02" data-bind="value: contrast, valueUpdate: 'input'">
            </td>
        </tr>
        <tr>
            <td>色调</td>
            <td>
                <input type="range" min="-1" max="1" step="0.02" data-bind="value: hue, valueUpdate: 'input'">
            </td>
        </tr>
        <tr>
            <td>饱和度</td>
            <td>
                <input type="range" min="0" max="2" step="0.02" data-bind="value: saturation, valueUpdate: 'input'">
            </td>
        </tr>
        <tr>
            <td>伽马</td>
            <td>
                <input type="range" min="0" max="2" step="0.02" data-bind="value: gamma, valueUpdate: 'input'">
            </td>
        </tr>
        </tbody></table>
</div>
<div id='loadingbar' class="spinner">
    <div class="spinner-container container1">
        <div class="circle1"></div>
        <div class="circle2"></div>
        <div class="circle3"></div>
        <div class="circle4"></div>
    </div>
    <div class="spinner-container container2">
        <div class="circle1"></div>
        <div class="circle2"></div>
        <div class="circle3"></div>
        <div class="circle4"></div>
    </div>
    <div class="spinner-container container3">
        <div class="circle1"></div>
        <div class="circle2"></div>
        <div class="circle3"></div>
        <div class="circle4"></div>
    </div>
</div>
<script type="text/javascript">
    function onl oad(Cesium) {
        //初始化viewer部件
        var viewer = new Cesium.Viewer('cesiumContainer');
        viewer.imageryLayers.addImageryProvider(new Cesium.BingMapsImageryProvider({
            url : 'https://dev.virtualearth.net',
            mapStyle : Cesium.BingMapsStyle.AERIAL,
            key : URL_CONFIG.BING_MAP_KEY
        }));
        var scene = viewer.scene;
        var widget = viewer.cesiumWidget;
        var sceneLayer;
        $('#loadingbar').remove();
        
        try{
           var promise = scene.open(URL_CONFIG.SCENE_SUOFEIYA);
            Cesium.when(promise,function(layers){
                var layer = scene.layers.find('Config');
                sceneLayer = layer;
                //设置相机位置，定位至模型
                scene.camera.setView({
                    //将经度、纬度、高度的坐标转换为笛卡尔坐标
                    destination : new Cesium.Cartesian3(-2653915.6463913363,3571045.726807149,4570293.566342328),
                    orientation : {
                        heading : 2.1953426301495345,
                        pitch : -0.33632707158103625,
                        roll : 6.283185307179586
                    }
                });
            },function(){
                var title = '加载SCP失败，请检查网络连接状态或者url地址是否正确？';
                widget.showErrorPanel(title, undefined, e);
            });
        }
        catch(e){
            if (widget._showRenderLoopErrors) {
                var title = '渲染时发生错误，已停止渲染。';
                widget.showErrorPanel(title, undefined, e);
            }
        }
        $("#toolbar").show();
          // The viewModel tracks the state of our mini application.
        var viewModel = {
            brightness: 1,
            contrast: 1,
            hue: 0,
            saturation: 1,
            gamma: 1
        };
        // Convert the viewModel members into knockout observables.
        Cesium.knockout.track(viewModel);
        // Bind the viewModel to the DOM elements of the UI that call for it.
        var toolbar = document.getElementById('toolbar');
        Cesium.knockout.applyBindings(viewModel, toolbar);

        // Make the active imagery layer a subscriber of the viewModel.
        function subscribeLayerParameter(name) {
            Cesium.knockout.getObservable(viewModel, name).subscribe(
                function(newValue) {
                    var layer = sceneLayer;
                    layer[name] = parseFloat(newValue);
                    //sceneLayers[0].refresh();
                }
            );
        }
        subscribeLayerParameter('brightness');
        subscribeLayerParameter('contrast');
        subscribeLayerParameter('hue');
        subscribeLayerParameter('saturation');
        subscribeLayerParameter('gamma');
    }
    if (typeof Cesium !== 'undefined') {
        window.startupCalled = true;
        onl oad(Cesium);
    }
    </script>
</body>
</html>
2.代码
码农公寓

相关文章
