增加全局Loading

刘远
Showing 2 changed files with 89 additions and 16 deletions
src/App.vue
src/views/Home.vue
--- a/src/App.vue
View file @2475da1
+++ b/src/App.vue
View file @2475da1
@@ -22,4 +22,8 @@
  .cesium-viewer-toolbar, .cesium-viewer-animationContainer, .cesium-viewer-bottom, .cesium-viewer-fullscreenContainer {
      display: none !important;
  }
+  .el-loading-mask {
+        background-color: rgba(0, 0, 0, 0.4) !important;
+  }
 </style>
--- a/src/views/Home.vue
View file @2475da1
+++ b/src/views/Home.vue
View file @2475da1
 <template>
-    <div class="home">
+    <div class="home" v-loading.fullscreen.lock="isFullscreenLoading">
        <div class="top">
            <TopTitle></TopTitle>
        </div>
@@ -91,10 +91,35 @@
            <addProjectMsg @closeAddProjectMsg='EcloseAddProjectMsg'></addProjectMsg>
        </div>
-        <threeMap></threeMap>
-        <!-- <div id="cesiumContainer">
+        <div id="cesiumContainer">
            <div id="vertical-slider" style="display: none;"></div>
            <div id="horizontal-slider" style="display: none;"></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="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>
@@ -104,7 +129,9 @@
    import objectManage from '../assets/js/map/maputils';
    import createDraw from '../assets/js/map/createDraw';
    import roller from "../assets/js/map/roller";
-    import { loadModules } from "esri-loader";
+    // import flood from "../assets/js/map/flood";
+    // import viewpoint from "../assets/js/map/viewpoint";
+    // import visual from "../assets/js/map/visual";
    import TopTitle from '../components/topTitle';
@@ -114,7 +141,6 @@
    import leftAssert from '../components/leftAssert';
    // import mapPop from '../components/mapPop';
-    import threeMap from '../components/threeMap'; //三维地图
    import allSee from '../components/allSee'; //通视
    import ymAnslysis from '../components/ymAnslysis'; //淹没分析
    import horizon from '../components/horizon'; // 视域分析
@@ -137,7 +163,7 @@
            bottomNav,
            leftAssert,
            // mapPop,
-            threeMap,
            allSee,
            ymAnslysis,
            horizon,
@@ -178,20 +204,60 @@
                    'tjxAnslysis', 'yyAnslysis', 'visualField', 'kgAnalusis'],
                addProjectMsg: false, // 建设项目信息表
+                isFullscreenLoading: false, // 全屏loading
            }
        },
        mounted() {
-            objectManage.viewer = this.viewer;
+            this.viewer = new Cesium.Viewer('cesiumContainer', {shadows : true});
-            // loadModules([
+            this.viewer.imageryLayers.addImageryProvider(new Cesium.TiandituImageryProvider({
-            //     "esri/Map",
+                credit : new Cesium.Credit('天地图全球影像服务'),
-            //     "esri/Basemap",
+                token: URL_CONFIG.TOKEN_TIANDITU
-            //     "esri/views/MapView",
+            }));
-            //     "esri/layers/TileLayer",
+            let scene = this.viewer.scene
-            //     "esri/layers/WebTileLayer",
+            scene.shadowMap.darkness = 1; //设置第二重烘焙纹理的效果（明暗程度）
-            //     "dojo/domReady!"
+            scene.skyAtmosphere.brightnessShift=0.4;
-            // ]).then(([Map, Basemap, MapView, TileLayer, WebTileLayer]) => {
+            scene.debugShowFramesPerSecond = true;
-            //     console.log(Map);
+            scene.hdrEnabled = false;
+            scene.sun.show = true;
+            this.draw = new createDraw(this.viewer);
+            var promise = [];
+            // promise[0] = scene.addS3MTilesLayerByScp(URL_CONFIG.SCP_CBD_GROUND1, {
+            //     name: 'ground'
            // });
+            promise[0] = scene.addS3MTilesLayerByScp(URL_CONFIG.SCP_CBD_BUILD, {
+                name: 'build1'
+            });
+            promise[1] = scene.addS3MTilesLayerByScp(URL_CONFIG.SCP_CBD_BUILD, {
+                name: 'build2'
+            });
+            promise[2] = scene.addS3MTilesLayerByScp(URL_CONFIG.SCP_CBD_GROUND1, {
+                name: 'ground'
+            });
+            Cesium.when.all(promise, layers => {
+                // this.layers = layer;
+                objectManage.viewer = this.viewer;
+                // layers[0].selectEnabled = false;
+                // layers[1].selectEnabled = false;
+                console.log(layers);
+                layers[1].shadowType = 2;
+                layers[2].shadowType = 2;
+                scene.camera.setView({
+                    destination : Cesium.Cartesian3.fromDegrees(116.44621857300415, 39.899281526734555, 216.7793905027196),
+                    orientation : {
+                        heading : 0.41348036210986194,
+                        pitch : -0.13636490404291735,
+                        roll : 6.283185307179563
+                    }
+                });
+            }, function(e){
+                if (widget._showRenderLoopErrors) {
+                    var title = '加载SCP失败，请检查网络连接状态或者url地址是否正确？';
+                    widget.showErrorPanel(title, undefined, e);
+                }
+            });
        },
        methods: {
            searchRoat(val) {
@@ -537,4 +603,7 @@
    .tjx-anslysis {
        top: 265px;
    }
 </style>
\ No newline at end of file