标签：SuperMap WebGL viewModel scene iClient3D var Cesium toolbar subscribeLayerParame
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.代码
标签：SuperMap,WebGL,viewModel,scene,iClient3D,var,Cesium,toolbar,subscribeLayerParame 来源： https://blog.csdn.net/baidu_34785556/article/details/112958925
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。