<!--
 * @Author: jiangbotao
 * 演示倾斜摄影大场景被淹没
 * 使用场景中的HYP对象
 * @Date: 2019-12-02 09:05:50
 * @LastEditors: jiangbotao
 * @LastEditTime: 2019-12-07 13:52:58
 * @FilePath: \WebGL_Webpack_Vue\components\viewer.vue
 -->
<template>
	<div>
		<div id="cesiumContainer" v-bind:style="styleObject"></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>
		<div id="toolbar" class="param-container tool-bar">
			<div id="setingBar">
				<div class="form-group">
					<input id="maxHeight" value="71" required="required" class="form-control"/>
					<label class="form-label">最大高度  (米) :    </label>
				</div>
				<div class="form-group">
					<input id="minHeight" value="60" required="required" class="form-control"/>
					<label  class="form-label">最小高度  (米) :</label>
				</div>
				<div class="form-group">
					<input id="speed" value="5" required="required" class="form-control"/>
					<label class="form-label">淹没速度(米/秒):</label>
				</div>
			</div>
			<div style="margin-left: 40px;">
				<button type="button" id="begin" class="button black">开始</button>
				<button type="button" id="clear" class="button black">清除</button>
			</div>
		</div>
	</div>
</template>

<script>
import URL_CONFIG from './../config/urlConfig.vue';
const Cesium = window.Cesium;
export default {
	data: function() {
		return {
			styleObject:{
				width: '100%',
				height: '100%',
				position: 'absolute',
				top: '0px',
				bottom: '0px',
				left: '0px',
				backgroundColor: '#000000'
			},
			smviewer:{}
		}
	},
	mounted: function(){
		this.viewer=new Cesium.Viewer('cesiumContainer', {});
		// 隐藏logo
		$(".cesium-widget-credits")[0].style.visibility="hidden";
		// 隐藏导航工具
		// $(".cesium-viewer-navigationContainer")[0].style.visibility="hidden";
		
		this.viewer.imageryLayers.addImageryProvider(new Cesium.BingMapsImageryProvider({
			url : 'https://dev.virtualearth.net',
			mapStyle : Cesium.BingMapsStyle.AERIAL,
			key : URL_CONFIG.BING_MAP_KEY
		}));
		var scene = this.viewer.scene;
		var widget = this.viewer.cesiumWidget;
		$(".form-group").show();
		$(".element").show();
		$('#loadingbar').remove();
		try{
			var promise = scene.open(URL_CONFIG.SCENE_SRSB);
			Cesium.when(promise, function(layers){
				// 设置相机视角，便于查看模型
				scene.camera.setView({
					destination : Cesium.Cartesian3.fromDegrees(13.0353, 47.8084, 100.0),
						orientation:{
							heading:0.7272,
							pitch:-0.2672,
							roll:0
						}
				});
			}, function(){
				var title = '加载SCP失败，请检查网络连接状态或者url地址是否正确？';
				widget.showErrorPanel(title, undefined, e);
			});
		}catch(e){
			if (widget._showRenderLoopErrors) {
				var title = '渲染时发生错误，已停止渲染。';
				widget.showErrorPanel(title, undefined, e);
			}
		}

		var currentHeight = 0;
		var maxValue = 0;
		var minValue = 0;
		var int = null;

		document.getElementById("begin").onclick = function() {
			currentHeight = 0;
			int = self.setInterval("flood()", 100);
			maxValue = parseInt(document.getElementById("maxHeight").value);
			minValue = parseInt(document.getElementById("minHeight").value);
		};

		window.flood = function() {
			if(currentHeight > maxValue) {
				self.clearInterval(int);
				return;
			}

			var layer = scene.layers.find("srsb");
			var hyp = new Cesium.HypsometricSetting();
			//创建分层设色对象   设置最大/最小可见高度   颜色表  显示模式   透明度及线宽
			var colorTable = new Cesium.ColorTable();
			colorTable.insert(100, new Cesium.Color(0, 39/255, 148/255));
			colorTable.insert(0, new Cesium.Color(149/255, 232/255, 249/255));
			hyp.MaxVisibleValue = currentHeight;
			hyp.MinVisibleValue = minValue;
			hyp.ColorTable = colorTable;
			hyp.DisplayMode = Cesium.HypsometricSettingEnum.DisplayMode.FACE;
			hyp.Opacity = 0.6;
			hyp.LineInterval = 10.0;

			//设置图层分层设色属性
			layer.hypsometricSetting = {
				hypsometricSetting : hyp,
				analysisMode : Cesium.HypsometricSettingEnum.AnalysisRegionMode.ARM_ALL
			};
			currentHeight += (parseInt(document.getElementById("speed").value))/10;
		};

		document.getElementById("clear").onclick = function() {
			self.clearInterval(int);
			var layer = scene.layers.find("sci_park");
			var hyp = new Cesium.HypsometricSetting();
			hyp.MaxVisibleValue = 0;
			layer.hypsometricSetting = {
				hypsometricSetting : hyp,
				analysisMode : Cesium.HypsometricSettingEnum.AnalysisRegionMode.ARM_ALL
			}
		};
	}
}
</script>

<style>
.form-group::before {
	content: attr(data-foo);
	color: black;
}
#setingBar{
	width:150px;
	height:110px;
	background: rgba(42, 42, 42, 0.4);
	padding: 8px;
	border-radius: 4px;
	color:cornflowerblue
}
#toolbar{
	width: 200px;
}
</style>