添加高程以及二三维场景切换

src/components/productInfo/index.vue

@@ -1,18 +1,11 @@
 <template>
   <div class="info">
     <div class="box">
-      <el-checkbox
+      <div class="ckBox">
-        v-model="prodChecked"
+        <el-checkbox v-model="prodChecked" @change="prodCheckChanged" class="checkbox">待检验产品</el-checkbox>
-        @change="prodCheckChanged"
+        <el-checkbox v-model="sampleChecked" @change="sampleCheckChanged" class="checkbox">样本点</el-checkbox>
-        class="checkbox"
+        <el-checkbox v-model="demChecked" @change="demCheckChanged" class="checkbox">高程图层</el-checkbox>
-        >待检验产品</el-checkbox
+      </div>
-      >
-      <el-checkbox
-        v-model="sampleChecked"
-        @change="sampleCheckChanged"
-        class="checkbox"
-        >样本点</el-checkbox
-      >
     </div>
   </div>
 </template>
@@ -24,6 +17,7 @@ export default {
     return {
       prodChecked: true,
       sampleChecked: true,
+      demChecked: false,
     };
   },
   methods: {
@@ -41,6 +35,13 @@ export default {
         this.$emit("removeSample");
       }
     },
+    demCheckChanged() {
+      if (this.demChecked) {
+        this.$emit("addDemLayer");
+      } else {
+        this.$emit("removeDemLayer");
+      }
+    },
   },
 };
 </script>
@@ -56,18 +57,15 @@ export default {
   z-index: 999;
   border-radius: 4px;
 }
-.iconbox div {
+
-  width: 160px;
-  height: 75px;
-  border-radius: 5px;
-}
 .box {
-  height: 55px;
   width: 160px;
   background-color: white;
-  margin-left: 3px;
   border-radius: 5px;
   align-items: center;
-  padding: 10px 15px;
+}
+
+.ckBox {
+  margin-left: 10px;
 }
 </style>

src/lib/cesiumUtils.js

@@ -19,7 +19,7 @@ class CesiumUtils {
             timeline: false, //时间线,默认true
             navigationHelpButton: false, //导航帮助说明,默认true
             // sceneMode:Cesium.SceneMode.SCENE2D,
-            sceneModePicker: false, //是否显示投影方式控件
+            // sceneModePicker: false, //是否显示投影方式控件
             infoBox: false, //点击要素之后显示的信息,默认true
             fullscreenButton: false, //全屏按钮,默认显示true
             navigationInstructionsInitiallyVisible: false,
@@ -75,7 +75,16 @@ class CesiumUtils {
         // console.log('CesiumNavigation:', CesiumNavigation);
         CesiumNavigation(viewer, optionsNav);
     }
-
+    // 添加高程数据
+    static addDemLayer() {
+        this.viewer.scene.terrainProvider = new Cesium.ArcGISTiledElevationTerrainProvider({
+            url: "https://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer"
+        });
+    }
+    // 移除高程数据
+    static removeDemLayer() {
+        this.viewer.scene.terrainProvider = new Cesium.EllipsoidTerrainProvider({});
+    }
     //添加wms
     static addlayer(geoWorkspace, layerName) {
         let matrixIds = [
@@ -162,7 +171,7 @@ class CesiumUtils {
         this.viewer.imageryLayers.remove(this.privide);
     }
 
-    static addPoint(pLon, pLat, pAlt, isSelected = false,pointId = null) {
+    static addPoint(pLon, pLat, pAlt, isSelected = false, pointId = null) {
         var pointEntity = this.viewer.entities.add({
             id: pointId,
             position: Cesium.Cartesian3.fromDegrees(pLon, pLat, 10),
@@ -179,46 +188,46 @@ class CesiumUtils {
         this.viewer.entities.removeAll();
     }
     //修改点的位置
-    static clickToAddPoint(callback){
+    static clickToAddPoint(callback) {
         //清空之前的handler
         if (this.addPointHandler) {
             this.addPointHandler.destroy();
         }
-                var scene = this.viewer.scene;
+        var scene = this.viewer.scene;
-                this.addPointHandler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
+        this.addPointHandler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
-                const that = this;
+        const that = this;
-                this.addPointHandler.setInputAction(function (movement) {
+        this.addPointHandler.setInputAction(function (movement) {
-                    // 清除历史单击点
+            // 清除历史单击点
-                    var cartesian = that.viewer.camera.pickEllipsoid(
+            var cartesian = that.viewer.camera.pickEllipsoid(
-                        movement.position,
+                movement.position,
-                        scene.globe.ellipsoid
+                scene.globe.ellipsoid
-                    );
+            );
-                    if (cartesian) {
+            if (cartesian) {
-                        var cartographic = Cesium.Cartographic.fromCartesian(cartesian); // 转弧度
+                var cartographic = Cesium.Cartographic.fromCartesian(cartesian); // 转弧度
-                        // 将弧度转换为度数
+                // 将弧度转换为度数
-                        var longitudeString = Cesium.Math.toDegrees(cartographic.longitude).toFixed(6);
+                var longitudeString = Cesium.Math.toDegrees(cartographic.longitude).toFixed(6);
-                        var latitudeString = Cesium.Math.toDegrees(cartographic.latitude).toFixed(6);
+                var latitudeString = Cesium.Math.toDegrees(cartographic.latitude).toFixed(6);
-                        let lng = Number(longitudeString);
+                let lng = Number(longitudeString);
-                        let lat = Number(latitudeString);
+                let lat = Number(latitudeString);
-                        const positions = [lng, lat];
+                const positions = [lng, lat];
-                        that.viewer.entities.removeById("theNewPoint");
+                that.viewer.entities.removeById("theNewPoint");
-                        that.viewer.entities.add({
+                that.viewer.entities.add({
-                            id: "theNewPoint",
+                    id: "theNewPoint",
-                            position: cartesian,
+                    position: cartesian,
-                            point: {
+                    point: {
-                                color: Cesium.Color.fromCssColorString('#9cf7e3'),
+                        color: Cesium.Color.fromCssColorString('#9cf7e3'),
-                                pixelSize: 10
+                        pixelSize: 10
-                                // heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
+                        // heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
-                            }
-                        });
-                        //通过callback函数将数据传递到外部使用
-                       callback(positions);
                     }
-              }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
+                });
+                //通过callback函数将数据传递到外部使用
+                callback(positions);
+            }
+        }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
     }
     //销毁监听
-    static destroyClickToAddPoint(){
+    static destroyClickToAddPoint() {
-        if(this.addPointHandler){
+        if (this.addPointHandler) {
             this.addPointHandler.destroy();
         }
     }
@@ -349,8 +358,8 @@ class CesiumUtils {
         }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
     }
     //销毁点击事件
-    static destoryHandleClick(){
+    static destoryHandleClick() {
-        if(this.clickShowPopHandler){
+        if (this.clickShowPopHandler) {
             this.clickShowPopHandler.destroy()
         }
     }

src/views/Daichuli/Feedback/index.vue

@@ -78,7 +78,7 @@
             @click="downLoadPro">下载</el-button>
         </div>
         <product-info @removeLayer="removeLayer" @addLayer="addLayer" @removeSample="removeSplData"
-          @addSample="getSqlData"></product-info>
+          @addSample="getSqlData" @addDemLayer="addDemLayer" @removeDemLayer="removeDemLayer"></product-info>
         <div class="preview">
           <div id="PendPreview" @click="pickValue" style="overflow: hidden; position: relative"></div>
         </div>
@@ -88,9 +88,9 @@
         <div class="box1">
           <span class="sp1"></span><span class="sp2">{{
             orderMsg.productSubClassId == 39
-              ? "地表覆盖类型表"
+            ? "地表覆盖类型表"
-              : "植被物候类型表"
+            : "植被物候类型表"
-          }}</span>
+            }}</span>
         </div>
         <el-table :data="groudClassData" :header-cell-style="{ background: '#E4E9F1' }" :cell-style="tableRowClassName"
           style="width: 98%; margin-left: 1%; margin-top: 15px" height="200">
@@ -508,6 +508,12 @@ export default {
     removeLayer() {
       cu.clearLayers();
     },
+    addDemLayer() {
+      cu.addDemLayer();
+    },
+    removeDemLayer() {
+      cu.removeDemLayer();
+    },
     removeSplData() {
       cu.removePoint();
     },