<!--
 * 矢量数据白模
 * @Author: jiangbotao
 * @Date: 2019-12-07 14:24:01
 * @LastEditors: jiangbotao
 * @LastEditTime: 2019-12-07 14:58:44
 * @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>
				<label style="color:#FFFFFF ">图层开挖:</label>
				<button id="excavation" >进行倾斜开挖</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.smviewer=new Cesium.Viewer('cesiumContainer', { animation: true });
        var scene = this.smviewer.scene;
		var widget = this.smviewer.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.smviewer.scene.undergroundMode = true; //设置开启地下场景
        this.smviewer.scene.screenSpaceCameraController.minimumZoomDistance = -500;//设置相机最小缩放距离,距离地表-1000米
		this.smviewer.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
					}
				});
            }, 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);
            }
		}
		
		var positions = null;
		// 绘制面
		var handlerPolygon = new Cesium.DrawHandler(this.smviewer, Cesium.DrawMode.Polygon);
		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 && handlerPolygon.deactivate();
			handlerPolygon && handlerPolygon.activate();
			//设置倾斜开挖参数
			overGroundLayer.addExcavationRegion({
				position : positions,
				name : 'excavation_' + Math.random()
			});
			handlerPolygon.deactivate();
		});

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

<style>
.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;
}
</style>