src/views/map/index.vue

@@ -8,30 +8,20 @@
     <el-row id="earth" style="height: 100%; width: 100%; display: flex; position: relative">
       <el-col style="height: 100%; position: relative" :span="this.leftwidth">
         <div class="main-layout" v-on:mouseover="changeActive('2D')" @mousemove="getMouseLocation">
-          <div id="2DcesiumContainer" class="map"></div>
-        </div>
-        <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>
-              <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 id="2DcesiumContainer" class="map"  @click="onMapClick"></div>
         </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 id="3DcesiumContainer" class="map"  @click="onMapClick"></div>
         </div>
         <div class="bottom-rightbuttons">
           <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="pointMove()" v-if="this.mode==false"></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="locationViewer($data._viewer3D,handler3D)" ></el-button>
           </el-tooltip>
           <el-tooltip placement="left" effect="light" slot="label">
@@ -153,7 +143,6 @@
               <el-button type="text" @click="showMissileInfo(scope.row)">详情</el-button>
               </template>
             </el-table-column>
-            
           </el-table>
         </el-tab-pane>
       </el-tabs>
@@ -356,7 +345,7 @@
           <el-button @click="satelliteVisible = false">关闭</el-button>
         </div>
       </el-dialog>
-
+      <div v-if="isShow" class="modeltooltip" ref="modeltooltip">{{ modeltooltip }}</div>
   </div>
 </template>
 <script>
@@ -447,6 +436,7 @@ export default {
       blueList: [],
       satelliteList: [],
       thaadList: {},
+      centerList: [],
       finish: false,
       websocket: null,
       centerPosition: null,
@@ -584,6 +574,13 @@ export default {
     this.cesiumInit();
   },
   methods: {
+    mouseMove(event) {
+      if (this.$refs.modeltooltip) {
+        this.$refs.modeltooltip.style.left = event.pageX - 10 + "px";
+        this.$refs.modeltooltip.style.top = event.pageY - 115 + "px";
+        console.log("333333333333")
+      }
+    },
     modelsInit(modelUrl,model){
         if(modelUrl == radarModel2){
         this.models.radar2 = model
@@ -707,6 +704,19 @@ export default {
           redunit = response.data.redunit
           satellite = response.data.satellite
           center = response.data.center
+          for(let i=0 ;i<blueunit.length;i++){
+            this.blueList.push({
+              order: i+1,
+              name: blueunit[i].name
+            })
+          }
+
+          for(let i=0;i<satellite.length;i++){
+            this.satelliteList.push({
+              order: i+1,
+              name: satellite[i].name
+            })
+          }
           this.save = true
           this.jsonData = {
             id: row.id,
@@ -804,6 +814,7 @@ export default {
           })
 
           for(let i = 0; i< data.redunit.length; i++){
+            console.log(i)
             this.tree.data[0].children.push({
               id: 0+i,
               text: data.redunit[i].id+"-"+data.redunit[i].name,
@@ -862,7 +873,7 @@ export default {
                 })
                //拦截导弹
                for(let j = 0; j< info.missile.length; j++){
-                let missile = info.missile[j][info.missile[i].name];
+                let missile = info.missile[j][info.missile[j].name];
                 this.tree.data[1].children[i].children[0].children.push({
                   id: 1+i+(j+1),
                   text: "拦截导弹"+"-"+missile.id+"-"+missile.name,
@@ -1063,6 +1074,7 @@ export default {
         selectionIndicator: false,
         imageryProvider: normalMapLayer
       });
+
       
       //添加额外图层
       this.$data._viewer3D.imageryLayers.addImageryProvider(demMapLayer);
@@ -1097,12 +1109,10 @@ export default {
       this.handler3D = new Cesium.ScreenSpaceEventHandler(this.$data._viewer3D.scene.canvas);
       
     },
-    //鼠标悬停在模型上的监听事件
+    // //鼠标悬停在模型上的监听事件
     locationViewer(viewer,handler){
-      //清除所有鼠标事件
-      handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK)//移除事件;
-      handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK)//移除事件;
-      handler.removeInputAction(Cesium.ScreenSpaceEventType.MOUSE_MOVE)//移除事件;
+      //清除所有事件
+      this.removeAllHandlerInputAction(handler)
       // 创建屏幕空间事件处理器   
       handler.setInputAction((event)=>{  
         const screenPosition = new Cesium.Cartesian2(event.endPosition.x, event.endPosition.y);
@@ -1188,6 +1198,199 @@ export default {
       } else {
         screenfull.request();
       }
+    },
+        // 鼠标点击的事件监听
+    pointMove() {
+      //清除所有事件
+      this.removeAllHandlerInputAction(this.handler2D)
+      this.removeAllHandlerInputAction(this.handler3D)
+      // 监听鼠标左键点击事件
+      this.handler2D.setInputAction((event) => {
+        if (!this.selectedMarker && !this.modeltooltip) {
+          const screenPosition = new Cesium.Cartesian2(event.position.x, event.position.y);
+          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.selectedMarker = entity;
+                this.oldPosition = pickedEntity.id.position;
+                // 显示提示
+                this.selectModel("pointer", null, "右键取消");
+              }
+            }
+          }
+        } else if (this.selectedMarker && this.modeltooltip === "右键取消") {
+          // const material = new Cesium.PolylineArrowMaterialProperty(this.selectedMarker.point.color);
+          console.log('this.$data._viewer2D.entities.values :>> ', this.$data._viewer2D.entities.getById(this.selectedMarker.id).position._value);
+          let position = this.convertWorldToCartographic(this.$data._viewer2D.entities.getById(this.selectedMarker.id).position._value)
+        
+          let name = ''
+          for (let i = 0; i < this.nameIdList.length; i++) {
+
+            if (this.nameIdList[i].id == this.selectedMarker.id) {
+              name = this.nameIdList[i].name
+            }
+          }
+          for (let i = 0; i < this.jsonData.blueunit.length; i++) {
+            if (name == this.jsonData.blueunit[i].name) {
+              this.jsonData.blueunit[i].pos.lat = position.latitude.toFixed(6)
+              this.jsonData.blueunit[i].pos.lon = position.longitude.toFixed(6)
+              this.jsonData.blueunit[i].pos.h = position.height.toFixed(2)
+            }
+          }
+          for (let i = 0; i < this.jsonData.redunit.length; i++) {
+            if (name == this.jsonData.redunit[i].name) {
+              this.jsonData.redunit[i].component_movementjson.properties.launch_lon = position.longitude.toFixed(6)
+              this.jsonData.redunit[i].component_movementjson.properties.launch_lat = position.latitude.toFixed(6)
+              this.jsonData.redunit[i].component_movementjson.properties.launch_h = position.height.toFixed(2)
+            }
+          }
+          for (let i = 0; i < this.jsonData.center.length; i++) {
+            if (name == this.jsonData.center[i].name) {
+              this.jsonData.center[i][name].properties.lon = position.longitude.toFixed(6)
+              this.jsonData.center[i][name].properties.lat = position.latitude.toFixed(6)
+              this.jsonData.center[i][name].properties.h = position.height.toFixed(2)
+              for (let j = 0; j < this.jsonData.redunit.length; j++) {
+                this.jsonData.redunit[j].component_movementjson.properties.target_lon = position.longitude.toFixed(6)
+                this.jsonData.redunit[j].component_movementjson.properties.target_lat = position.latitude.toFixed(6)
+                this.jsonData.redunit[j].component_movementjson.properties.target_h = position.height.toFixed(2)
+              }
+              // 新的终点坐标
+              const newEndPoint = Cesium.Cartesian3.fromDegrees(position.longitude, position.latitude, position.height);
+              // 遍历所有的entity对象
+              this.$data._viewer2D.entities.values.forEach(entity => {
+                // 检查entity是否为Polyline类型
+                if (entity instanceof Cesium.Entity && entity.polyline) {
+                  // 获取原始的Polyline坐标数组
+                  const positions = entity.polyline.positions.getValue(); // 得到一个Cartesian3数组
+
+                  // 修改终点坐标为新的坐标
+                  positions[positions.length - 1] = newEndPoint;
+
+    // 更新entity的Polyline坐标
+    entity.polyline.positions = new Cesium.CallbackProperty(time => positions, false);
+  }
+});
+this.$data._viewer3D.entities.values.forEach(entity => {
+  // 检查entity是否为Polyline类型
+  if (entity instanceof Cesium.Entity && entity.polyline) {
+    // 获取原始的Polyline坐标数组
+    const positions = entity.polyline.positions.getValue(); // 得到一个Cartesian3数组
+
+                  // 修改终点坐标为新的坐标
+                  positions[positions.length - 1] = newEndPoint;
+
+                  // 更新entity的Polyline坐标
+                  entity.polyline.positions = new Cesium.CallbackProperty(time => positions, false);
+                }
+              });
+            }
+
+          }
+
+          // this.$data._viewer2D.entities.add({
+          //   polyline: {
+          //     positions: [
+          //       this.oldPosition._value,
+          //       this.$data._viewer2D.entities.getById(this.selectedMarker.id).position._value
+          //     ],
+          //     width: 5, // 设置线的宽度
+          //     material: material,
+          //     followSurface: false // 设置为false，使连线保持在固定的高度，不会贴地显示
+          //   }
+          // });
+          // this.$data._viewer3D.entities.add({
+          //   polyline: {
+          //     positions: [
+          //       this.oldPosition._value,
+          //       this.$data._viewer3D.entities.getById(this.selectedMarker.id).position._value
+          //     ],
+          //     width: 5, // 设置线的宽度
+          //     material: material,
+          //     followSurface: false // 设置为false，使连线保持在固定的高度，不会贴地显示
+          //   }
+          // });
+          console.log('this.jsonData :>> ', this.jsonData);
+          this.selectedMarker = null;
+          this.selectModel();
+        }
+      }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
+      // 监听鼠标移动事件，用于移动标记点
+      this.handler2D.setInputAction((event) => {
+        if (this.selectedMarker && this.modeltooltip === "右键取消") {
+          const screenPosition = new Cesium.Cartesian2(event.endPosition.x, event.endPosition.y);
+          const position = this.$data._viewer2D.scene.camera.pickEllipsoid(screenPosition);
+          this.$data._viewer2D.entities.getById(this.selectedMarker.id).position = position;
+          this.$data._viewer3D.entities.getById(this.selectedMarker.id).position = position;
+        }
+      }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
+      // 监听右键
+      this.handler2D.setInputAction(() => {
+        if (this.selectedMarker && this.modeltooltip === "右键取消") {
+          this.$data._viewer2D.entities.getById(this.selectedMarker.id).position = this.oldPosition;
+          this.selectedMarker = null;
+          this.selectModel();
+        }
+      }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
+      this.handler3D.setInputAction((event) => {
+        if (!this.selectedMarker && !this.modeltooltip) {
+          const screenPosition = new Cesium.Cartesian2(event.position.x, event.position.y);
+          const pickedEntity = this.$data._viewer3D.scene.pick(screenPosition);
+          if (Cesium.defined(pickedEntity)) {
+            for (const entity of this.$data._viewer3D.entities.values) {
+              if (pickedEntity.id.id === entity.id) {
+                this.selectedMarker = entity;
+                this.oldPosition = pickedEntity.id.position;
+                // 显示提示
+                this.selectModel("pointer", null, "右键取消");
+              }
+            }
+          }
+        } else if (this.selectedMarker && this.modeltooltip === "右键取消") {
+          const material = new Cesium.PolylineArrowMaterialProperty(this.selectedMarker.point.color);
+          this.$data._viewer2D.entities.add({
+            polyline: {
+              positions: [
+                this.oldPosition._value,
+                this.$data._viewer2D.entities.getById(this.selectedMarker.id).position._value
+              ],
+              width: 5, // 设置线的宽度
+              material: material,
+              followSurface: false // 设置为false，使连线保持在固定的高度，不会贴地显示
+            }
+          });
+          this.$data._viewer3D.entities.add({
+            polyline: {
+              positions: [
+                this.oldPosition._value,
+                this.$data._viewer3D.entities.getById(this.selectedMarker.id).position._value
+              ],
+              width: 5, // 设置线的宽度
+              material: material,
+              followSurface: false // 设置为false，使连线保持在固定的高度，不会贴地显示
+            }
+          });
+          this.selectedMarker = null;
+          this.selectModel();
+        }
+      }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
+      // 监听鼠标移动事件，用于移动标记点
+      this.handler3D.setInputAction((event) => {
+        if (this.selectedMarker && this.modeltooltip === "右键取消") {
+          const screenPosition = new Cesium.Cartesian2(event.endPosition.x, event.endPosition.y);
+          const position = this.$data._viewer3D.scene.camera.pickEllipsoid(screenPosition);
+          this.$data._viewer2D.entities.getById(this.selectedMarker.id).position = position;
+          this.$data._viewer3D.entities.getById(this.selectedMarker.id).position = position;
+        }
+      }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
+      // 监听右键
+      this.handler3D.setInputAction(() => {
+        if (this.selectedMarker && this.modeltooltip === "右键取消") {
+          this.$data._viewer3D.entities.getById(this.selectedMarker.id).position = this.oldPosition;
+          this.selectedMarker = null;
+          this.selectModel();
+        }
+      }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
     },
     /* 获取camera中心点坐标 */
     getCenterPosition(is3D = false) {
@@ -1251,12 +1454,6 @@ export default {
         tab_content[0].style.display = "block";
       }
     },
-    mouseMove(event) {
-      if (this.$refs.modeltooltip) {
-        this.$refs.modeltooltip.style.left = event.pageX - 240 + "px";
-        this.$refs.modeltooltip.style.top = event.pageY - 115 + "px";
-      }
-    },
     //显示鼠标经纬度
     getMouseLocation(event) {
       try {
@@ -1266,10 +1463,10 @@ export default {
         // console.error(error);
       } 
     },
-    //测距
+    // //测距
     measurement(viewer,handler){
       //清除所有鼠标事件
-      handler.removeInputAction(Cesium.ScreenSpaceEventType.MOUSE_MOVE)//移除事件;
+      this.removeAllHandlerInputAction(handler)
       // 鼠标左键点击事件
       handler.setInputAction((ele) => {
             // 创建射线并获取交点
@@ -1347,11 +1544,6 @@ export default {
             }
         }    
         }, Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
-    },
-    //通视
-    throughSight(viewer){
-      
-
     },
     createPolyLine(positions,viewer) {  
       this.options = {  
@@ -1459,7 +1651,7 @@ export default {
       }
     },
     markLocationbyJson(latitude, longitude, height, name, type) {
-      const position = Cesium.Cartesian3.fromDegrees(longitude, latitude, height);
+      const position = new Cesium.Cartesian3.fromDegrees(longitude, latitude, height);
       console.log('position :>> ', position);
       let color = ''
       let currentModel = null
@@ -1510,7 +1702,7 @@ export default {
               disturb: disturb,
               src: src,
               toll_number: this.jsonData.redunit[i].toll_json.length,
-              method: this.jsonData.redunit[i].components_json[this.jsonData.redunit[i].components_json.name].method,
+              method: this.jsonData.redunit[i].components_json[this.jsonData.redunit[i].components_json.name].properties.method,
               status: '存活',
               pos:{
                 x: 0,
@@ -1533,28 +1725,35 @@ export default {
             fire_number = this.jsonData.blueunit[i].fire_number
           }
         }
+
         this.thaadList[name] = {
           range: 300000.0,
           health: 100.0,
           id: this.id,
           fire_number: fire_number,
           mark: 1,
-
-        }
+        }    
       }
       else if (type == 'center') {
         color = 'Blue'
         currentModel = [this.models.center2!=null?Cesium.clone(this.models.center2):null,this.models.center3!=null?Cesium.clone(this.models.center3):null];
         modelUrl = [centerModel2,centerModel3]
         this.centerPosition = position
+        for(let i=0;i<this.jsonData.center.length;i++){
+            this.centerList.push({
+              order: i+1,
+              name: this.jsonData.center[i].name
+            })
+          }
       }
       else if (type == 'satelite') {
         color = 'Blue'
         currentModel = [this.model.satellite2!=null?Cesium.clone(this.models.satellite2):null,this.model.satellite3!=null?Cesium.clone(this.models.satellite3):null];
         modelUrl = [satelliteModel2,satelliteModel3]
+        
       }
 
-
+      //加载模型
       if (type == 'blue') {
         console.log(' radar!!!');
         const range = 300000;
@@ -1738,6 +1937,13 @@ export default {
       });
 
     },
+    //点击拖动模型
+    onMapClick(event) {
+      if (this.isShow && this.modeltooltip === "左键单击确认") {
+        const { latitude, longitude } = this.getCoordinatesFromEvent(event);
+        this.markLocation(latitude, longitude);
+      }
+    },
     setTimeLine(startTime, endtime, stepTime) {
       let start = Cesium.JulianDate.fromDate(new Date(startTime));  // 设置时间轴当前时间为开始时间
       let stop = Cesium.JulianDate.fromDate(new Date(endtime));
@@ -2467,7 +2673,12 @@ export default {
       this.blueVisible = false
 
     },
-
+    //移除所有handler事件
+    removeAllHandlerInputAction(handler){
+      for (let eventType in Cesium.ScreenSpaceEventType) {  
+            handler.removeInputAction(Cesium.ScreenSpaceEventType[eventType]);  
+          }  
+    }
   }
 };
 </script>

src/views/si/index.vue

@@ -188,8 +188,7 @@ import missileModel from 'public/static/model/situation/basic_missle2.glb';
 import centerModel from 'public/static/model/situation/whitehouse2.glb';
 import radarModel from 'public/static/model/situation/radar2.glb'
 import { mapGetters } from "vuex";
-import CesiumNavigation from 'cesium-navigation-es6/viewerCesiumNavigationMixin'
-export default {
+import CesiumNavigation from 'cesium-navigation-es6/viewerCesiumNavigationMixin'export default {
   components: {
     Model
   },