huweili-cesium 1.3.1 → 1.3.3

package/js/drawFenceNew.js

@@ -1002,10 +1002,20 @@ 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：绘制过程中显示当前半径的标签
+    let radiusLabelEntity = null
     // nameLabelEntity：围栏名称标签实体
     let nameLabelEntity = null
     // handler：屏幕事件处理器（监听鼠标点击、移动等）
@@ -1016,10 +1026,13 @@ 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`               // 临时提示文字
+      tip: `${options.id}_draw_tip`,              // 临时提示文字
+      radiusLabel: `${options.id}_draw_radius_label`,  // 临时半径标签
     }
 
     // ==================== 辅助函数部分 ====================
@@ -1078,6 +1091,23 @@ export function drawFenceNew() {
       return geodesic.surfaceDistance
     }
 
+    const formatRadius = (radius) => {
+      if (!Number.isFinite(radius)) return '0 m'
+      if (radius >= 1000) return `${(radius / 1000).toFixed(2)} km`
+      return `${radius.toFixed(2)} m`
+    }
+
+    const getRadiusLabelPosition = () => {
+      if (!centerPosition || !edgePosition) return null
+      const centerCartographic = Cesium.Cartographic.fromCartesian(centerPosition)
+      const edgeCartographic = Cesium.Cartographic.fromCartesian(edgePosition)
+      return Cesium.Cartesian3.fromRadians(
+        (centerCartographic.longitude + edgeCartographic.longitude) / 2,
+        (centerCartographic.latitude + edgeCartographic.latitude) / 2,
+        0,
+      )
+    }
+
     /**
      * 获取提示文字的位置（鼠标位置优先）
      * 
@@ -1099,7 +1129,7 @@ export function drawFenceNew() {
       }
 
       // 已经有圆心 → 提示用户"移动调整半径，点击或右键完成"
-      return '移动鼠标调整半径，点击或右键完成绘制'
+      return `移动鼠标调整半径，当前半径：${formatRadius(getRadius())}，点击或右键完成绘制`
     }
 
     /**
@@ -1119,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()
+      })
+    }
+
     // ==================== 核心业务函数 ====================
 
     /**
@@ -1142,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,
+          },
         })
       }
 
@@ -1180,7 +1266,32 @@ export function drawFenceNew() {
         })
       }
 
-      // 4. 创建提示文字实体（如果还没有）
+      // 4. 创建半径标签（确定圆心后显示）
+      if (!radiusLabelEntity && centerPosition) {
+        radiusLabelEntity = map.entities.add({
+          id: tempIds.radiusLabel,
+          position: new Cesium.CallbackProperty(() => getRadiusLabelPosition(), false),
+          label: {
+            text: new Cesium.CallbackProperty(() => formatRadius(getRadius()), false),
+            font: 'bold 10px Microsoft YaHei',
+            fillColor: Cesium.Color.WHITE,
+            style: Cesium.LabelStyle.FILL_AND_OUTLINE,
+            outlineColor: Cesium.Color.BLACK,
+            outlineWidth: 2,
+            showBackground: true,
+            backgroundColor: Cesium.Color.fromCssColorString('rgba(0, 0, 0, 0.75)'),
+            backgroundPadding: new Cesium.Cartesian2(4, 4),
+            verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+            horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
+            pixelOffset: new Cesium.Cartesian2(0, -16),
+            disableDepthTestDistance: Number.POSITIVE_INFINITY,
+            distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 2000000),
+            scaleByDistance: new Cesium.NearFarScalar(1000, 1.2, 5000000, 0.6),
+          },
+        })
+      }
+
+      // 5. 创建提示文字实体（如果还没有）
       if (!tipEntity) {
         tipEntity = createMouseTipEntity(map, {
           id: tempIds.tip,
@@ -1196,16 +1307,28 @@ export function drawFenceNew() {
      */
     const cleanupTempEntities = () => {
       // 遍历所有临时实体，如果存在就从地图上移除
-      ;[ellipseEntity, centerPointEntity, activePointEntity, 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
+      }
     }
 
     /**
@@ -1245,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({
@@ -1273,13 +1404,14 @@ export function drawFenceNew() {
 
       await applyTerrainWallToEntity(map, fenceEntity, circleLngLats, height)
 
-      ;[centerPointEntity, activePointEntity, tipEntity].forEach((entity) => {
+      ;[centerPointEntity, activePointEntity, radiusLabelEntity, tipEntity].forEach((entity) => {
         if (entity) {
           map.entities.remove(entity)
         }
       })
       centerPointEntity = null
       activePointEntity = null
+      radiusLabelEntity = null
       tipEntity = null
 
       const centerHeights = await sampleTerrainHeights(map, [centerData])
@@ -1404,6 +1536,7 @@ export function drawFenceNew() {
         centerPosition = Cesium.Cartesian3.clone(cartesian)
         edgePosition = Cesium.Cartesian3.clone(cartesian)  // 边界点初始化为圆心
         ensurePreviewEntities()  // 确保预览实体都创建好
+        schedulePreviewUpdate()
         emitChange()  // 触发变化回调
         return
       }
@@ -1426,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.1",
+  "version": "1.3.3",
   "description": "基于 Cesium 的地图工具库（无人机态势、轨迹、围栏、工具栏等）",
   "type": "module",
   "main": "./index.js",