<!--
 * 显示基本的三维Globe
 * 1、添加SuperMap发布的地形数据
 * 2、添加SuperMap发布的影像数据
 * 3、量测面积
 * 4、淹没区分析
 * @Author: jiangbotao
 * @Date: 2019-12-02 09:05:50
 * @LastEditors: jiangbotao
 * @LastEditTime: 2019-12-04 20:09:26
 * @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 class="param-item">
				<label>颜色透明</label>
				<input class="colorPicker" size="8" data-bind="value: color,valueUpdate: 'input'" id="colorPicker">
			</div>
			<div class="param-item">
				<label>颜色透明容限</label>
				<input type="range" min="0" max="1" step="0.02" data-bind="value: tolerance,valueUpdate: 'input'" id="tolerance" style="display: block;width:200px;margin: 5px 0">
			</div>
			<div class="param-item">
				<button type="button" id="area" class="button black">测面</button>
				<button type="button" id="draw" class="button black">绘面</button>
				<button type="button" id="begin" 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%',
				position: "absolute",
				top: "0px",
				bottom: "0px",
				left: "0px",
				backgroundColor: "#000000"
			},
			smviewer:{}
		}
	},
	mounted: function(){
		this.viewer=new Cesium.Viewer("cesiumContainer", {
				terrainProvider : new Cesium.CesiumTerrainProvider({
				url : URL_CONFIG.SiChuan_TERRAIN,
				isSct : true//地形服务源自SuperMap iServer发布时需设置isSct为true
			}),
		});
		// 隐藏logo
		$(".cesium-widget-credits")[0].style.visibility="hidden";
		// 隐藏导航工具
		// $(".cesium-viewer-navigationContainer")[0].style.visibility="hidden";

		// 添加影像数据
		var layer = this.viewer.imageryLayers.addImageryProvider(new Cesium.SuperMapImageryProvider({
			url : URL_CONFIG.SiChuan_IMG
		}));

		var clampMode = 0; // 空间模式
		var scene = this.viewer.scene;
		var widget = this.viewer.cesiumWidget;
		var handlerArea, handlePolygon;
		// 设置相机视图
		scene.camera.setView({
			destination : new Cesium.Cartesian3(-1206939.1925299785, 5337998.241228442, 3286279.2424502545),
			orientation : {
				heading : 1.4059101895600987,
				pitch : -0.20917672793046682,
				roll : 2.708944180085382e-13
			}
		});

		// 量测面积代码
		var stviewer = this.viewer;
		var positions = null;
		handlerArea = new Cesium.MeasureHandler(this.viewer, Cesium.MeasureMode.Area, clampMode);
		handlerArea.measureEvt.addEventListener(function(result){
			var mj = Number(result.area);
			var area = mj > 1000000 ? (mj/1000000).toFixed(2) + "km²" : mj.toFixed(2) + "㎡"
			handlerArea.areaLabel.text = "面积:" + area;
		});
		handlerArea.activeEvt.addEventListener(function(isActive){
			if(isActive === true){
				stviewer.enableCursorStyle = false;
				stviewer._element.style.cursor = "";
				$("body").removeClass("measureCur").addClass("measureCur");
			}else{
				stviewer.enableCursorStyle = true;
				$("body").removeClass("measureCur");
			}
		});
		$("#area").click(function(){
			deactiveAll();
			handlerArea&&handlerArea.activate();
		});

		// 绘制面
		handlePolygon = new Cesium.DrawHandler(this.viewer, Cesium.DrawMode.Polygon);
		handlePolygon.drawEvt.addEventListener(function(polygon){
			var array = [].concat(polygon.object.positions);
			positions = [];
			for(var i = 0, len = array.length; i < len; i++){
				var cartographic = Cesium.Cartographic.fromCartesian(array[i]);
				var longitude = Cesium.Math.toDegrees(cartographic.longitude);
				var latitude = Cesium.Math.toDegrees(cartographic.latitude);
				var h=cartographic.height;
				if(positions.indexOf(longitude)===-1&&positions.indexOf(latitude)===-1){
					positions.push(longitude);
					positions.push(latitude);
					positions.push(h);
				}
			}
		});
		$("#draw").click(function(){
			deactiveAll();
			handlePolygon && handlePolygon.activate();
		});

		var hyp = new Cesium.HypsometricSetting();
		//设置显示模式
		hyp.DisplayMode = Cesium.HypsometricSettingEnum.DisplayMode.FACE;
		//设置线颜色为红色
		hyp._lineColor = new Cesium.Color(1.0, 0.0, 0.0, 1.0);
		//设置最大/最小可见高度
		hyp.MinVisibleValue = 0;
		//设置颜色表的最大/最小key值,表示高度
		hyp.ColorTableMinKey = 1;
		hyp.ColorTableMaxKey = 9000;
		//新建颜色表
		var colorTable = new Cesium.ColorTable();
		var height = 1;
		//每隔200m向颜色表插入一个随机色
		for(var i = 0; i<90; i++){
			height += 200;
			colorTable.insert(height, getRandomColor());
		}
		//返回随机颜色
		function getRandomColor(){
			return new Cesium.Color(Math.random(), Math.random(), Math.random());
		}
		hyp.ColorTable = colorTable;
		hyp.Opacity = 0.8;
		//等高线间隔为200m
		hyp.LineInterval = 200.0;
		// 淹没分析
		var currentHeight = 0;
		var maxValue = 0;
		var minValue = 0;
		var int = null;
		
		function flood(positions){
			currentHeight = 0;
			int = self.setInterval("flood()", 100);
			maxValue = 3300;
			minValue = 3000;
			hyp.MinVisibleValue = minValue;
			currentHeight = minValue;
			window.flood = function() {
				if(currentHeight > maxValue) {
					self.clearInterval(int);
					return;
				}
				hyp.MaxVisibleValue = currentHeight;
				hyp.CoverageArea = positions;
				console.log(positions);
				stviewer.scene.globe.HypsometricSetting = {
					hypsometricSetting : hyp,
					analysisMode : Cesium.HypsometricSettingEnum.AnalysisRegionMode.ARM_REGION
				};
				currentHeight += (500) / 10;
			};
		}
		$("#begin").click(function(){
			flood(positions);
			handlePolygon.polygon.show = false;
			// handlePolygon.polyline.show=false;
		});

		function clearAll(){
			handlerArea && handlerArea.clear();
			handlePolygon && handlePolygon.clear();
		}

		function deactiveAll(){
			handlePolygon && handlePolygon.deactivate();
			handlerArea && handlerArea.deactivate();
		}
		
		// 颜色及透明度设置
		$("#colorPicker").spectrum({
			color: "rgba(255,255,255)",
			showPalette: true,
			showAlpha: true,
			localStorageKey: "spectrum.demo"
			// palette: palette
		});
		var viewModel = {
			color : "#ffffff",
			tolerance : 0
		};
		Cesium.knockout.track(viewModel);
		// 通过toolbar的控件控制地图图层的展示
		var toolbar = document.getElementById("toolbar");
		Cesium.knockout.applyBindings(viewModel, toolbar);
		Cesium.knockout.getObservable(viewModel, "color").subscribe(
			function(newValue) {
				var selectedColor = Cesium.Color.fromCssColorString(newValue);
				layer.transperantBackColor = selectedColor;
			}
		);
		Cesium.knockout.getObservable(viewModel, "tolerance").subscribe(
			function(newValue) {
				layer.transperantBackColorTolerance = newValue;
			}
		);
        $("#loadingbar").remove();
        $("#toolbar").show();
    }
};
</script>

<style>
.cesium-infoBox-visible {
    transform: translate(0,0);
    visibility: hidden;
    opacity: 1;
    transition: opacity 0.2s ease-out,transform 0.2s ease-out;
}
</style>