<!--
 * 地下管网挖掘及查看
 * @Author: jiangbotao
 * @Date: 2019-12-07 14:24:01
 * @LastEditors: jiangbotao
 * @LastEditTime: 2019-12-14 00:49:56
 * @FilePath: \superglobevue\src\components\viewer_3dmodel.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>
				<button id="excavation" >绘制挖掘面</button>
				<button id="dig" >进行倾斜开挖</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', { animation: true });
        var scene = __this.viewer.scene;
		var widget = __this.viewer.cesiumWidget;
		var globe = scene.globe;
		// 隐藏logo
		$(".cesium-widget-credits")[0].style.visibility="hidden";
		$(".cesium-viewer-animationContainer")[0].style.visibility="hidden";
		// 隐藏导航工具
		// $(".cesium-viewer-navigationContainer")[0].style.visibility="hidden";

		__this.viewer.scene.undergroundMode = true; //设置开启地下场景
        __this.viewer.scene.screenSpaceCameraController.minimumZoomDistance = -500;//设置相机最小缩放距离,距离地表-1000米
		__this.viewer.scene.terrainProvider.isCreateSkirt = false; // 关闭裙边
		
		var overGroundLayer = null;
		try{
            //打开所发布三维服务下的所有图层
			var promise = scene.open('http://www.supermapol.com/realspace/services/3D-pipe/rest/realspace');
            Cesium.when.all(promise, function(layers){
				overGroundLayer = scene.layers.find('Config');
                //设置图层的阴影模式
                scene.camera.setView({
                    //将经度、纬度、高度的坐标转换为笛卡尔坐标
					destination : new Cesium.Cartesian3(-2654051.707084536, 3570921.9596162816, 4570167.290651748),
					orientation : {
						heading : 2.3280016887452777,
						pitch : -0.586141022221434,
						roll : 6.283185307176403
					}
				});
				var positions = null;
				// 绘制面
				var handlerPolygon = new Cesium.DrawHandler(__this.viewer, Cesium.DrawMode.Polygon, 0);
				handlerPolygon.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);
						}
					}
					console.log(positions);
					return positions;
				});
				$("#excavation").on("click", function(){
					handlerPolygon.activeEvt.addEventListener(function(isActive){
						if(isActive === true){
							__this.viewer.enableCursorStyle = false;
							__this.viewer._element.style.cursor = '';
							$('body').removeClass('drawCur').addClass('drawCur');
						}else{
							__this.viewer.enableCursorStyle = true;
							$('body').removeClass('drawCur');
						}
					});
					handlerPolygon && handlerPolygon.deactivate();
					handlerPolygon && handlerPolygon.activate();
				});
				$("#dig").on("click", function(){
					//设置倾斜开挖参数
					overGroundLayer.addExcavationRegion({
						position : positions,
						name : 'excavation_' + Math.random()
					});
					handlerPolygon.deactivate();
					handlerPolygon && handlerPolygon.clear();
				});
            }, function(e){
                if(widget._showRenderLoopErrors) {
                    var title = '加载SCP失败，请检查网络连接状态或者url地址是否正确？';
                    widget.showErrorPanel(title, undefined, e);
                }
            });
        }catch(e){
            if(widget._showRenderLoopErrors) {
                var title = '渲染时发生错误，已停止渲染。';
                widget.showErrorPanel(title, undefined, e);
            }
		}

		$('#loadingbar').remove();
	}
}
</script>

<style>
.drawCur{
	cursor: url(/images/cur/draw.cur), auto;
}
.sm-compass {
    pointer-events: auto;
    position: absolute;
    right: 10px;
    top: 10px;
    width: 128px;
    height: 128px;
    overflow: hidden;
}
.sm-zoom {
	top: 130px;
}
#excavation {
	color:rgb(255, 255, 255);
	font-size:14px;padding-top:4px;padding-bottom:4px;padding-left:33px;padding-right:33px;
	border-width:2px;border-color:rgb(74, 99, 31);border-style:solid;border-radius:11px;
	background-color:rgb(44, 89, 128);}
#excavation:hover{
	color:#ffffff;
	background-color:#78c300;
	border-color:#c5e591;
}
#dig {
	color:rgb(255, 255, 255);
	font-size:14px;padding-top:4px;padding-bottom:4px;padding-left:33px;padding-right:33px;
	border-width:2px;border-color:rgb(74, 99, 31);border-style:solid;border-radius:11px;
	background-color:rgb(44, 89, 128);}
#dig:hover{
	color:#ffffff;
	background-color:#78c300;
	border-color:#c5e591;
}
</style>