<!--
 * 1、地图分屏效果
 * @Author: jiangbotao
 * @Date: 2019-12-03 22:52:56
 * @LastEditors: jiangbotao
 * @LastEditTime: 2019-12-07 23:37:13
 * @FilePath: \superglobevue\src\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>
				<button id="one" >无分屏</button>
				<button id="two" >水平分屏</button>
			</div>
		</div>
        <div id="split_up" style="display: none;"></div>
		<div id="split_bottom" style="display: none;"></div>
		<div id="split_left" style="display: none;"></div>
		<div id="split_right" style="display: none;"></div>
		<div id="split_vertical_trisection_left" style="display: none;"></div>
		<div id="split_vertical_trisection_right" style="display: none;"></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", {});
        // 隐藏logo
        $(".cesium-widget-credits")[0].style.visibility = "hidden";
        // 隐藏导航工具
        // $(".cesium-viewer-navigationContainer")[0].style.visibility="hidden";

        // 添加OSM地图
        let osm = Cesium.createOpenStreetMapImageryProvider({
            url: "https://tile-a.openstreetmap.fr/hot",
            fileExtension:"png"
        });
        this.viewer.imageryLayers.addImageryProvider(osm);

        var scene = this.viewer.scene;
        var widget = this.viewer.cesiumWidget;
        try {
            var groundPromise = scene.addS3MTilesLayerByScp(URL_CONFIG.SCP_CBD_GROUND1, {
                name: 'ground'
            });
            var buildPromise = scene.addS3MTilesLayerByScp(URL_CONFIG.SCP_CBD_BUILD, {
                name: 'build'
            });
            // 添加倾斜摄影模型图层
            Cesium.when([groundPromise, buildPromise], function(layers) {
                var build = scene.layers.find("build");
                var ground = scene.layers.find("ground");
                // 图层加载完成,设置相机位置
                scene.camera.setView({
                    destination: Cesium.Cartesian3.fromDegrees(116.4563, 39.8969, 553),
                    orientation: {
                        heading: 5.901089214916513,
                        pitch: -0.40668579780875524,
                        roll: 6.281842456812987
                    }
                });
                $("#one").on("click", function(){
					$("#split_up").css("display", "none");
                    $("#split_bottom").css("display", "none");
                    $("#split_left").css("display", "none");
                    $("#split_right").css("display", "none");
                    $("#split_vertical_trisection_left").css("display", "none");
                    $("#split_vertical_trisection_right").css("display", "none");
                    $('#pannel').hide();
                    scene.multiViewportMode = Cesium.MultiViewportMode["NONE"];
                });
                $("#two").on("click", function(){
					$("#split_up").css("display", "block");
                    $("#split_bottom").css("display", "block");
                    $("#split_left").css("display", "none");
                    $("#split_right").css("display", "none");
                    $("#split_vertical_trisection_left").css("display", "none");
                    $("#split_vertical_trisection_right").css("display", "none");
                    $('#pannel').show();
                    $('#b_one,#b_two,#g_one,#g_two').show();
                    $('#b_three,#g_three,#b_four,#g_four').hide();
                    scene.multiViewportMode = Cesium.MultiViewportMode["HORIZONTAL"];

                    ground.setViewportVisible(1, false);
                    ground.setViewportVisible(0, true);
                });
            }, function() {
                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>
.sm-compass {
    pointer-events: auto;
    position: absolute;
    right: 10px;
    top: 10px;
    width: 128px;
    height: 128px;
    overflow: hidden;
}
.sm-zoom {
	top: 130px;
}
label {
    display: inline-block;
    margin-right: 1rem;
}

label>input,
label>span {
    display: inline-block;
    vertical-align: middle;
}

#split_up {
    position: absolute;
    background-color: white;
    left: 50%;
    bottom: 50%;
    width: 2px;
    height: 50%;
    -webkit-transform: translate(-50%, 0);
}

#split_bottom {
    position: absolute;
    background-color: white;
    left: 50%;
    top: 50%;
    width: 2px;
    height: 50%;
    -webkit-transform: translate(-50%, 0);
}

#split_left {
    position: absolute;
    background-color: white;
    right: 50%;
    bottom: 50%;
    height: 2px;
    width: 50%;
    -webkit-transform: translate(0, -50%);
}

#split_right {
    position: absolute;
    background-color: white;
    left: 50%;
    bottom: 50%;
    height: 2px;
    width: 50%;
    -webkit-transform: translate(0, -50%);
}
#split_vertical_trisection_left {
    position: absolute;
    background-color: white;
    left: 33.33%;
    top: 0;
    height: 100%;
    width: 2px;
}
#split_vertical_trisection_right {
    position: absolute;
    background-color: white;
    right: 33.33%;
    top: 0;
    height: 100%;
    width: 2px;
}
</style>