add：renyuan cheliang 围栏创建

src/views/index-wl.vue

@@ -592,29 +592,80 @@ export default {
 
     // 开始创建电子围栏
     startCreatingFence() {
+      if (!this.viewer) {
+        console.error("Cesium viewer 未初始化");
+        alert("地图初始化未完成，请稍后再试");
+        return;
+      }
+
       this.isCreatingFence = true;
       this.currentFencePoints = [];
 
+      // 清除之前的绘制
       if (this.drawingEntity) {
         this.viewer.entities.remove(this.drawingEntity);
         this.drawingEntity = null;
       }
 
-      // 添加鼠标点击事件监听
+      // 显示提示信息
+      alert(
+        `开始创建${
+          this.currentFenceType === "person" ? "人员" : "车辆"
+        }围栏，请在地图上点击至少3个点，右键完成绘制`
+      );
+
+      try {
+        // 保存原始的事件处理器，避免重复添加
+        if (this.originalLeftClickHandler) {
+          this.viewer.screenSpaceEventHandler.removeInputAction(
+            Cesium.ScreenSpaceEventType.LEFT_CLICK
+          );
+          this.viewer.screenSpaceEventHandler.removeInputAction(
+            Cesium.ScreenSpaceEventType.RIGHT_CLICK
+          );
+        }
+
+        // 添加鼠标点击事件监听 - 用于添加点
         this.viewer.screenSpaceEventHandler.setInputAction((click) => {
           const ray = this.viewer.camera.getPickRay(click.position);
-        const intersection = this.viewer.scene.globe.pick(
-          ray,
-          this.viewer.scene
-        );
+
+          // 首先尝试从3D模型上拾取点
+          let intersection;
+          if (this.tileset) {
+            intersection = this.viewer.scene.pickFromRay(ray, [this.tileset]);
+          }
+
+          // 如果没有从模型上拾取到点，则从地球上拾取
+          if (!intersection || !intersection.position) {
+            intersection = this.viewer.scene.globe.pick(ray, this.viewer.scene);
+          }
 
           if (intersection) {
-          const cartographic = Cesium.Cartographic.fromCartesian(intersection);
+            const position = intersection.position || intersection;
+            const cartographic = Cesium.Cartographic.fromCartesian(position);
             const longitude = Cesium.Math.toDegrees(cartographic.longitude);
             const latitude = Cesium.Math.toDegrees(cartographic.latitude);
 
             this.currentFencePoints.push({ lng: longitude, lat: latitude });
             this.updateDrawingFence();
+
+            // 在点击位置添加临时标记点，便于用户看到已添加的点
+            const pointEntity = this.viewer.entities.add({
+              position: Cesium.Cartesian3.fromDegrees(longitude, latitude, 5),
+              point: {
+                pixelSize: 8,
+                color: Cesium.Color.YELLOW,
+                outlineColor: Cesium.Color.BLACK,
+                outlineWidth: 2,
+                heightReference: Cesium.HeightReference.CLAMP_TO_3D_TILE,
+              },
+            });
+
+            // 保存临时点实体，稍后清除
+            if (!this.temporaryPointEntities) {
+              this.temporaryPointEntities = [];
+            }
+            this.temporaryPointEntities.push(pointEntity);
           }
         }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
 
@@ -623,21 +674,32 @@ export default {
           if (this.currentFencePoints.length >= 3) {
             this.completeCreatingFence();
           } else {
-          alert("围栏至少需要3个点");
+            alert(
+              `围栏至少需要3个点，当前已添加${this.currentFencePoints.length}个点`
+            );
           }
         }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
+
+        // 记录已经添加了事件处理器
+        this.originalLeftClickHandler = true;
+      } catch (error) {
+        console.error("添加事件监听失败:", error);
+        this.stopCreatingFence();
+        alert("创建围栏失败，请稍后重试");
+      }
     },
 
     // 更新绘制中的围栏
     updateDrawingFence() {
+      if (!this.viewer || this.currentFencePoints.length < 2) return;
+
+      // 清除之前的绘制
       if (this.drawingEntity) {
         this.viewer.entities.remove(this.drawingEntity);
       }
 
-      if (this.currentFencePoints.length < 2) return;
-
-      const positions = this.currentFencePoints.map((point) =>
-        Cesium.Cartesian3.fromDegrees(point.lng, point.lat, 1)
+      const positions = this.currentFencePoints.map(
+        (point) => Cesium.Cartesian3.fromDegrees(point.lng, point.lat, 3) // 稍微抬高一点，确保可见
       );
 
       // 闭合多边形
@@ -645,24 +707,42 @@ export default {
         positions.push(positions[0]);
       }
 
+      // 创建绘制中的围栏实体
       this.drawingEntity = this.viewer.entities.add({
         polyline: {
           positions: positions,
           width: 2,
-          material: Cesium.Color.YELLOW,
-          clampToGround: true,
+          material: new Cesium.PolylineGlowMaterialProperty({
+            glowPower: 0.8,
+            color: Cesium.Color.YELLOW,
+          }),
+          clampToGround: false,
+          heightReference: Cesium.HeightReference.CLAMP_TO_3D_TILE,
+          disableDepthTestDistance: Number.POSITIVE_INFINITY, // 确保显示在模型上方
         },
       });
     },
 
     // 完成创建电子围栏
     completeCreatingFence() {
-      const fenceName = prompt("请输入围栏名称:", "新建围栏");
-      if (!fenceName) return;
+      if (!this.viewer || this.currentFencePoints.length < 3) return;
+
+      // 获取围栏名称
+      const defaultName = `${
+        this.currentFenceType === "person" ? "人员" : "车辆"
+      }围栏${new Date().getTime()}`;
+      const fenceName = prompt("请输入围栏名称:", defaultName);
 
+      // 如果用户取消了输入，则停止创建
+      if (fenceName === null) {
+        this.stopCreatingFence();
+        return;
+      }
+
+      // 创建新围栏对象
       const newFence = {
         id: Date.now(),
-        name: fenceName,
+        name: fenceName || defaultName,
         points: [...this.currentFencePoints],
         type: this.currentFenceType,
         color:
@@ -675,33 +755,59 @@ export default {
             : Cesium.Color.BLUE,
       };
 
+      // 添加到对应类型的围栏数组
       if (this.currentFenceType === "person") {
         this.personFences.push(newFence);
       } else {
         this.vehicleFences.push(newFence);
       }
 
+      // 渲染新创建的围栏
       this.renderFence(newFence);
+
+      // 自动选中新创建的围栏
+      this.selectedFence = newFence;
+
+      console.log("围栏创建成功:", newFence);
+
+      // 停止创建状态
       this.stopCreatingFence();
     },
-
     // 停止创建电子围栏
     stopCreatingFence() {
       this.isCreatingFence = false;
 
       // 移除临时绘制的围栏
-      if (this.drawingEntity) {
+      if (this.drawingEntity && this.viewer) {
         this.viewer.entities.remove(this.drawingEntity);
         this.drawingEntity = null;
       }
 
+      // 移除临时点标记
+      if (this.temporaryPointEntities && this.viewer) {
+        this.temporaryPointEntities.forEach((entity) => {
+          this.viewer.entities.remove(entity);
+        });
+        this.temporaryPointEntities = null;
+      }
+
       // 移除事件监听
+      if (this.viewer) {
+        // 只移除我们添加的事件处理器
+        try {
           this.viewer.screenSpaceEventHandler.removeInputAction(
             Cesium.ScreenSpaceEventType.LEFT_CLICK
           );
           this.viewer.screenSpaceEventHandler.removeInputAction(
             Cesium.ScreenSpaceEventType.RIGHT_CLICK
           );
+        } catch (error) {
+          console.log("移除事件监听时出错:", error);
+        }
+      }
+
+      this.originalLeftClickHandler = null;
+      this.currentFencePoints = [];
     },
 
     // 选择围栏
@@ -762,10 +868,12 @@ export default {
       });
     },
 
-    // 渲染单个围栏
+    // 改进的渲染围栏方法
     renderFence(fence) {
-      const positions = fence.points.map(
-        (point) => Cesium.Cartesian3.fromDegrees(point.lng, point.lat, 2) // 稍微抬高一点，避免被地形遮挡
+      if (!this.viewer) return;
+
+      const positions = fence.points.map((point) =>
+        Cesium.Cartesian3.fromDegrees(point.lng, point.lat, 2)
       );
 
       // 选择边框颜色，如果是选中的围栏则使用高亮色
@@ -774,6 +882,11 @@ export default {
           ? Cesium.Color.YELLOW
           : fence.borderColor;
 
+      // 移除已存在的围栏实体
+      if (this.fenceEntities[fence.id]) {
+        this.viewer.entities.remove(this.fenceEntities[fence.id]);
+      }
+
       // 创建多边形实体
       const fenceEntity = this.viewer.entities.add({
         polygon: {
@@ -785,11 +898,35 @@ export default {
           heightReference: Cesium.HeightReference.CLAMP_TO_3D_TILE,
           disableDepthTestDistance: Number.POSITIVE_INFINITY, // 确保始终显示在最前面
         },
+        // 添加围栏名称标签
+        label: {
+          text: fence.name,
+          font: "14px sans-serif",
+          fillColor: Cesium.Color.WHITE,
+          backgroundColor: Cesium.Color.BLACK.withAlpha(0.7),
+          padding: new Cesium.Cartesian2(5, 5),
+          verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+          disableDepthTestDistance: Number.POSITIVE_INFINITY,
+          position: this.calculatePolygonCenter(fence.points),
+        },
       });
 
       this.fenceEntities[fence.id] = fenceEntity;
     },
+    // 计算多边形中心点，用于显示标签
+    calculatePolygonCenter(points) {
+      let sumLng = 0,
+        sumLat = 0;
+      points.forEach((point) => {
+        sumLng += point.lng;
+        sumLat += point.lat;
+      });
 
+      const centerLng = sumLng / points.length;
+      const centerLat = sumLat / points.length;
+
+      return Cesium.Cartesian3.fromDegrees(centerLng, centerLat, 5);
+    },
     // 创建人员实体
     createPersonEntities() {
       this.personnelList.forEach((person) => {