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 onload(Cesium) {//初始化viewer部件var viewer = new Cesium.Viewer('cesiumContainer');viewer.imageryLayers.addImageryProvider(new Cesium.BingMapsImageryProvider({url : '',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;onload(Cesium);}</script></body></html>
2.代码
