init

package-lock.json

@@ -3686,9 +3686,9 @@
             "dev": true
         },
         "cesium": {
-            "version": "1.95.0",
-            "resolved": "https://registry.npmmirror.com/cesium/-/cesium-1.95.0.tgz",
-            "integrity": "sha512-59U0lZD/wmSJa4t9FcK1/sp6PyCpx7h8c4giLd8VM7LJDL6w0G0o4QGlZ4TSJTBe4VIClf+qPDUf47wyBu4YoA=="
+            "version": "1.93.0",
+            "resolved": "https://registry.npmmirror.com/cesium/-/cesium-1.93.0.tgz",
+            "integrity": "sha512-y5+KkISn3+0MZxGj96mNaZc5LAfpiOs1fmZCInH2xHwYw43FaaRbvdSHXZs8OwJ5dZIlo/m1biMyOKr354L+UA=="
         },
         "cesium-navigation-es6": {
             "version": "1.0.9",

package.json

@@ -11,7 +11,7 @@
     "dependencies": {
         "@jiaminghi/data-view": "^2.10.0",
         "axios": "^1.4.0",
-        "cesium": "^1.95.0",
+        "cesium": "^1.93.0",
         "cesium-navigation-es6": "^1.0.9",
         "copy-webpack-plugin": "5.0",
         "core-js": "^3.6.5",

src/views/map/index.vue

@@ -10,31 +10,35 @@
         <div class="main-layout" v-on:mouseover="changeActive('2D')" @mousemove="getMouseLocation">
           <div id="2DcesiumContainer" class="map"></div>
         </div>
-        <!-- <div class="bottom-rightbuttons">
+        <div class="bottom-rightbuttons">
+          <!-- <el-tooltip placement="left" effect="light" slot="label">
+              <span slot="content" class="item">模型位置查看</span>
+              <el-button icon="el-icon-files" circle @click="locationViewer($data._viewer2D,handler2D)" ></el-button>
+          </el-tooltip>
           <el-tooltip placement="left" effect="light" slot="label">
-              <span slot="content" class="item">测量</span>
+              <span slot="content" class="item">测距</span>
               <el-button icon="el-icon-files" circle @click="measurement($data._viewer2D,handler2D)" ></el-button>
           </el-tooltip>
           <el-tooltip placement="left" effect="light" slot="label">
               <span slot="content" class="item">通视</span>
               <el-button icon="el-icon-files" circle @click="throughSight($data._viewer2D,handler2D)" ></el-button>
-          </el-tooltip>
-        </div> -->
+          </el-tooltip> -->
+        </div>
       </el-col>
       <el-col style="height: 100%; position: relative" :span="24 - this.leftwidth">
         <div class="main-layout" v-on:mouseover="changeActive('3D')" @mousemove="getMouseLocation">
           <div id="3DcesiumContainer" class="map"></div>
         </div>
-        <!-- <div class="bottom-rightbuttons">
+        <div class="bottom-rightbuttons">
           <el-tooltip placement="left" effect="light" slot="label">
-              <span slot="content" class="item">测量</span>
-              <el-button icon="el-icon-files" circle @click="measurement($data._viewer3D,handler3D)" ></el-button>
+              <span slot="content" class="item">模型位置查看</span>
+              <el-button icon="el-icon-files" circle @click="locationViewer($data._viewer3D,handler3D)" ></el-button>
           </el-tooltip>
           <el-tooltip placement="left" effect="light" slot="label">
-              <span slot="content" class="item">通视</span>
-              <el-button icon="el-icon-files" circle @click="throughSight($data._viewer3D,handler3D)" ></el-button>
+              <span slot="content" class="item">测距</span>
+              <el-button icon="el-icon-files" circle @click="measurement($data._viewer3D,handler3D)" ></el-button>
           </el-tooltip>
-        </div> -->
+        </div>
       </el-col>
       <el-tabs type="border-card" v-model="panelName" tab-position="left" class="menu" :stretch="true"
         @tab-click="legendClick">
@@ -1088,18 +1092,23 @@ export default {
       //设置导航组件
       new CesiumNavigation(this.$data._viewer3D, this.mapNavOptions);
 
-      // 监听鼠标移动事件  
+      //获取地图对象
       this.handler2D = new Cesium.ScreenSpaceEventHandler(this.$data._viewer2D.scene.canvas);
       this.handler3D = new Cesium.ScreenSpaceEventHandler(this.$data._viewer3D.scene.canvas);
-
-      //鼠标悬停在模型上的监听事件
-      // 创建屏幕空间事件处理器   
       
-      this.handler2D.setInputAction((event)=>{  
+    },
+    //鼠标悬停在模型上的监听事件
+    locationViewer(viewer,handler){
+      //清除所有鼠标事件
+      handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK)//移除事件;
+      handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK)//移除事件;
+      handler.removeInputAction(Cesium.ScreenSpaceEventType.MOUSE_MOVE)//移除事件;
+      // 创建屏幕空间事件处理器   
+      handler.setInputAction((event)=>{  
         const screenPosition = new Cesium.Cartesian2(event.endPosition.x, event.endPosition.y);
-        const pickedEntity = this.$data._viewer2D.scene.pick(screenPosition);
+        const pickedEntity = viewer.scene.pick(screenPosition);
           if (Cesium.defined(pickedEntity)) {
-            for (const entity of this.$data._viewer2D.entities.values) {
+            for (const entity of viewer.entities.values) {
               if (pickedEntity.id.id === entity.id && this.tempPickedEntityId != pickedEntity.id.id) {
                 // 获取模型实体的地理位置（经度和纬度） 
                 let position = this.convertWorldToCartographic(pickedEntity.id.position['_value'])
@@ -1113,23 +1122,6 @@ export default {
             }
           }
       }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
-      this.handler3D.setInputAction((event)=>{  
-        const screenPosition = new Cesium.Cartesian3(event.endPosition.x, event.endPosition.y,event.endPosition.z);
-        const pickedEntity = this.$data._viewer2D.scene.pick(screenPosition);
-          if (Cesium.defined(pickedEntity)) {
-            for (const entity of this.$data._viewer2D.entities.values) {
-              if (pickedEntity.id.id === entity.id && this.tempPickedEntityId != pickedEntity.id.id) {
-                let position = this.convertWorldToCartographic(pickedEntity.id.position['_value'])
-                this.$notify({
-                  title: "ID:"+entity.id,
-                  message: "经度:"+ position.longitude +" 维度:"+ position.latitude + " 高度:"+ position.height,
-                  type: 'info'
-                });
-                this.tempPickedEntityId = pickedEntity.id.id
-              }
-            }
-          }  
-      }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
     },
     sync() {
       //更新地图位置
@@ -1276,6 +1268,8 @@ export default {
     },
     //测距
     measurement(viewer,handler){
+      //清除所有鼠标事件
+      handler.removeInputAction(Cesium.ScreenSpaceEventType.MOUSE_MOVE)//移除事件;
       // 鼠标左键点击事件
       handler.setInputAction((ele) => {
             // 创建射线并获取交点
@@ -1327,82 +1321,62 @@ export default {
             if (this.measurementPosition.length >= 2) {
                 if (!Cesium.defined(this.poly)) {
                     // 移动时路径绘制
-                    this.poly = new PolyLinePrimitive(this.measurementPosition)
+                    this.poly = this.createPolyLine(this.measurementPosition,viewer)
+                    this.updatePolyLine(this.measurementPosition,viewer)
                 } else {
+                  this.updatePolyLine(this.measurementPosition,viewer)
                   this.measurementPosition.pop()
                   this.measurementPosition.push(this.cartesian)
                 }
             }
         }, Cesium.ScreenSpaceEventType.MOUSE_MOVE)
-        // 创建线
-        var PolyLinePrimitive = (() => {
-            function line (positions) {
-                this.options = {
-                    name: '_range',
-                    polyline: {
-                        show: true,
-                        positions: [],
-                        material: Cesium.Color.CORNFLOWERBLUE, 
-                        width: 3, 
-                        clampToGround: true
-                    }
-                }
-                this.positions = positions
-                function init(){};
-            }
-
-            line.prototype.init = () => {
-                var update = () => {
-                    return this.positions
-                }
-                // 实时更改线的位置，更新线
-                this.options.polyline.positions = new Cesium.CallbackProperty(update, false)
-                viewer.entities.add(this.options)
-            }
-            return line
-        })()
-        //鼠标左键双击事件
-        handler.setInputAction((ele) => {
-            // 创建射线并获取交点
-            let ray = viewer.camera.getPickRay(ele.position);
-            this.cartesian = viewer.scene.globe.pick(ray, viewer.scene);
-            if (!Cesium.defined(this.cartesian))
-                return;
-            if (this.measurementPosition.length === 0) {
-              this.measurementPosition.push(this.cartesian.clone());
-            }
-            this.measurementPosition.push(this.cartesian);
-            // 记录鼠标单击时的节点位置，异步计算贴地距离
-            this.labelPt = this.measurementPosition[this.measurementPosition.length - 1];
-            if (this.measurementPosition.length > 2) {
-                this.getSpaceDistance(this.measurementPosition,viewer);
-            } else if (this.measurementPosition.length === 2) {
-                // 在三维场景中添加Label
-                viewer.entities.add({
-                    name: '_range',
-                    position: this.labelPt,
-                    point: {
-                        pixelSize: 5,
-                        color: Cesium.Color.RED,
-                        outlineColor: Cesium.Color.MINTCREAM,
-                        outlineWidth: 2,
-                    }
-                });
+      //鼠标左键双击事件
+      handler.setInputAction((ele) => {
+        //数据重置
+        this.measurementPosition = [], // 记录位置
+        this.poly = null // 记录线
+        this.distance = 0 // 记录距离
+        this.cartesian = null // 获取鼠标与地图的交点
+        this.labelPt = null // 最终位置
+        this.options = null//线段
+        let RangeArea = viewer.entities._entities._array
+        for (let i = 0; i < RangeArea.length; i++) {
+            if (RangeArea[i]._name === "_range") {
+                viewer.entities.remove(RangeArea[i]);
+                i--;
             }
-            handler.destroy(); // 删除事件
-            handler = undefined;
+        }    
         }, Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
-
     },
     //通视
     throughSight(viewer){
       
 
+    },
+    createPolyLine(positions,viewer) {  
+      this.options = {  
+        name: '_range',  
+        polyline: {  
+          show: true,  
+          positions: [],  
+          material: Cesium.Color.CORNFLOWERBLUE,  
+          width: 3,  
+          clampToGround: true,  
+        },  
+      }  
+      this.options.polyline.positions = new Cesium.CallbackProperty(() => positions, false)  
+      viewer.entities.add(this.options)  
+    },  
+    updatePolyLine(positions,viewer) {  
+      const polyline = viewer.entities.getById(this.options.name)  
+      if (polyline) {  
+        polyline.polyline.positions = new Cesium.CallbackProperty(() => positions, false)  
+      }  
     },
      // 两点距离计算函数
     getSpaceDistance (positions,viewer){
       // 只计算最后一截，与前面累加, 因鼠标移动和左键单击事件，最后两个坐标点重复
-      let i = positions.length - 3
+      let i = positions.length - 2
       // 根据经纬度获取弧度
       let pointCartographic1 = Cesium.Cartographic.fromCartesian(positions[i]) 
       let pointCartographic2 = Cesium.Cartographic.fromCartesian(positions[i + 1])
@@ -1420,19 +1394,18 @@ export default {
             }
             cartoPts.push(poin2)
             // 返回两点之间的距离
-            var promise = Cesium.sampleTerrain(viewer.terrainProvider, 2, cartoPts)
-
-            promise.then(function (updatedPositions) {
+            var promise = Cesium.sampleTerrain(viewer.terrainProvider, 2, cartoPts) 
+            promise.then((updatedPositions) =>{
                 for (let i = 0; i < updatedPositions.length - 1; i++) {
                     var geoD = new Cesium.EllipsoidGeodesic()
                     geoD.setEndPoints(updatedPositions[i], updatedPositions[i + 1])
                     var innerS = geoD.surfaceDistance
                     innerS = Math.sqrt(Math.pow(innerS, 2) + Math.pow(updatedPositions[i + 1].height - updatedPositions[i].height, 2))
-                    distance += innerS
-                }
-
+                    this.distance += innerS
+                    console.log("ggg"+i) 
+                } 
                 // 在三维场景中添加 label
-                var textDisance = distance > 10000 ? (distance / 1000.0).toFixed(2) + '公里' : distance.toFixed(2) + '里'
+                var textDisance = this.distance > 10000 ? (this.distance / 1000.0).toFixed(2) + '公里' : this.distance.toFixed(2) + '里'
                 viewer.entities.add({
                     name: '_range',
                     position: this.labelPt,
@@ -1452,8 +1425,6 @@ export default {
                         pixelOffset: new Cesium.Cartesian2(0, -10)
                     }
                 })
-            }).catch(function(error) {  
-                // handle error  
             });
     },
     /*根据camera高度近似计算当前层级*/
@@ -2626,7 +2597,7 @@ export default {
   position: absolute;
   z-index: 999;
   right: 20px;
-  bottom: 20px;
+  bottom: 30px;
 }
 .image-title {
   margin-top: 10px;