<!--
 * 显示基本的三维Globe
 * 1、添加SuperMap发布的地形数据
 * 2、添加SuperMap发布的影像数据
 * 3、淹没区分析
 *   3.1 Entity分析
 *   3.2 Primitive分析
 * @Author: jiangbotao
 * @Date: 2019-12-02 09:05:50
 * @LastEditors: jiangbotao
 * @LastEditTime: 2019-12-09 12:22:02
 * @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">
				<button type="button" id="draw" class="button black">绘制分析面</button>
				<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%',
				position: "absolute",
				top: "0px",
				bottom: "0px",
				left: "0px",
				backgroundColor: "#000000"
			},
			viewer:{}
		}
	},
	mounted: function(){
		var __this = this;
		__this.viewer=new Cesium.Viewer("cesiumContainer", {
				terrainProvider : new Cesium.CesiumTerrainProvider({
				url : URL_CONFIG.SiChuan_TERRAIN,
				isSct : true//地形服务源自SuperMap iServer发布时需设置isSct为true
			}),
		});

		var scene = __this.viewer.scene;
		var widget = __this.viewer.cesiumWidget;
		// 隐藏logo
		$(".cesium-widget-credits")[0].style.visibility="hidden";
		// 隐藏导航工具
		// $(".cesium-viewer-navigationContainer")[0].style.visibility="hidden";
		// 添加数据服务
		this.addLayers(__this.viewer);

		var clampMode = 0; // 空间模式
		var handlerPolygon;
		var positions = null;
		var positions2d = null;

		// 绘制面
		handlerPolygon = new Cesium.DrawHandler(__this.viewer, Cesium.DrawMode.Polygon);
		handlerPolygon.drawEvt.addEventListener(function(polygon){
			var array = [].concat(polygon.object.positions);
			positions = [];
			positions2d = [];
			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);
					// 淹没分析时的固定底面
					positions2d.push(longitude);
					positions2d.push(latitude);
					positions2d.push(1000.0);
				}
			}
			return positions;
		});
		$("#draw").click(function(){
			handlerPolygon && handlerPolygon.deactivate();
			handlerPolygon && handlerPolygon.activate();
		});

		$("#begin").click(function(){
			var waterHeight = 2000;
			var targetHeight = 3500;
			var entities = __this.viewer.entities;
			//方式1
			__this.floodCal(entities, positions2d, waterHeight, targetHeight);
			// 方式2
			// __this.floodParse(scene, positions2d, waterHeight, targetHeight);
			handlerPolygon && handlerPolygon.clear();
		});

		$("#clear").click(function(){
			__this.viewer.entities.removeAll();
			handlerPolygon && handlerPolygon.clear();
		});
		
        $("#loadingbar").remove();
        $("#toolbar").show();
	},
	methods: {
		addLayers: function(viewer){
			var __this = this;
			// 添加影像数据
			var layer = viewer.imageryLayers.addImageryProvider(new Cesium.SuperMapImageryProvider({
				url : URL_CONFIG.SiChuan_IMG
			}));
			// 设置相机视图
			viewer.scene.camera.setView({
				destination : new Cesium.Cartesian3(-1206939.1925299785, 5337998.241228442, 3286279.2424502545),
				orientation : {
					heading : 1.4059101895600987,
					pitch : -0.20917672793046682,
					roll : 2.708944180085382e-13
				}
			});
		},
		measureArea: function(handlerArea, viewer){
			var clampMode = 0; // 空间模式
			var positions = null;
			// handlerArea = new Cesium.MeasureHandler(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){
					viewer.enableCursorStyle = false;
					viewer._element.style.cursor = "";
					$("body").removeClass("measureCur").addClass("measureCur");
				}else{
					viewer.enableCursorStyle = true;
					$("body").removeClass("measureCur");
				}
			});
		},
		initHyp: function(){
			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;

			return hyp;
		},
		floodCal: function(entities, positions2d, waterHeight, targetHeight){
			let entity = entities.add({
				polygon : {
					hierarchy : new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromDegreesArrayHeights(positions2d)),
					perPositionHeight: true,
					extrudedHeight: new Cesium.CallbackProperty(function(){
						waterHeight+=20;
						if(waterHeight>targetHeight){
							waterHeight=targetHeight;//给个最大值
						}
						return waterHeight
					}, false),
					material: new Cesium.ImageMaterialProperty({
                        image: './images/waterNormals.jpg',
                        repeat : new Cesium.Cartesian2(1, 1),
                        transparent: true
                    })
				}
			});
		},
		floodParse: function(scene, positions2d, waterHeight, targetHeight){
			var River1=new Cesium.Primitive({
				geometryInstances : new Cesium.GeometryInstance({
					geometry :new Cesium.PolygonGeometry({
						polygonHierarchy : new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromDegreesArrayHeights(positions2d)),
						extrudedHeight: targetHeight,
						height: waterHeight,
						vertexFormat : Cesium.EllipsoidSurfaceAppearance.VERTEX_FORMAT
					})
				}),
				appearance : new Cesium.EllipsoidSurfaceAppearance({
					aboveGround : true,
					material: new Cesium.Material({
						fabric : {
							type : 'Water',
							uniforms : {
								normalMap:'./images/waterNormals.jpg',
								frequency: 100.0,
								animationSpeed: 0.01,
								amplitude: 10.0
							}
						}
					})
				}),
				show : true
			});
			scene.primitives.add(River1);
		}
	}
};
</script>

<style>
.cesium-infoBox-visible {
    transform: translate(0,0);
    visibility: hidden;
    opacity: 1;
    transition: opacity 0.2s ease-out,transform 0.2s ease-out;
}
.tool-bar {
    position: absolute;
    left: 10px;
    top: 20px;
    z-index: 10000;
	padding: 2px;
}
.param-container .param-item {
    margin: 5px;
    overflow: hidden;
}
</style>