<!--
 * @Author: jiangbotao
 * @Date: 2019-12-03 22:52:56
 * @LastEditors: jiangbotao
 * @LastEditTime: 2019-12-05 13:16:55
 * @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>
</template>

<script>
import URL_CONFIG from "./../config/urlConfig.vue";
// import CesiumNavigation from "cesium-navigation-es6";
const Cesium = window.Cesium;
export default {
    data: function() {
        return {
            styleObject: {
                width: "100%",
                height: '100%',
                position: "absolute",
                top: "0px",
                bottom: "0px",
                left: "0px",
                backgroundColor: "#000000"
            },
            smviewer: {}
        };
    },
    mounted: function() {
        this.viewer = new Cesium.Viewer("cesiumContainer", { navigationInstructionsInitiallyVisible: false });
        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";

        var smviewer = this.viewer;
        var scene = this.viewer.scene;
        var widget = this.viewer.cesiumWidget;
        var camera = scene.camera;

        var handler = new Cesium.ScreenSpaceEventHandler(this.viewer.canvas);
        handler.setInputAction(function(e) {
            smviewer.entities.removeById('identify-area');
            var position = scene.pickPosition(e.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);

        try {
            var promise2 = scene.addS3MTilesLayerByScp("http://www.supermapol.com/realspace/services/3D-dynamicDTH/rest/realspace/datas/Config%20-%201/config", 
                { name: "oblique photography" });
            Cesium.when.all([promise2], function(obliqueLayers){ // 等倾斜摄影数据加载完了再去加载矢量面，否则矢量面找不到目标去贴对象
                camera.setView({ // 先定位，开始渲染定位区域的倾斜
                    destination : new Cesium.Cartesian3(-2623004.4174251584, 3926981.958360567, 4287374.829655093),
                    orientation : {
                        heading: 4.39611370540786,
                        pitch : -0.43458664812464143,
                        roll : 2.0174972803488345e-11
                    }
                });
                // 去除加载动画
                $('#loadingbar').remove();
            });
        } catch (e) {
            if (widget._showRenderLoopErrors) {
                var title = '渲染时发生错误，已停止渲染。';
                widget.showErrorPanel(title, undefined, e);
            }
        }
        var dataSourceName = '铁岭矢量面'; // 数据源名称
        var dataSetName = 'New_Region3D_1'; // 数据集名称
        var dataServiceUrl = 'http://www.supermapol.com/realspace/services/data-dynamicDTH/rest/data/featureResults.rjson?returnContent=true';
        
        // 通过点击查询用于表示单体化的面要素，添加到场景中高亮显示。
        function queryByPoint(queryPoint) {
            var queryObj = {
                "getFeatureMode": "SPATIAL",
                "spatialQueryMode": "INTERSECT",
                "datasetNames": [dataSourceName + ":" + dataSetName],
                "geometry": {
                    id: 0,
                    parts: [1],
                    points: [queryPoint],
                    type: "POINT"
                }
            };

            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) {
                        addClapFeature(resultObj.features[0]);
                    }
                },
                error: function(msg) {
                    console.log(msg);
                }
            })
        }

        // 将数据服务查询到的要素添加到场景中高亮显示，表示选中效果。
        function addClapFeature(feature) {
            var lonLatArr = getLonLatArray(feature.geometry.points);
            smviewer.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模型表面
            });
        }

        // 得到[经度,纬度,经度,纬度...]形式的数组，用于构造面。
        function getLonLatArray(points) {
            var point3D = [];
            points.forEach(function(point) {
                point3D.push(point.x);
                point3D.push(point.y);
            });
            return point3D;
        }
    }
};
</script>

<style>
.compass {
    top: 60px;
}
.navigation-controls {
    top: 180px;
}
</style>