<!--
 * @Author: jiangbotao
 * @Date: 2019-12-03 22:52:56
 * @LastEditors: jiangbotao
 * @LastEditTime: 2019-12-04 22:23:44
 * @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>
        <!-- 气泡HTML -->
        <div id="bubble" class="bubble" style="bottom:0;left:82%;display:none;" >
            <div id="tools" style="text-align : right; padding-bottom: 5px;">
                <span  style="color: rgb(95, 74, 121);padding: 5px;position: absolute;left: 10px;top: 4px;">对象属性</span>
                <span  class="fui-cross" title="关闭" id="close" style="color: darkgrey;padding:5px"></span>
            </div>
            <div style="overflow-y:scroll;height:150px" id="tableContainer"><table id="tab"></table></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", {});
        this.viewer.scene.globe.depthTestAgainstTerrain = true;
        // 使用自定义的navigation
        var options = {};
        options.enableCompass= true;
        options.enableZoomControls= true;
        options.enableDistanceLegend= true;
        options.enableCompassOuterRing= true;
        this.viewer.extend(Cesium.viewerCesiumNavigationMixin, options);
        // 隐藏logo
        $(".cesium-widget-credits")[0].style.visibility = "hidden";
        // 隐藏导航工具
        $(".cesium-viewer-navigationContainer")[0].style.visibility="hidden";
        
        this.addLayer(this.viewer);

        var scene = this.viewer.scene;
        var widget = this.viewer.cesiumWidget;
        var camera = scene.camera;
        var smviewer = this.viewer;
        // 场景位置，用于popup定位
        var scenePosition = null;

        try {
            var promise2 = scene.addS3MTilesLayerByScp("http://localhost:8090/iserver/services/3D-wz_qidu_qx1/rest/realspace/datas/%E4%B8%83%E9%83%BD_%E5%80%BE%E6%96%9C/config", 
                { name: "oblique photography" });
            Cesium.when.all([promise2], function(obliqueLayers){ // 等倾斜摄影数据加载完了再去加载矢量面，否则矢量面找不到目标去贴对象
                camera.setView({ // 先定位，开始渲染定位区域的倾斜
                    destination : Cesium.Cartesian3.fromDegrees(120.7630995515332, 28.007422239411936, 130.0),
                    orientation:{
                        heading:160.4816371653797,
                        pitch:-0.515,
                        roll:0
                    }
                });
                // 去除加载动画
                $('#loadingbar').remove();
            });
        } catch (e) {
            if (widget._showRenderLoopErrors) {
                var title = '渲染时发生错误，已停止渲染。';
                widget.showErrorPanel(title, undefined, e);
            }
        }
        var dataSourceName = 'qidu'; // 数据源名称
        var dataSetName = 'New_Region'; // 数据集名称
        var dataServiceUrl = 'http://localhost:8090/iserver/services/data-wz_qidu_qx1/rest/data/featureResults.rjson?returnContent=true';
        var infoboxContainer = document.getElementById("bubble");
        var table = document.getElementById("tab");
        
        // 鼠标左键的触发事件，查询要素并弹出显示
        var handler = new Cesium.ScreenSpaceEventHandler(this.viewer.canvas);
        handler.setInputAction(function(e) {
            smviewer.entities.removeById('identify-area');
            var position = scene.pickPosition(e.position);
            // 设置场景位置
            scenePosition = position;
            var cartographic = Cesium.Cartographic.fromCartesian(position);
            var longitude = Cesium.Math.toDegrees(cartographic.longitude);
            var latitude = Cesium.Math.toDegrees(cartographic.latitude);
            var queryPoint = { // 查询点对象
                x: longitude,
                y: latitude
            };
            // console.log(queryPoint);
            queryByPoint(queryPoint);
        }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

        var ellipsoid = this.viewer.scene.globe.ellipsoid;
        handler.setInputAction(function(e) {
            var cartesian = smviewer.camera.pickEllipsoid(e.endPosition, ellipsoid);
            if(cartesian){
                //将笛卡尔三维坐标转为地图坐标（弧度）
                var cartographic = scene.globe.ellipsoid.cartesianToCartographic(cartesian);
                //将地图坐标（弧度）转为十进制的度数
                var lat_String = Cesium.Math.toDegrees(cartographic.latitude).toFixed(4);
                var log_String = Cesium.Math.toDegrees(cartographic.longitude).toFixed(4);
                var alti_String = (smviewer.camera.positionCartographic.height).toFixed(2);
                $('.el-footer').text('经度 : ' + log_String +' |  纬度 : ' + lat_String + ' |  高度 : ' + alti_String);
            }
        }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

        $("#close").click(function(){ // 关闭气泡
            $("#bubble").hide();
            smviewer.entities.removeAll();
        });
        // 每一帧都去计算气泡的正确位置
        scene.postRender.addEventListener(function(){ 
            if (scenePosition) {
                var canvasHeight = scene.canvas.height;
                var windowPosition = new Cesium.Cartesian2();
                Cesium.SceneTransforms.wgs84ToWindowCoordinates(scene, scenePosition, windowPosition);
                infoboxContainer.style.bottom = (canvasHeight - windowPosition.y + 45) + 'px';
                infoboxContainer.style.left = (windowPosition.x - 70) + 'px';
                infoboxContainer.style.visibility = "visible";
            }
        });

        // 通过点击查询用于表示单体化的面要素，添加到场景中高亮显示。
        function queryByPoint(queryPoint) {
            var queryObj = {
                "getFeatureMode": "SPATIAL",
                "spatialQueryMode": "INTERSECT",
                "datasetNames": [dataSourceName + ":" + dataSetName],
                "geometry": {
                    id: 0,
                    parts: [1],
                    points: [queryPoint],
                    type: "POINT"
                }
            };
            $("#bubble").hide();
            var queryObjJSON = JSON.stringify(queryObj); // 转化为JSON字符串作为查询参数
            $.ajax({
                type: "post",
                url: dataServiceUrl,
                data: queryObjJSON,
                success: function(result) {
                    var resultObj = JSON.parse(result);
                    if (resultObj.featureCount > 0) {
                        var selectedFeature = resultObj.features[0];
                        __this.addClapFeature(__this.viewer, selectedFeature);

                        $("#bubble").show();
                        for (var i=table.rows.length-1; i>-1; i--){
                            table.deleteRow(i);
                        }
                        for(var index in selectedFeature.fieldNames){
                            var newRow = table.insertRow();
                            var cell1 = newRow.insertCell();
                            var cell2 = newRow.insertCell();
                            cell1.innerHTML = selectedFeature.fieldNames[index];
                            cell2.innerHTML = selectedFeature.fieldValues[index];
                        }
                    }else{
                        $("#bubble").hide();
                    }
                },
                error: function(msg) {
                    console.log(msg);
                }
            })
        }

        $("#loadingbar").remove();
    },
    methods:{
        addLayer: function(viewer){
            // 添加天地图地图
            viewer.imageryLayers.addImageryProvider(new Cesium.TiandituImageryProvider({
                mapStyle : Cesium.TiandituMapsStyle.IMG_C,
                token: URL_CONFIG.TOKEN_TIANDITU
            }));
            var imageryLayers = viewer.imageryLayers;
            //初始化天地图全球中文注记服务，并添加至影像图层
            var labelImagery = new Cesium.TiandituImageryProvider({
                mapStyle : Cesium.TiandituMapsStyle.CIA_C, //天地图全球中文注记服务（经纬度投影）
                token: URL_CONFIG.TOKEN_TIANDITU
            });
            imageryLayers.addImageryProvider(labelImagery);
        },
        getLonLatArray: function(points){
            // 得到[经度,纬度,经度,纬度...]形式的数组，用于构造面。
            var point3D = [];
            points.forEach(function(point) {
                point3D.push(point.x);
                point3D.push(point.y);
            });
            return point3D;
        },
        addClapFeature: function(viewer, feature) {
            var lonLatArr = this.getLonLatArray(feature.geometry.points);
            viewer.entities.add({
                id: 'identify-area',
                name: '单体化标识面',
                polygon: {
                    hierarchy: Cesium.Cartesian3.fromDegreesArray(lonLatArr),
                    material: new Cesium.Color(1.0, 0.0, 0.0, 0.3),
                },
                clampToS3M: true // 贴在S3M模型表面
            });
        }
    }
};
</script>

<style>
.bubble {
    padding: 5px;
    border-radius: 5px;
}
#tab {
    height: unset;
    text-align: left;
}
.compass {
    top: 60px;
}
.navigation-controls {
    top: 170px;
}
</style>