孙浩博，fixed：2D点的移动

src/views/situation/Model.vue

@@ -101,7 +101,7 @@ export default {
         this.cancelHighlight();
         return;
       }
-      this.$emit("selectModel", "pointer", image);
+      this.$emit("selectModel", "pointer", image, "左键单击确认");
       this.activeImage = image.name;
     },
     cancelHighlight() {

src/views/situation/index.vue

@@ -70,7 +70,7 @@
         <el-button icon="el-icon-minus" circle @click="small()"></el-button>
       </div>
     </el-row>
-    <div v-if="isShow" class="modeltooltip" ref="modeltooltip">左键单击确认</div>
+    <div v-if="isShow" class="modeltooltip" ref="modeltooltip">{{ modeltooltip }}</div>
   </div>
 </template>
 <script>
@@ -102,21 +102,23 @@ export default {
       center: [],
       viewer2D: null,
       viewer3D: null,
-      dimension: 5,
+      dimension: 2,
       mousevalue: null,
-      shouldAnimate: false,
+      // 选中的点
+      selectedMarker: null,
+      // 以前的标记点坐标
+      oldPosition: null,
       activeName: null,
       currentLab: {
         index: -1,
         isActive: false
       },
-      whosmodel: "red",
-      modelType: null,
       url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
       isShow: false,
       handler3D: null,
       handler2D: null,
-      image: null
+      image: null,
+      modeltooltip: null
     };
   },
   created() {
@@ -124,6 +126,7 @@ export default {
   },
   mounted() {
     this.cesiumInit();
+    this.pointMove();
   },
   methods: {
     async saveJson(row) {
@@ -539,21 +542,23 @@ export default {
         this.$refs.modeltooltip.style.top = event.pageY - 115 + "px";
       }
     },
-    selectModel(cursorStyle, image) {
+    selectModel(cursorStyle, image, info) {
       let earthMap = document.getElementById("earth");
       earthMap.style.cursor = cursorStyle || "auto";
       if (cursorStyle) {
         document.addEventListener("mousemove", this.mouseMove);
         this.isShow = true;
         this.image = image;
+        this.modeltooltip = info;
       } else {
         document.removeEventListener("mousemove", this.mouseMove);
         this.isShow = false;
         this.image = null;
+        this.modeltooltip = null;
       }
     },
     onMapClick(event) {
-      if (this.isShow) {
+      if (this.isShow && this.modeltooltip === "左键单击确认") {
         const { latitude, longitude } = this.getCoordinatesFromEvent(event);
         this.markLocation(latitude, longitude);
       }
@@ -574,7 +579,6 @@ export default {
           pixelOffset: new this.Cesium.Cartesian2(0, 20) // 调整标签的像素偏移，向下偏移20像素
         }
       });
-      console.log("position :>> ", position);
       this.viewer3D.entities.add({
         position: position,
         point: {
@@ -607,6 +611,73 @@ export default {
         latitude,
         longitude
       };
+    },
+    markLine(point1, point2, color) {
+      // 从点1和点2的WGS84坐标创建Cartesian3对象
+      const position1 = this.Cesium.Cartesian3.fromDegrees(point1.longitude, point1.latitude, point1.height || 0);
+      const position2 = this.Cesium.Cartesian3.fromDegrees(point2.longitude, point2.latitude, point2.height || 0);
+      // 创建一个带有箭头图标的PolylineMaterial
+      const material = new this.Cesium.PolylineArrowMaterialProperty(
+        this.Cesium.Color.fromCssColorString(color || "red")
+      );
+
+      // 将点1和点2之间的连线添加到Viewer中
+      this.viewer2D.entities.add({
+        polyline: {
+          positions: [position1, position2],
+          width: 5, // 设置线的宽度
+          material: material,
+          followSurface: false // 设置为false，使连线保持在固定的高度，不会贴地显示
+        }
+      });
+      this.viewer3D.entities.add({
+        polyline: {
+          positions: [position1, position2],
+          width: 5, // 设置线的宽度
+          material: material,
+          followSurface: false // 设置为false，使连线保持在固定的高度，不会贴地显示
+        }
+      });
+    },
+    // 鼠标点击的事件监听
+    pointMove() {
+      // 监听鼠标左键点击事件
+      this.handler2D.setInputAction((event) => {
+        if (!this.selectedMarker && !this.modeltooltip) {
+          const screenPosition = new this.Cesium.Cartesian2(event.position.x, event.position.y);
+          const pickedEntity = this.viewer2D.scene.pick(screenPosition);
+          if (this.Cesium.defined(pickedEntity)) {
+            for (const entity of this.viewer2D.entities.values) {
+              if (pickedEntity.id.id === entity.id) {
+                this.selectedMarker = entity;
+                console.log(this.selectedMarker.id);
+                this.oldPosition = pickedEntity.id.position;
+                // 显示提示
+                this.selectModel("pointer", null, "右键取消");
+              }
+            }
+          }
+        } else if (this.selectedMarker && this.modeltooltip === "右键取消") {
+          this.selectedMarker = null;
+          this.selectModel();
+        }
+      }, this.Cesium.ScreenSpaceEventType.LEFT_CLICK);
+      // 监听鼠标移动事件，用于移动标记点
+      this.handler2D.setInputAction((event) => {
+        if (this.selectedMarker && this.modeltooltip === "右键取消") {
+          const screenPosition = new this.Cesium.Cartesian2(event.endPosition.x, event.endPosition.y);
+          const position = this.viewer2D.scene.camera.pickEllipsoid(screenPosition);
+          this.viewer2D.entities.getById(this.selectedMarker.id).position = position;
+        }
+      }, this.Cesium.ScreenSpaceEventType.MOUSE_MOVE);
+      // 监听右键
+      this.handler2D.setInputAction((event) => {
+        if (this.selectedMarker && this.modeltooltip === "右键取消") {
+          this.viewer2D.entities.getById(this.selectedMarker.id).position = this.oldPosition;
+          this.selectedMarker = null;
+          this.selectModel();
+        }
+      }, this.Cesium.ScreenSpaceEventType.RIGHT_CLICK);
     }
   }
 };