huweili-cesium 1.3.2 → 1.3.3

package/js/drawFenceNew.js

@@ -1002,8 +1002,16 @@ export function drawFenceNew() {
     let centerPointEntity = null
     // activePointEntity：活动点实体（跟随鼠标的边界点）
     let activePointEntity = null
-    // ellipseEntity：椭圆实体（用于显示圆形围栏的预览）
-    let ellipseEntity = null
+    // circleWallEntity / circleOutlineEntity / radiusLineEntity：绘制过程预览（与最终围栏一致的贴地圆边）
+    let circleWallEntity = null
+    let circleOutlineEntity = null
+    let radiusLineEntity = null
+    // 预览几何缓存，仅在鼠标移动时更新，避免每帧重复计算
+    let previewCirclePositions = []
+    let previewWallMaxHeights = []
+    let previewWallMinHeights = []
+    let previewRadiusLinePositions = []
+    let previewRenderFrameId = null
     // tipEntity：提示文字实体（显示"点击确定圆心"等提示）
     let tipEntity = null
     // radiusLabelEntity：绘制过程中显示当前半径的标签
@@ -1018,7 +1026,9 @@ export function drawFenceNew() {
     // ==================== 临时实体ID配置 ====================
     // 这些是绘制过程中临时显示的实体，绘制完成后会清理
     const tempIds = {
-      ellipse: `${options.id}_draw_circle_wall`,  // 临时椭圆围栏
+      circleWall: `${options.id}_draw_circle_wall`,
+      circleOutline: `${options.id}_draw_circle_outline`,
+      radiusLine: `${options.id}_draw_radius_line`,
       center: `${options.id}_draw_center_point`,  // 临时圆心点
       active: `${options.id}_draw_active_point`,  // 临时边界点
       tip: `${options.id}_draw_tip`,              // 临时提示文字
@@ -1139,6 +1149,42 @@ export function drawFenceNew() {
       })
     }
 
+    const updatePreviewGeometry = () => {
+      if (!centerPosition || !edgePosition) {
+        previewCirclePositions = []
+        previewWallMaxHeights = []
+        previewWallMinHeights = []
+        previewRadiusLinePositions = []
+        return
+      }
+
+      const radius = getRadius()
+      previewRadiusLinePositions = [centerPosition, edgePosition]
+
+      if (radius <= 0) {
+        previewCirclePositions = []
+        previewWallMaxHeights = []
+        previewWallMinHeights = []
+        return
+      }
+
+      const centerData = cartesianToLngLatHeight(centerPosition)
+      const circleLngLats = generateCircleLngLatPositions(centerData.lng, centerData.lat, radius)
+      const footprint = circleLngLats.map(cartesianFootprintFromLngLat)
+      previewCirclePositions = [...footprint, footprint[0]]
+      previewWallMaxHeights = previewCirclePositions.map(() => height)
+      previewWallMinHeights = previewCirclePositions.map(() => 0)
+    }
+
+    const schedulePreviewUpdate = () => {
+      if (previewRenderFrameId !== null) return
+      previewRenderFrameId = requestAnimationFrame(() => {
+        previewRenderFrameId = null
+        updatePreviewGeometry()
+        map.scene.requestRender()
+      })
+    }
+
     // ==================== 核心业务函数 ====================
 
     /**
@@ -1162,25 +1208,45 @@ export function drawFenceNew() {
         })
       }
 
-      // 2. 创建椭圆实体（如果还没有）
-      if (!ellipseEntity) {
-        ellipseEntity = map.entities.add({
-          id: tempIds.ellipse,
-          // 使用CallbackProperty实现动态更新：当centerPosition或radius变化时自动更新
-          position: new Cesium.CallbackProperty(() => centerPosition, false),
-          ellipse: {
-            // 椭圆的长半轴（动态半径）
-            semiMajorAxis: new Cesium.CallbackProperty(() => getRadius(), false),
-            // 椭圆的短半轴（与长半轴相同 = 圆形）
-            semiMinorAxis: new Cesium.CallbackProperty(() => getRadius(), false),
-            height: 0,  // 椭圆底部高度（地面）
-            extrudedHeight: height,  // 椭圆顶部高度（围栏高度）
-            material: color.withAlpha(0),  // 填充材质（透明）
-            outline: true,  // 显示边框
-            outlineColor: color,  // 边框颜色
-            outlineWidth,  // 边框宽度
-            numberOfVerticalLines: 64  // 垂直线条数，数值越大圆形越圆滑
-          }
+      // 2. 创建贴地圆边预览（确定圆心后显示，与最终围栏 polyline / wall 一致）
+      if (centerPosition && !circleWallEntity) {
+        circleWallEntity = map.entities.add({
+          id: tempIds.circleWall,
+          wall: {
+            positions: new Cesium.CallbackProperty(() => previewCirclePositions, false),
+            maximumHeights: new Cesium.CallbackProperty(() => previewWallMaxHeights, false),
+            minimumHeights: new Cesium.CallbackProperty(() => previewWallMinHeights, false),
+            material: color.withAlpha(0.18),
+            outline: true,
+            outlineColor: color,
+            outlineWidth,
+          },
+        })
+      }
+
+      if (centerPosition && !circleOutlineEntity) {
+        circleOutlineEntity = map.entities.add({
+          id: tempIds.circleOutline,
+          polyline: {
+            positions: new Cesium.CallbackProperty(() => previewCirclePositions, false),
+            width: outlineWidth,
+            material: color,
+            clampToGround: true,
+            arcType: Cesium.ArcType.GEODESIC,
+          },
+        })
+      }
+
+      if (centerPosition && !radiusLineEntity) {
+        radiusLineEntity = map.entities.add({
+          id: tempIds.radiusLine,
+          polyline: {
+            positions: new Cesium.CallbackProperty(() => previewRadiusLinePositions, false),
+            width: Math.max(1, outlineWidth - 1),
+            material: color.withAlpha(0.85),
+            clampToGround: true,
+            arcType: Cesium.ArcType.GEODESIC,
+          },
         })
       }
 
@@ -1241,17 +1307,28 @@ export function drawFenceNew() {
      */
     const cleanupTempEntities = () => {
       // 遍历所有临时实体，如果存在就从地图上移除
-      ;[ellipseEntity, centerPointEntity, activePointEntity, radiusLabelEntity, tipEntity, nameLabelEntity].forEach((entity) => {
+      ;[circleWallEntity, circleOutlineEntity, radiusLineEntity, centerPointEntity, activePointEntity, radiusLabelEntity, tipEntity, nameLabelEntity].forEach((entity) => {
         if (entity) {
           map.entities.remove(entity)
         }
       })
       // 将变量清空，防止内存泄露
-      ellipseEntity = null
+      circleWallEntity = null
+      circleOutlineEntity = null
+      radiusLineEntity = null
       centerPointEntity = null
       activePointEntity = null
       radiusLabelEntity = null
+      tipEntity = null
       nameLabelEntity = null
+      previewCirclePositions = []
+      previewWallMaxHeights = []
+      previewWallMinHeights = []
+      previewRadiusLinePositions = []
+      if (previewRenderFrameId !== null) {
+        cancelAnimationFrame(previewRenderFrameId)
+        previewRenderFrameId = null
+      }
     }
 
     /**
@@ -1291,9 +1368,17 @@ export function drawFenceNew() {
       const footprint = circleLngLats.map(cartesianFootprintFromLngLat)
       const wallPositions = [...footprint, footprint[0]]
 
-      if (ellipseEntity) {
-        map.entities.remove(ellipseEntity)
-        ellipseEntity = null
+      if (circleWallEntity) {
+        map.entities.remove(circleWallEntity)
+        circleWallEntity = null
+      }
+      if (circleOutlineEntity) {
+        map.entities.remove(circleOutlineEntity)
+        circleOutlineEntity = null
+      }
+      if (radiusLineEntity) {
+        map.entities.remove(radiusLineEntity)
+        radiusLineEntity = null
       }
 
       const fenceEntity = map.entities.add({
@@ -1451,6 +1536,7 @@ export function drawFenceNew() {
         centerPosition = Cesium.Cartesian3.clone(cartesian)
         edgePosition = Cesium.Cartesian3.clone(cartesian)  // 边界点初始化为圆心
         ensurePreviewEntities()  // 确保预览实体都创建好
+        schedulePreviewUpdate()
         emitChange()  // 触发变化回调
         return
       }
@@ -1473,6 +1559,7 @@ export function drawFenceNew() {
       // 如果已经确定了圆心 → 实时更新边界点，让预览跟随鼠标
       if (!centerPosition) return
       edgePosition = Cesium.Cartesian3.clone(cartesian)
+      schedulePreviewUpdate()
     }, Cesium.ScreenSpaceEventType.MOUSE_MOVE)
 
     // ==================== 事件3：鼠标右键点击 ====================

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "huweili-cesium",
-  "version": "1.3.2",
+  "version": "1.3.3",
   "description": "基于 Cesium 的地图工具库（无人机态势、轨迹、围栏、工具栏等）",
   "type": "module",
   "main": "./index.js",