20191205

@@ -57,9 +57,10 @@ export default {
         };
     },
     mounted: function() {
+        var __this = this;
         this.viewer = new Cesium.Viewer("cesiumContainer", {});
         this.viewer.scene.globe.depthTestAgainstTerrain = true;
-       // 使用自定义的navigation
+        // 使用自定义的navigation
         var options = {};
         options.enableCompass= true;
         options.enableZoomControls= true;
@@ -70,18 +71,8 @@ export default {
         $(".cesium-widget-credits")[0].style.visibility = "hidden";
         // 隐藏导航工具
         $(".cesium-viewer-navigationContainer")[0].style.visibility="hidden";
-        // 添加天地图地图
-        this.viewer.imageryLayers.addImageryProvider(new Cesium.TiandituImageryProvider({
-			mapStyle : Cesium.TiandituMapsStyle.IMG_C,
-			token: URL_CONFIG.TOKEN_TIANDITU
-		}));
-		var imageryLayers = this.viewer.imageryLayers;
-		//初始化天地图全球中文注记服务，并添加至影像图层
-		var labelImagery = new Cesium.TiandituImageryProvider({
-			mapStyle : Cesium.TiandituMapsStyle.CIA_C, //天地图全球中文注记服务（经纬度投影）
-			token: URL_CONFIG.TOKEN_TIANDITU
-		});
-		imageryLayers.addImageryProvider(labelImagery);
+        
+        this.addLayer(this.viewer);
 
         var scene = this.viewer.scene;
         var widget = this.viewer.cesiumWidget;
@@ -151,6 +142,7 @@ export default {
 
         $("#close").click(function(){ // 关闭气泡
             $("#bubble").hide();
+            smviewer.entities.removeAll();
         });
         // 每一帧都去计算气泡的正确位置
         scene.postRender.addEventListener(function(){ 
@@ -187,8 +179,8 @@ export default {
                     var resultObj = JSON.parse(result);
                     if (resultObj.featureCount > 0) {
                         var selectedFeature = resultObj.features[0];
-                        addClapFeature(selectedFeature);
-                        // console.log(selectedFeature);
+                        __this.addClapFeature(__this.viewer, selectedFeature);
+
                         $("#bubble").show();
                         for (var i=table.rows.length-1; i>-1; i--){
                             table.deleteRow(i);
@@ -210,21 +202,24 @@ export default {
             })
         }
 
-        // 将数据服务查询到的要素添加到场景中高亮显示，表示选中效果。
-        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模型表面
+        $("#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
             });
-        }
-
-        function getLonLatArray(points){
+            imageryLayers.addImageryProvider(labelImagery);
+        },
+        getLonLatArray: function(points){
             // 得到[经度,纬度,经度,纬度...]形式的数组，用于构造面。
             var point3D = [];
             points.forEach(function(point) {
@@ -232,9 +227,19 @@ export default {
                 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模型表面
+            });
         }
-
-        $("#loadingbar").remove();
     }
 };
 </script>

@@ -254,4 +254,10 @@ export default {
     opacity: 1;
     transition: opacity 0.2s ease-out,transform 0.2s ease-out;
 }
+.tool-bar {
+    position: absolute;
+    left: 10px;
+    top: 60px;
+    z-index: 10000;
+}
 </style>
\ No newline at end of file

@@ -7,19 +7,14 @@
  -->
 <template>
     <el-container>
-        <el-header style="height: 50px;"><i class="el-icon-s-opportunity"></i>Header</el-header>
-        <el-main>
+        <el-header style="height: 50px;">
+            <i class="el-icon-s-opportunity"></i>&nbsp;&nbsp;三维地理信息系统
+        </el-header>
+        <el-main style="padding: 0px;">
             <viewer></viewer>
         </el-main>
         <el-footer style="height: 22px;">Footer</el-footer>
     </el-container>
-    <!-- <div id="map">
-        <div id="header">&nbsp;&nbsp;三维地理信息系统</div>
-        <viewer></viewer>
-        <div id="footer">
-            经纬度信息
-        </div>
-    </div> -->
 </template>
 
 <script>