ソースを参照

孙浩博,fixed:移动添加线

seamew 2 年 前
コミット
a287683d99
1 ファイル変更99 行追加4 行削除
  1. 99 4
      src/views/situation/index.vue

+ 99 - 4
src/views/situation/index.vue

@@ -102,7 +102,7 @@ export default {
       center: [],
       viewer2D: null,
       viewer3D: null,
-      dimension: 2,
+      dimension: 5,
       mousevalue: null,
       // 选中的点
       selectedMarker: null,
@@ -118,7 +118,8 @@ export default {
       handler3D: null,
       handler2D: null,
       image: null,
-      modeltooltip: null
+      modeltooltip: null,
+      id: 1
     };
   },
   created() {
@@ -567,6 +568,7 @@ export default {
     markLocation(latitude, longitude) {
       const position = this.Cesium.Cartesian3.fromDegrees(longitude, latitude);
       this.viewer2D.entities.add({
+        id: this.id,
         position: position,
         point: {
           pixelSize: 12, // 调整点的大小,可以增大点的像素大小
@@ -580,6 +582,7 @@ export default {
         }
       });
       this.viewer3D.entities.add({
+        id: this.id,
         position: position,
         point: {
           pixelSize: 12, // 调整点的大小,可以增大点的像素大小
@@ -592,6 +595,7 @@ export default {
           pixelOffset: new this.Cesium.Cartesian2(0, 20) // 调整标签的像素偏移,向下偏移20像素
         }
       });
+      this.id++;
     },
     // 从鼠标点击事件获取坐标
     getCoordinatesFromEvent(event) {
@@ -650,7 +654,6 @@ export default {
             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, "右键取消");
@@ -658,6 +661,29 @@ export default {
             }
           }
         } else if (this.selectedMarker && this.modeltooltip === "右键取消") {
+          const material = new this.Cesium.PolylineArrowMaterialProperty(this.selectedMarker.point.color);
+          this.viewer2D.entities.add({
+            polyline: {
+              positions: [
+                this.oldPosition._value,
+                this.viewer2D.entities.getById(this.selectedMarker.id).position._value
+              ],
+              width: 5, // 设置线的宽度
+              material: material,
+              followSurface: false // 设置为false,使连线保持在固定的高度,不会贴地显示
+            }
+          });
+          this.viewer3D.entities.add({
+            polyline: {
+              positions: [
+                this.oldPosition._value,
+                this.viewer3D.entities.getById(this.selectedMarker.id).position._value
+              ],
+              width: 5, // 设置线的宽度
+              material: material,
+              followSurface: false // 设置为false,使连线保持在固定的高度,不会贴地显示
+            }
+          });
           this.selectedMarker = null;
           this.selectModel();
         }
@@ -668,21 +694,90 @@ export default {
           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.viewer3D.entities.getById(this.selectedMarker.id).position = position;
         }
       }, this.Cesium.ScreenSpaceEventType.MOUSE_MOVE);
       // 监听右键
-      this.handler2D.setInputAction((event) => {
+      this.handler2D.setInputAction(() => {
         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);
+      this.handler3D.setInputAction((event) => {
+        if (!this.selectedMarker && !this.modeltooltip) {
+          const screenPosition = new this.Cesium.Cartesian2(event.position.x, event.position.y);
+          const pickedEntity = this.viewer3D.scene.pick(screenPosition);
+          if (this.Cesium.defined(pickedEntity)) {
+            for (const entity of this.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 this.Cesium.PolylineArrowMaterialProperty(this.selectedMarker.point.color);
+          this.viewer2D.entities.add({
+            polyline: {
+              positions: [
+                this.oldPosition._value,
+                this.viewer2D.entities.getById(this.selectedMarker.id).position._value
+              ],
+              width: 5, // 设置线的宽度
+              material: material,
+              followSurface: false // 设置为false,使连线保持在固定的高度,不会贴地显示
+            }
+          });
+          this.viewer3D.entities.add({
+            polyline: {
+              positions: [
+                this.oldPosition._value,
+                this.viewer3D.entities.getById(this.selectedMarker.id).position._value
+              ],
+              width: 5, // 设置线的宽度
+              material: material,
+              followSurface: false // 设置为false,使连线保持在固定的高度,不会贴地显示
+            }
+          });
+          this.selectedMarker = null;
+          this.selectModel();
+        }
+      }, this.Cesium.ScreenSpaceEventType.LEFT_CLICK);
+      // 监听鼠标移动事件,用于移动标记点
+      this.handler3D.setInputAction((event) => {
+        if (this.selectedMarker && this.modeltooltip === "右键取消") {
+          const screenPosition = new this.Cesium.Cartesian2(event.endPosition.x, event.endPosition.y);
+          const position = this.viewer3D.scene.camera.pickEllipsoid(screenPosition);
+          this.viewer2D.entities.getById(this.selectedMarker.id).position = position;
+          this.viewer3D.entities.getById(this.selectedMarker.id).position = position;
+        }
+      }, this.Cesium.ScreenSpaceEventType.MOUSE_MOVE);
+      // 监听右键
+      this.handler3D.setInputAction(() => {
+        if (this.selectedMarker && this.modeltooltip === "右键取消") {
+          this.viewer3D.entities.getById(this.selectedMarker.id).position = this.oldPosition;
+          this.selectedMarker = null;
+          this.selectModel();
+        }
+      }, this.Cesium.ScreenSpaceEventType.RIGHT_CLICK);
     }
   }
 };
 </script>
 <style scoped>
+::v-deep .cesium-infoBox {
+  display: none !important;
+}
+::v-deep .cesium-infoBox-bodyless {
+  display: none !important;
+}
+::v-deep .cesium-infoBox-visible {
+  display: none !important;
+}
 .modeltooltip {
   position: absolute;
   padding: 5px;