huweili-cesium 1.2.36 → 1.2.37

package/js/captureFenceScreenshot.js

@@ -1,191 +1,1041 @@
 /**
- * 电子围栏绘制完成后，按围栏在屏幕上的范围裁剪地图截图并输出 base64
+ * 防区设置页面 - 地图操作工具函数
+ * 
+ * 提供防区设置页面所需的地图相关功能，包括：
+ * 1. 指挥所半球区域的初始化和控制
+ * 2. 多边形电子围栏的绘制和管理
+ * 3. 围栏历史记录的管理
+ * 
+ * @author 
+ * @version 1.0.0
  */
-import * as Cesium from 'cesium'
-import { useMapStore } from './stores/mapStore.js'
 
-const scratchCartesian2 = new Cesium.Cartesian2()
+// 导入依赖
+import * as Cesium from 'cesium'
+import { computed, ref, nextTick } from 'vue'
+import { ElMessage } from 'element-plus'
+import { basicConfig } from 'huweili-cesium/basis'
+import { drawFenceNew } from 'huweili-cesium/drawFenceNew'
+import { useMapStore } from 'huweili-cesium/stores/mapStore'
+import { BaseConfig } from '@/config/global'
+import {
+  initCommandHemisphereZones,      // 初始化指挥所半球区域
+  updateRadiusCommandHemisphereZones, // 更新半球区域半径
+  setVisibilityCommandHemisphereZones, // 设置半球区域可见性
+} from '@/utils/cesium/initCommandHemisphereZones.js'
+import { captureFenceScreenshot } from 'huweili-cesium/captureFenceScreenshot.js'
+import { listElectronicFence } from '@/api/fence'
 
 /**
- * 将围栏顶点经纬度转为 Cartesian3
- * @param {Array<{ lng: number, lat: number, height?: number }>} positions
+ * UI 提示文字常量（使用 Unicode 转义避免 Windows 编辑器编码问题）
  */
-function toCartesians(positions) {
-  return positions.map((p) =>
-    Cesium.Cartesian3.fromDegrees(Number(p.lng), Number(p.lat), Number(p.height) || 0)
-  )
+const MSG = {
+  fileDesc: '\u9632\u533A\u8BBE\u7F6E\u9875 \u2014 \u5730\u56FE\u76F8\u5173\u80FD\u529B\uFF08\u6307\u6325\u6240\u534A\u7403\u3001\u591A\u8FB9\u5F62\u56F4\u680F\u7ED8\u5236\u7B49\uFF09',
+  fenceHistoryList: '\u56F4\u680F\u5386\u53F2\u5217\u8868',
+  zoneEnabled: '\u9632\u533A\u5F00\u5173',
+  maxFenceCount: '\u6700\u5927\u56F4\u680F\u6570\u91CF',
+  openFenceFirst: '\u8BF7\u5148\u5F00\u542F\u7535\u5B50\u56F4\u680F',
+  fenceListFull: '\u56F4\u680F\u5386\u53F2\u5217\u8868\u5DF2\u6EE1\uFF0C\u65E0\u6CD5\u7ED8\u5236',
+  mapNotReady: '\u5730\u56FE\u5C1A\u672A\u52A0\u8F7D\u5B8C\u6210',
+  polygonDrawingInProgress: '\u6B63\u5728\u7ED8\u5236\u591A\u8FB9\u5F62\u56F4\u680F\uFF0C\u8BF7\u5148\u5B8C\u6210\u6216\u70B9\uFF0C\u53CC\u51FB\u6216\u53F3\u952E\u7ED3\u675F',
+  circleDrawingInProgress: '\u6B63\u5728\u7ED8\u5236\u5706\u5F62\u56F4\u680F\uFF0C\u8BF7\u5148\u5B8C\u6210\u6216\u53D6\u6D88',
+  polygonFencePrefix: '\u591A\u8FB9\u5F62\u56F4\u680F',
+  circleFencePrefix: '\u5706\u5F62\u56F4\u680F',
+  drawDone: '\u7ED8\u5236\u5B8C\u6210',
+  polygonDrawingHint: '\u591A\u8FB9\u5F62\u56F4\u680F\u7ED8\u5236\u4E2D\uFF1A\u5DE6\u952E\u52A0\u70B9\uFF0C\u53CC\u51FB\u6216\u53F3\u952E\u7ED3\u675F',
+  circleDrawingHint: '\u5706\u5F62\u56F4\u680F\u7ED8\u5236\u4E2D\uFF1A\u7B2C\u4E00\u6B21\u70B9\u51FB\u786E\u5B9A\u5706\u5FC3\uFF0C\u7B2C\u4E8C\u6B21\u70B9\u51FB\u786E\u5B9A\u534A\u5F84',
+  polygonDrawCancelled: '\u591A\u8FB9\u5F62\u56F4\u680F\u7ED8\u5236\u5DF2\u53D6\u6D88',
+  circleDrawCancelled: '\u5706\u5F62\u56F4\u680F\u7ED8\u5236\u5DF2\u53D6\u6D88',
+  cannotStartPolygonDraw: '\u65E0\u6CD5\u5F00\u59CB\u591A\u8FB9\u5F62\u7ED8\u5236',
+  cannotStartCircleDraw: '\u65E0\u6CD5\u5F00\u59CB\u5706\u5F62\u7ED8\u5236',
+  userCancelled: '\u5DF2\u53D6\u6D88\u7ED8\u5236',
+  fenceOutsideIdentifyZone: '\u7535\u5B50\u56F4\u680F\u5FC5\u987B\u5728\u8BC6\u522B\u533A\u4E4B\u5185\uFF0C\u8BF7\u91CD\u65B0\u7ED8\u5236',
 }
 
 /**
- * 相机飞到刚好能看清围栏
+ * 防区设置页面地图实例ID
+ * 优先从全局配置获取，若未配置则使用默认值
  */
-function flyCameraToFence(map, positions, options = {}) {
-  return new Promise((resolve) => {
-    const cartesians = toCartesians(positions)
-    const sphere = Cesium.BoundingSphere.fromPoints(cartesians)
-    if (!sphere || !Number.isFinite(sphere.radius)) {
-      resolve()
-      return
-    }
+export const DEFENSE_ZONE_MAP_ID =
+  window.MapInstanceIds?.DEFENSE_ZONE_SETTING || 'defense-zone-setting-map'
 
-    const range = Math.max(sphere.radius * 2.8, 80)
-    const duration = options.flyDuration ?? 0.6
-    let settled = false
-    const done = () => {
-      if (settled) return
-      settled = true
-      resolve()
-    }
-
-    map.camera.flyToBoundingSphere(sphere, {
-      duration,
-      offset: new Cesium.HeadingPitchRange(
-        0,
-        Cesium.Math.toRadians(options.pitch ?? -55),
-        range
-      ),
-      complete: done,
-      cancel: done,
-    })
+/**
+ * 最大围栏数量限制
+ */
+const MAX_FENCE_COUNT = 6
 
-    setTimeout(done, duration * 1000 + 400)
-  })
-}
+/**
+ * 获取地图状态管理实例
+ */
+const mapStore = useMapStore()
 
 /**
- * 等待地图完成一次真实绘制（postRender 后再截图，避免画布为空）
+ * 获取基础地图配置工具函数
  */
-function waitScenePostRender(map) {
-  return new Promise((resolve) => {
-    const remover = map.scene.postRender.addEventListener(() => {
-      remover()
-      resolve()
-    })
-    map.scene.requestRender()
-  })
+const { setBeiJingTime, setCesiumCenter } = basicConfig()
+
+/**
+ * 获取多边形围栏绘制工具函数
+ */
+const { drawPolygonFenceNoLabel, destroyPolygonFenceNoLabel, destroyPolygonFence, showPolygonFence, drawCircleFence, destroyCircleFence, showCircleFence } = drawFenceNew()
+
+/**
+ * 当前地图实例ID（运行时动态赋值）
+ */
+let currentMapId = ''
+
+/**
+ * 多边形绘制控制器（用于取消正在进行的绘制操作）
+ * @type {{ cancel?: () => void } | null}
+ */
+let polygonDrawController = null
+
+/**
+ * 圆形绘制控制器（用于取消正在进行的绘制操作）
+ * @type {{ cancel?: () => void } | null}
+ */
+let circleDrawController = null
+
+/**
+ * 是否已显示多边形绘制提示信息（防止重复提示）
+ */
+let polygonDrawingTipShown = false
+
+/**
+ * 是否已显示圆形绘制提示信息（防止重复提示）
+ */
+let circleDrawingTipShown = false
+
+/**
+ * 识别区信息（用于检测电子围栏是否在识别区内）
+ */
+let identifyZoneInfo = {
+  center: [0, 0],  // [lng, lat]
+  radius: 0        // 半径（米）
 }
 
 /**
- * 计算围栏顶点在 canvas 绘图缓冲中的包围盒（像素）
+ * 获取当前地图ID
+ * @returns {string} 地图实例ID
  */
-function computeFenceScreenBBox(map, positions) {
-  const scene = map.scene
-  let minX = Infinity
-  let minY = Infinity
-  let maxX = -Infinity
-  let maxY = -Infinity
-  let valid = 0
+const getMapId = () => currentMapId || DEFENSE_ZONE_MAP_ID
 
-  for (const p of positions) {
-    const cartesian = Cesium.Cartesian3.fromDegrees(
-      Number(p.lng),
-      Number(p.lat),
-      Number(p.height) || 0
-    )
-    const win = Cesium.SceneTransforms.worldToDrawingBufferCoordinates(
-      scene,
-      cartesian,
-      scratchCartesian2
-    )
-    if (!win || !Number.isFinite(win.x) || !Number.isFinite(win.y)) continue
+/**
+ * 更新识别区信息
+ * @param {number} lng - 中心点经度
+ * @param {number} lat - 中心点纬度
+ * @param {number} radius - 半径（米）
+ */
+const updateIdentifyZoneInfo = (lng, lat, radius) => {
+  identifyZoneInfo.center = [lng, lat]
+  identifyZoneInfo.radius = radius
+}
 
-    minX = Math.min(minX, win.x)
-    minY = Math.min(minY, win.y)
-    maxX = Math.max(maxX, win.x)
-    maxY = Math.max(maxY, win.y)
-    valid++
+/**
+ * 判断点是否在识别区内
+ * @param {number} lng - 点的经度
+ * @param {number} lat - 点的纬度
+ * @returns {boolean} - 是否在识别区内
+ */
+const isPointInIdentifyZone = (lng, lat) => {
+  const { center, radius } = identifyZoneInfo
+  
+  // 如果识别区未正确初始化，允许绘制（避免因配置问题导致无法绘制）
+  if (!center || center.length < 2 || typeof center[0] !== 'number' || typeof center[1] !== 'number') {
+    console.warn('识别区中心点未正确初始化，允许绘制')
+    return true
+  }
+  
+  // 如果识别区半径未启用或无效，允许绘制
+  if (!radius || radius <= 0 || typeof radius !== 'number') {
+    console.warn('识别区半径未正确初始化，允许绘制')
+    return true
   }
+  
+  // 使用Haversine公式计算两点之间的距离（米）
+  const R = 6371000  // 地球半径（米）
+  const dLat = (lat - center[1]) * Math.PI / 180
+  const dLng = (lng - center[0]) * Math.PI / 180
+  const a = 
+    Math.sin(dLat/2) * Math.sin(dLat/2) +
+    Math.cos(center[1] * Math.PI / 180) * Math.cos(lat * Math.PI / 180) * 
+    Math.sin(dLng/2) * Math.sin(dLng/2)
+  const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a))
+  const distance = R * c
+  
+  const isInside = distance <= radius
+  console.log(`点(${lng}, ${lat}) 到中心点(${center[0]}, ${center[1]}) 的距离: ${distance.toFixed(2)}m, 半径: ${radius}m, 是否在圈内: ${isInside}`)
+  
+  return isInside
+}
 
-  if (valid < 2 || !Number.isFinite(minX)) {
-    return null
+/**
+ * 将Cesium Cartesian3坐标转换为经纬度
+ * @param {Object} cartesian - Cesium Cartesian3对象
+ * @param {Object} map - Cesium地图实例
+ * @returns {Object} - 包含lng和lat的对象
+ */
+const cartesianToLngLat = (cartesian, map) => {
+  if (!cartesian || !map) return null
+  
+  try {
+    const ellipsoid = map.scene?.globe?.ellipsoid || Cesium.Ellipsoid.WGS84
+    const cartographic = ellipsoid.cartesianToCartographic(cartesian)
+    if (cartographic) {
+      return {
+        lng: Cesium.Math.toDegrees(cartographic.longitude),
+        lat: Cesium.Math.toDegrees(cartographic.latitude)
+      }
+    }
+  } catch (e) {
+    console.warn('Cartesian3转换经纬度失败:', e)
   }
+  return null
+}
 
-  return { minX, minY, maxX, maxY }
+/**
+ * 判断多边形是否完全在识别区内
+ * @param {Array} positions - 多边形顶点数组，格式为 [[lng, lat, height], ...] 或 Cartesian3数组
+ * @returns {boolean} - 是否完全在识别区内
+ */
+const isPolygonInIdentifyZone = (positions) => {
+  // 如果没有positions数据，返回false（需要至少3个点才能构成多边形）
+  if (!positions || !Array.isArray(positions) || positions.length < 3) {
+    console.warn('positions数据无效:', positions)
+    return true  // 数据无效时允许绘制
+  }
+  
+  console.log('检测多边形顶点数:', positions.length)
+  
+  // 获取地图实例（用于坐标转换）
+  const map = mapStore.getMap(getMapId())
+  
+  // 检查每个顶点是否都在识别区内
+  for (let i = 0; i < positions.length; i++) {
+    const pos = positions[i]
+    let lng, lat
+    
+    // 处理不同的数据格式
+    if (Array.isArray(pos)) {
+      // 格式1: [lng, lat, height] 数组
+      lng = pos[0]
+      lat = pos[1]
+      console.log(`第${i}个顶点(数组格式): (${lng}, ${lat})`)
+    } else if (pos && typeof pos === 'object') {
+      // 格式2: 对象格式
+      if (pos.longitude !== undefined || pos.latitude !== undefined) {
+        // GeoJSON格式
+        lng = pos.longitude
+        lat = pos.latitude
+      } else if (pos.lng !== undefined || pos.lat !== undefined) {
+        // 简化格式
+        lng = pos.lng
+        lat = pos.lat
+      } else if (pos.x !== undefined && pos.y !== undefined && pos.z !== undefined) {
+        // 可能是Cartesian3格式，尝试转换
+        const latLng = cartesianToLngLat(pos, map)
+        if (latLng) {
+          lng = latLng.lng
+          lat = latLng.lat
+          console.log(`第${i}个顶点(Cartesian3转换): (${lng}, ${lat})`)
+        } else {
+          console.warn(`第${i}个顶点Cartesian3转换失败:`, pos)
+          continue
+        }
+      } else {
+        console.warn(`第${i}个顶点格式未知:`, pos)
+        continue
+      }
+    } else {
+      console.warn(`第${i}个顶点格式未知:`, pos)
+      continue
+    }
+    
+    // 检查坐标是否有效
+    if (typeof lng !== 'number' || typeof lat !== 'number' || isNaN(lng) || isNaN(lat)) {
+      console.warn(`第${i}个顶点坐标无效:`, lng, lat)
+      continue
+    }
+    
+    // 检查坐标范围是否合理（经纬度范围检查）
+    if (lng < -180 || lng > 180 || lat < -90 || lat > 90) {
+      console.warn(`第${i}个顶点坐标超出范围: (${lng}, ${lat})，可能是未转换的Cartesian3坐标`)
+      // 尝试当作Cartesian3转换
+      const latLng = cartesianToLngLat({ x: lng, y: lat, z: pos?.z || 0 }, map)
+      if (latLng) {
+        lng = latLng.lng
+        lat = latLng.lat
+        console.log(`转换后坐标: (${lng}, ${lat})`)
+      } else {
+        continue
+      }
+    }
+    
+    if (!isPointInIdentifyZone(lng, lat)) {
+      console.warn(`第${i}个顶点(${lng}, ${lat})不在识别区内`)
+      return false
+    }
+  }
+  return true
+}
+
+/**
+ * 格式化围栏时间戳（用于历史记录显示）
+ * @returns {string} 格式化的时间字符串，格式：YYYY-MM-DD HH:MM:SS
+ */
+const formatFenceTime = () => {
+  const pad = (n) => String(n).padStart(2, '0')
+  const d = new Date()
+  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`
 }
 
 /**
- * 按包围盒裁剪 Cesium 画布并转为 PNG base64
+ * 压缩 base64 缩略图（缩小尺寸 + JPEG 低质量，用于入库）
+ * @param {string} dataUrl
+ * @param {{ maxWidth?: number, quality?: number }} [options]
+ */
+const compressBase64Image = (dataUrl, { maxWidth = 480, quality = 1 } = {}) =>
+  new Promise((resolve) => {
+    if (!dataUrl) {
+      resolve('')
+      return
+    }
+    const img = new Image()
+    img.onload = () => {
+      const scale = img.width > maxWidth ? maxWidth / img.width : 1
+      const w = Math.max(1, Math.round(img.width * scale))
+      const h = Math.max(1, Math.round(img.height * scale))
+      const canvas = document.createElement('canvas')
+      canvas.width = w
+      canvas.height = h
+      const ctx = canvas.getContext('2d')
+      if (!ctx) {
+        resolve(dataUrl)
+        return
+      }
+      ctx.drawImage(img, 0, 0, w, h)
+      try {
+        resolve(canvas.toDataURL('image/jpeg', quality))
+      } catch {
+        resolve(dataUrl)
+      }
+    }
+    img.onerror = () => resolve(dataUrl)
+    img.src = dataUrl.startsWith('data:') ? dataUrl : `data:image/png;base64,${dataUrl}`
+  })
+
+/** 是否围栏样式对象（含 opacity / outlineWidth） */
+const isFenceStyleObject = (obj) =>
+  obj && typeof obj === 'object' && !Array.isArray(obj) && ('opacity' in obj || 'outlineWidth' in obj)
+
+/**
+ * 将截图 base64 写入 dbData 内层样式对象（与 opacity、outlineWidth 同级），而非外层
  */
-function cropCanvasToBase64(map, bbox, padding = 48) {
-  const source = map.scene.canvas
-  const x = Math.max(0, Math.floor(bbox.minX - padding))
-  const y = Math.max(0, Math.floor(bbox.minY - padding))
-  const right = Math.min(source.width, Math.ceil(bbox.maxX + padding))
-  const bottom = Math.min(source.height, Math.ceil(bbox.maxY + padding))
-  const width = Math.max(1, right - x)
-  const height = Math.max(1, bottom - y)
+const embedBase64InDbData = (dbData, thumbnail) => {
+  const base64 = thumbnail ?? ''
 
-  const target = document.createElement('canvas')
-  target.width = width
-  target.height = height
-  const ctx = target.getContext('2d')
-  if (!ctx) return null
+  if (Array.isArray(dbData)) {
+    return dbData.map((item) =>
+      isFenceStyleObject(item) ? { ...item, base64 } : item
+    )
+  }
 
-  ctx.drawImage(source, x, y, width, height, 0, 0, width, height)
-  return target.toDataURL('image/png')
+  if (typeof dbData === 'object' && dbData !== null) {
+    if (isFenceStyleObject(dbData)) {
+      return { ...dbData, base64 }
+    }
+    for (const key of Object.keys(dbData)) {
+      const val = dbData[key]
+      if (isFenceStyleObject(val)) {
+        return { ...dbData, [key]: { ...val, base64 } }
+      }
+    }
+  }
+
+  return dbData
 }
 
 /**
- * 围栏绘制完成后截图：先定位围栏，再裁剪仅包含围栏的区域
- *
- * @param {import('cesium').Viewer} map Cesium Viewer
- * @param {Array<{ lng: number, lat: number, height?: number }>} positions 围栏顶点（drawFence onFinish 的 result.positions）
- * @param {Object} [options]
- * @param {boolean} [options.flyTo=true] 截图前是否飞行定位到围栏
- * @param {number} [options.padding=48] 裁剪边距（像素）
- * @param {number} [options.flyDuration=0.6] 飞行动画时长（秒）
- * @param {boolean} [options.printBase64=true] 是否在控制台打印 base64
- * @returns {Promise<string|null>} PNG data URL（含 data:image/png;base64, 前缀）
+ * 创建防区设置页面的地图操作Hook
+ * 
+ * @param {Object} options - 配置选项
+ * @param {import('vue').Ref<Array>} options.fenceHistoryList - 围栏历史列表（响应式）
+ * @param {import('vue').Reactive<{ fence: boolean, identify: boolean }>} options.zoneEnabled - 防区开关状态（响应式）
+ * @param {number} [options.maxFenceCount=6] - 最大围栏数量限制
+ * 
+ * @returns {Object} 包含地图操作方法和计算属性的对象
  */
-export async function captureFenceScreenshot(map, positions, options = {}) {
-  if (!map?.scene?.canvas) {
-    console.warn('[captureFenceScreenshot] 地图实例无效')
-    return null
+export function useProtectSetMap({ fenceHistoryList, zoneEnabled, maxFenceCount = MAX_FENCE_COUNT }) {
+  /** 最近一次绘制完成、待点击保存的多边形围栏数据 */
+  const pendingPolygonFence = ref(null)
+  /** 最近一次绘制完成、待点击保存的圆形围栏数据 */
+  const pendingCircleFence = ref(null)
+  /**
+   * 是否可以绘制围栏（围栏数量未达到上限）
+   * @type {import('vue').ComputedRef<boolean>}
+   */
+  const canDraw = computed(() => fenceHistoryList.value.length < maxFenceCount)
+
+  /**
+   * 是否可以绘制多边形围栏（电子围栏已开启且数量未达上限）
+   * @type {import('vue').ComputedRef<boolean>}
+   */
+  const canDrawPolygon = computed(
+    () => zoneEnabled.fence && fenceHistoryList.value.length < maxFenceCount
+  )
+
+  /**
+   * 是否可以绘制圆形围栏（电子围栏已开启且数量未达上限）
+   * @type {import('vue').ComputedRef<boolean>}
+   */
+  const canDrawCircle = computed(
+    () => zoneEnabled.fence && fenceHistoryList.value.length < maxFenceCount
+  )
+
+  /**
+   * 多边形绘制按钮的提示标题（根据状态显示不同提示）
+   * @type {import('vue').ComputedRef<string>}
+   */
+  const polygonDrawTitle = computed(() => {
+    if (!zoneEnabled.fence) return MSG.openFenceFirst      // 电子围栏未开启
+    if (fenceHistoryList.value.length >= maxFenceCount) return MSG.fenceListFull // 围栏数量已满
+    return ''  // 可以绘制，无提示
+  })
+
+  /**
+   * 圆形绘制按钮的提示标题（根据状态显示不同提示）
+   * @type {import('vue').ComputedRef<string>}
+   */
+  const circleDrawTitle = computed(() => {
+    if (!zoneEnabled.fence) return MSG.openFenceFirst      // 电子围栏未开启
+    if (fenceHistoryList.value.length >= maxFenceCount) return MSG.fenceListFull // 围栏数量已满
+    return ''  // 可以绘制，无提示
+  })
+
+  /**
+   * 地图加载完成回调函数
+   * 初始化地图时间、指挥所半球区域和地图中心点
+   * 
+   * @param {Object} options - 地图加载完成参数
+   * @param {Object} options.map - Cesium地图实例
+   * @param {Object} options.center - 地图中心点信息（包含lng, lat）
+   */
+  const mapOnLoad = (options) => {
+    const { map, center } = options
+    currentMapId = mapStore.getCurrentMapId() || DEFENSE_ZONE_MAP_ID
+    setBeiJingTime(currentMapId)  // 设置地图时间为北京时间
+    
+    // 调试信息：查看center对象的实际属性
+    console.log('mapOnLoad center:', center)
+    console.log('center属性名:', Object.keys(center))
+    
+    // 处理center可能的不同属性名
+    const centerLng = center.lng || center.longitude || center.x || 0
+    const centerLat = center.lat || center.latitude || center.y || 0
+    
+    // 获取识别区半径配置
+    const commandIdentificationRadius = window.BaseConfig?.commandHemisphereZone?.identificationRadius || 3000
+    
+    // 更新识别区信息（用于后续电子围栏检测）
+    updateIdentifyZoneInfo(centerLng, centerLat, commandIdentificationRadius)
+    
+    console.log('识别区信息已初始化:', identifyZoneInfo)
+    
+    initCommandHemisphereZones({ mapId: currentMapId, lng: centerLng, lat: centerLat }) // 初始化指挥所半球
+    setCesiumCenter({ lng: centerLng, lat: centerLat, map }) // 设置地图中心点
+    
+    loadFences()
+  }
+
+  const loadFences = async () => {
+    try {
+      const response = await listElectronicFence()
+      const data = response?.rows || response || []
+
+      data.forEach((item) => {
+        if (item.isEnable !== 1) return
+        if (!item.pointParam) return
+
+        try {
+          const fenceData = JSON.parse(item.pointParam)
+          const fenceId = fenceData.id || `fence_${item.id}`
+          const color = fenceData.style?.color || '#E81224'
+          const opacity = fenceData.style?.opacity || 0.35
+          const outlineWidth = fenceData.style?.outlineWidth || 2
+          const height = fenceData.height || 2
+
+          if (fenceData.type === 'polygon') {
+            if (!fenceData.positions || fenceData.positions.length < 3) return
+
+            showPolygonFence({
+              id: fenceId,
+              mapId: currentMapId,
+              positions: fenceData.positions,
+              name: item.fenceName,
+              color,
+              opacity,
+              outlineWidth,
+              height,
+            })
+          } else if (fenceData.type === 'circle') {
+            if (!fenceData.center || typeof fenceData.center.lng !== 'number') return
+
+            showCircleFence({
+              id: fenceId,
+              mapId: currentMapId,
+              center: fenceData.center,
+              radius: fenceData.radius,
+              name: item.fenceName,
+              color,
+              opacity,
+              outlineWidth,
+              height,
+            })
+          }
+        } catch {
+          console.warn('解析电子围栏数据失败:', item.fenceName)
+        }
+      })
+    } catch (error) {
+      console.error('加载电子围栏列表失败:', error)
+    }
   }
-  if (!Array.isArray(positions) || positions.length < 3) {
-    console.warn('[captureFenceScreenshot] 围栏顶点不足，无法截图')
-    return null
+
+  /**
+   * 设置识别区可见性
+   * @param {boolean} visible - 是否可见
+   */
+  const setIdentifyZoneVisible = (visible) => {
+    setVisibilityCommandHemisphereZones({ mapId: getMapId(), visible })
   }
 
-  const padding = options.padding ?? 48
-  const printBase64 = options.printBase64 !== false
+  /**
+   * 更新识别区半径
+   * 将公里值转换为米后调用更新方法
+   * 
+   * @param {number|string} kmValue - 半径值（单位：公里）
+   */
+  const updateIdentifyZoneRadius = (kmValue) => {
+    const radius = parseFloat(kmValue)
+    if (!Number.isFinite(radius)) return  // 无效值则不更新
+    const radiusInMeters = radius * 1000
+    updateRadiusCommandHemisphereZones({ mapId: getMapId(), radius: radiusInMeters })
+    
+    // 同步更新识别区信息（用于电子围栏检测）
+    const { center } = identifyZoneInfo
+    updateIdentifyZoneInfo(center[0], center[1], radiusInMeters)
+  }
 
-  if (options.flyTo !== false) {
-    await flyCameraToFence(map, positions, options)
+  /**
+   * 从地图上移除指定围栏
+   * @param {Object} item - 围栏历史记录项
+   */
+  const removeFenceFromMap = (item) => {
+    if (!item?.fenceId) return
+    
+    if (item.type === 'polygon') {
+      destroyPolygonFenceNoLabel(item.fenceId, getMapId())
+    } else if (item.type === 'circle') {
+      destroyCircleFence(item.fenceId, getMapId())
+    }
   }
 
-  await waitScenePostRender(map)
+  /**
+   * 切换围栏的显隐状态
+   * @param {Object} item - 围栏历史记录项
+   * @param {boolean} visible - 是否可见
+   */
+  const toggleFenceVisibility = (item, visible) => {
+    const mapId = getMapId()
+    
+    if (!item?.fenceId || !item.pointParam) return
+
+    try {
+      const fenceData = JSON.parse(item.pointParam)
+      
+      if (fenceData.type === 'polygon') {
+        if (!fenceData.positions || fenceData.positions.length < 3) return
+
+        if (visible) {
+          const fenceId = fenceData.id || `fence_${item.id}`
+          const color = fenceData.style?.color || '#E81224'
+          const opacity = fenceData.style?.opacity || 0.35
+          const outlineWidth = fenceData.style?.outlineWidth || 2
+          const height = fenceData.height || 2
 
-  const bbox = computeFenceScreenBBox(map, positions)
-  if (!bbox) {
-    console.warn('[captureFenceScreenshot] 围栏不在可视区域，截图失败')
-    return null
+          showPolygonFence({
+            id: fenceId,
+            mapId: mapId,
+            positions: fenceData.positions,
+            name: item.name,
+            color,
+            opacity,
+            outlineWidth,
+            height,
+          })
+        } else {
+          const fenceId = fenceData.id || `fence_${item.id}`
+          destroyPolygonFence(fenceId, mapId)
+        }
+      } else if (fenceData.type === 'circle') {
+        if (!fenceData.center || typeof fenceData.center.lng !== 'number') return
+
+        if (visible) {
+          const fenceId = fenceData.id || `fence_${item.id}`
+          const color = fenceData.style?.color || '#E81224'
+          const opacity = fenceData.style?.opacity || 0.35
+          const outlineWidth = fenceData.style?.outlineWidth || 2
+          const height = fenceData.height || 2
+
+          showCircleFence({
+            id: fenceId,
+            mapId: mapId,
+            center: fenceData.center,
+            radius: fenceData.radius,
+            name: item.name,
+            color,
+            opacity,
+            outlineWidth,
+            height,
+          })
+        } else {
+          const fenceId = fenceData.id || `fence_${item.id}`
+          destroyCircleFence(fenceId, mapId)
+        }
+      }
+    } catch (error) {
+      console.error('切换围栏显隐失败:', error)
+    }
   }
 
-  await waitScenePostRender(map)
+  /**
+   * 开始绘制多边形电子围栏
+   * 处理绘制状态检查、创建绘制控制器、绑定回调函数
+   */
+  const drawPolygonWall = () => {
+    // 检查是否可以绘制
+    if (!canDrawPolygon.value) return
+
+    const mapId = getMapId()
+    
+    // 检查地图是否已加载
+    if (!mapStore.getMap(mapId)) {
+      ElMessage.warning(MSG.mapNotReady)
+      return
+    }
+
+    // 检查是否正在绘制中
+    if (polygonDrawController) {
+      ElMessage.info(MSG.polygonDrawingInProgress)
+      return
+    }
+
+    // 如果正在绘制圆形，先取消
+    if (circleDrawController) {
+      circleDrawController.cancel()
+      circleDrawController = null
+    }
 
-  const base64 = cropCanvasToBase64(map, bbox, padding)
-  if (!base64) {
-    console.warn('[captureFenceScreenshot] 裁剪画布失败')
-    return null
+    // 生成唯一的围栏ID和名称
+    const polygonDrawId = `polygon_fence_${Date.now()}`
+    const name = `${MSG.polygonFencePrefix}${fenceHistoryList.value.length + 1}`
+    const fenceColor = BaseConfig.fenceColor || '#E81224'
+
+    // 重置绘制状态
+    polygonDrawingTipShown = false
+
+    // 创建绘制控制器
+    polygonDrawController = drawPolygonFenceNoLabel({
+      mapId,
+      id: polygonDrawId,
+      name,
+      color: fenceColor,
+      
+      /** 绘制完成回调 */
+      onFinish: async (result) => {
+        polygonDrawController = null
+        polygonDrawingTipShown = false
+
+        // 调试信息：查看识别区信息和positions格式
+        console.log('识别区信息:', identifyZoneInfo)
+        console.log('positions:', result?.positions)
+        console.log('positions类型:', Array.isArray(result?.positions))
+        
+        // 如果识别区未启用或未正确初始化，直接跳过检测
+        if (!identifyZoneInfo.center || 
+            identifyZoneInfo.center.length < 2 || 
+            identifyZoneInfo.center[0] === 0 || 
+            identifyZoneInfo.center[1] === 0 ||
+            !identifyZoneInfo.radius || 
+            identifyZoneInfo.radius <= 0) {
+          console.log('识别区未启用或未正确初始化，跳过检测')
+        } else {
+          // 检测电子围栏是否在识别区内
+          if (!isPolygonInIdentifyZone(result?.positions)) {
+            // 销毁已绘制的围栏
+            destroyPolygonFenceNoLabel(polygonDrawId, mapId)
+            ElMessage.warning(MSG.fenceOutsideIdentifyZone)
+            return
+          }
+        }
+
+        const map = mapStore.getMap(mapId)
+        let thumbnail = null
+        if (map && result?.positions?.length >= 3) {
+          await nextTick()
+          await new Promise((resolve) => requestAnimationFrame(() => resolve()))
+          await new Promise((resolve) => requestAnimationFrame(() => resolve()))
+
+          const rawThumbnail = await captureFenceScreenshot(map, result.positions, {
+            printBase64: true,
+            flyTo: false,
+          })
+          if (rawThumbnail) {
+            thumbnail = await compressBase64Image(rawThumbnail)
+          }
+        }
+
+        pendingPolygonFence.value = {
+          polygonDrawId,
+          name,
+          thumbnail,
+          dbData: result?.dbData,
+        }
+
+        ElMessage.success(`\u300C${name}\u300D${MSG.drawDone}`)
+      },
+      
+      /** 绘制过程中回调（显示提示） */
+      onChange: () => {
+        if (!polygonDrawingTipShown) {
+          polygonDrawingTipShown = true
+          ElMessage.info(MSG.polygonDrawingHint)
+        }
+      },
+      
+      /** 取消绘制回调 */
+      onCancel: () => {
+        polygonDrawController = null
+        polygonDrawingTipShown = false
+        ElMessage.info(MSG.polygonDrawCancelled)
+      },
+    })
+
+    // 检查绘制控制器是否创建成功
+    if (!polygonDrawController) {
+      ElMessage.error(MSG.cannotStartPolygonDraw)
+    }
   }
 
-  if (printBase64) {
-    console.log('[围栏截图 base64]', base64)
+  /**
+   * 开始绘制圆形电子围栏
+   * 处理绘制状态检查、创建绘制控制器、绑定回调函数
+   */
+  const drawCircleWall = () => {
+    // 检查是否可以绘制
+    if (!canDrawCircle.value) return
+
+    const mapId = getMapId()
+    
+    // 检查地图是否已加载
+    if (!mapStore.getMap(mapId)) {
+      ElMessage.warning(MSG.mapNotReady)
+      return
+    }
+
+    // 检查是否正在绘制中
+    if (circleDrawController) {
+      ElMessage.info(MSG.circleDrawingInProgress)
+      return
+    }
+
+    // 如果正在绘制多边形，先取消
+    if (polygonDrawController) {
+      polygonDrawController.cancel()
+      polygonDrawController = null
+    }
+
+    // 生成唯一的围栏ID和名称
+    const circleDrawId = `circle_fence_${Date.now()}`
+    const name = `${MSG.circleFencePrefix}${fenceHistoryList.value.length + 1}`
+    const fenceColor = BaseConfig.fenceColor || '#E81224'
+
+    // 重置绘制状态
+    circleDrawingTipShown = false
+
+    // 创建绘制控制器
+    circleDrawController = drawCircleFence({
+      mapId,
+      id: circleDrawId,
+      name,
+      color: fenceColor,
+      
+      /** 绘制完成回调 */
+      onFinish: async (result) => {
+        circleDrawController = null
+        circleDrawingTipShown = false
+
+        // 调试信息：查看识别区信息
+        console.log('识别区信息:', identifyZoneInfo)
+        console.log('circle center:', result?.center)
+        console.log('circle radius:', result?.radius)
+        
+        // 如果识别区未启用或未正确初始化，直接跳过检测
+        if (!identifyZoneInfo.center || 
+            identifyZoneInfo.center.length < 2 || 
+            identifyZoneInfo.center[0] === 0 || 
+            identifyZoneInfo.center[1] === 0 ||
+            !identifyZoneInfo.radius || 
+            identifyZoneInfo.radius <= 0) {
+          console.log('识别区未启用或未正确初始化，跳过检测')
+        } else {
+          // 检测电子围栏圆心是否在识别区内
+          // 圆形围栏的圆心必须在识别区内，且半径不能超过到识别区边界的距离
+          const center = result?.center
+          if (center) {
+            const isCenterInside = isPointInIdentifyZone(center.lng, center.lat)
+            if (!isCenterInside) {
+              // 销毁已绘制的围栏
+              destroyCircleFence(circleDrawId, mapId)
+              ElMessage.warning(MSG.fenceOutsideIdentifyZone)
+              return
+            }
+            
+            // 检查圆上最远点是否在识别区内（圆心到识别区边界的距离 >= 圆半径）
+            const centerDistance = getDistanceToIdentifyZoneCenter(center.lng, center.lat)
+            const maxAllowedRadius = identifyZoneInfo.radius - centerDistance
+            if (result.radius > maxAllowedRadius) {
+              // 销毁已绘制的围栏
+              destroyCircleFence(circleDrawId, mapId)
+              ElMessage.warning(MSG.fenceOutsideIdentifyZone)
+              return
+            }
+          }
+        }
+
+        pendingCircleFence.value = {
+          circleDrawId,
+          name,
+          thumbnail: null,
+          dbData: result?.dbData,
+        }
+
+        ElMessage.success(`\u300C${name}\u300D${MSG.drawDone}`)
+      },
+      
+      /** 绘制过程中回调（显示提示） */
+      onChange: () => {
+        if (!circleDrawingTipShown) {
+          circleDrawingTipShown = true
+          ElMessage.info(MSG.circleDrawingHint)
+        }
+      },
+      
+      /** 取消绘制回调 */
+      onCancel: () => {
+        circleDrawController = null
+        circleDrawingTipShown = false
+        ElMessage.info(MSG.circleDrawCancelled)
+      },
+    })
+
+    // 检查绘制控制器是否创建成功
+    if (!circleDrawController) {
+      ElMessage.error(MSG.cannotStartCircleDraw)
+    }
   }
 
-  return base64
-}
+  /**
+   * 计算点到识别区中心点的距离（米）
+   * @param {number} lng - 点的经度
+   * @param {number} lat - 点的纬度
+   * @returns {number} - 距离（米）
+   */
+  const getDistanceToIdentifyZoneCenter = (lng, lat) => {
+    const { center, radius } = identifyZoneInfo
+    if (!center || center.length < 2) return 0
+    
+    const R = 6371000
+    const dLat = (lat - center[1]) * Math.PI / 180
+    const dLng = (lng - center[0]) * Math.PI / 180
+    const a = 
+      Math.sin(dLat/2) * Math.sin(dLat/2) +
+      Math.cos(center[1] * Math.PI / 180) * Math.cos(lat * Math.PI / 180) * 
+      Math.sin(dLng/2) * Math.sin(dLng/2)
+    const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a))
+    return R * c
+  }
 
-/**
- * 根据 mapId 截图（便于在 onFinish 回调里直接调用）
- */
-export async function captureFenceScreenshotByMapId(mapId, positions, options = {}) {
-  const mapStore = useMapStore()
-  const map = mapStore.getMap(mapId)
-  if (!map) {
-    console.warn('[captureFenceScreenshot] 地图未加载, mapId:', mapId)
-    return null
+  /**
+   * 取消正在进行的绘制（多边形或圆形）
+   */
+  const cancelDraw = () => {
+    if (polygonDrawController?.cancel) {
+      polygonDrawController.cancel()
+      polygonDrawController = null
+      polygonDrawingTipShown = false
+      ElMessage.info(MSG.userCancelled)
+    } else if (circleDrawController?.cancel) {
+      circleDrawController.cancel()
+      circleDrawController = null
+      circleDrawingTipShown = false
+      ElMessage.info(MSG.userCancelled)
+    } else if (pendingPolygonFence.value) {
+      const mapId = getMapId()
+      const polygonDrawId = pendingPolygonFence.value.polygonDrawId
+      if (polygonDrawId) {
+        destroyPolygonFenceNoLabel(polygonDrawId, mapId)
+      }
+      pendingPolygonFence.value = null
+      polygonDrawingTipShown = false
+      ElMessage.info(MSG.userCancelled)
+    } else if (pendingCircleFence.value) {
+      const mapId = getMapId()
+      const circleDrawId = pendingCircleFence.value.circleDrawId
+      if (circleDrawId) {
+        destroyCircleFence(circleDrawId, mapId)
+      }
+      pendingCircleFence.value = null
+      circleDrawingTipShown = false
+      ElMessage.info(MSG.userCancelled)
+    }
+  }
+
+  /**
+   * 保存待提交的多边形围栏：写入历史列表并调用后端接口（由页面「保存」按钮触发）
+   * @param {Function} saveToServer - (payload) => Promise，由页面注入 addElectronicFence 等
+   */
+  const savePolygonFence = async (saveToServer) => {
+    const pending = pendingPolygonFence.value
+    if (!pending) {
+      ElMessage.warning('\u8BF7\u5148\u5B8C\u6210\u591A\u8FB9\u5F62\u56F4\u680F\u7ED8\u5236')
+      return
+    }
+    if (!pending.dbData) {
+      ElMessage.error('\u56F4\u680F\u6570\u636E\u65E0\u6548\uFF0C\u65E0\u6CD5\u4FDD\u5B58')
+      return
+    }
+
+    fenceHistoryList.value.push({
+      id: Date.now(),
+      time: formatFenceTime(),
+      fenceId: pending.polygonDrawId,
+      name: pending.name,
+      type: 'polygon',
+      thumbnail: pending.thumbnail,
+    })
+
+    const pointParamData = embedBase64InDbData(pending.dbData, pending.thumbnail)
+
+    console.log(pointParamData)
+
+    try {
+      const response = await saveToServer({
+        fenceName: pending.name,
+        pointParam: JSON.stringify(pointParamData),
+        isEnable: 1,
+      })
+      if (response?.code === 200) {
+        ElMessage.success('\u7535\u5B50\u56F4\u680F\u4FDD\u5B58\u6210\u529F')
+        pendingPolygonFence.value = null
+      } else {
+        ElMessage.error(response?.msg || '\u7535\u5B50\u56F4\u680F\u4FDD\u5B58\u5931\u8D25')
+      }
+    } catch {
+      ElMessage.error('\u7535\u5B50\u56F4\u680F\u4FDD\u5B58\u5931\u8D25')
+    }
+  }
+
+  /**
+   * 保存待提交的圆形围栏：写入历史列表并调用后端接口（由页面「保存」按钮触发）
+   * @param {Function} saveToServer - (payload) => Promise，由页面注入 addElectronicFence 等
+   */
+  const saveCircleFence = async (saveToServer) => {
+    const pending = pendingCircleFence.value
+    if (!pending) {
+      ElMessage.warning('\u8BF7\u5148\u5B8C\u6210\u5706\u5F62\u56F4\u680F\u7ED8\u5236')
+      return
+    }
+    if (!pending.dbData) {
+      ElMessage.error('\u56F4\u680F\u6570\u636E\u65E0\u6548\uFF0C\u65E0\u6CD5\u4FDD\u5B58')
+      return
+    }
+
+    fenceHistoryList.value.push({
+      id: Date.now(),
+      time: formatFenceTime(),
+      fenceId: pending.circleDrawId,
+      name: pending.name,
+      type: 'circle',
+      thumbnail: pending.thumbnail,
+    })
+
+    const pointParamData = embedBase64InDbData(pending.dbData, pending.thumbnail)
+
+    console.log(pointParamData)
+
+    try {
+      const response = await saveToServer({
+        fenceName: pending.name,
+        pointParam: JSON.stringify(pointParamData),
+        isEnable: 1,
+      })
+      if (response?.code === 200) {
+        ElMessage.success('\u7535\u5B50\u56F4\u680F\u4FDD\u5B58\u6210\u529F')
+        pendingCircleFence.value = null
+      } else {
+        ElMessage.error(response?.msg || '\u7535\u5B50\u56F4\u680F\u4FDD\u5B58\u5931\u8D25')
+      }
+    } catch {
+      ElMessage.error('\u7535\u5B50\u56F4\u680F\u4FDD\u5B58\u5931\u8D25')
+    }
+  }
+
+  /**
+   * 保存围栏（根据类型自动选择保存方法）
+   */
+  const saveFence = async (saveToServer) => {
+    if (pendingPolygonFence.value) {
+      await savePolygonFence(saveToServer)
+    } else if (pendingCircleFence.value) {
+      await saveCircleFence(saveToServer)
+    } else {
+      ElMessage.warning('\u8BF7\u5148\u5B8C\u6210\u56F4\u680F\u7ED8\u5236')
+    }
+  }
+
+  /**
+   * 取消正在进行的多边形绘制（保留旧方法名以保持兼容性）
+   */
+  const cancelPolygonDraw = () => {
+    cancelDraw()
+  }
+
+  /**
+   * 返回暴露给外部使用的方法和属性
+   */
+  return {
+    DEFENSE_ZONE_MAP_ID,      // 地图实例ID常量
+    maxFenceCount,            // 最大围栏数量
+    mapOnLoad,                // 地图加载回调
+    canDraw,                  // 是否可绘制（计算属性）
+    canDrawPolygon,           // 是否可绘制多边形（计算属性）
+    canDrawCircle,            // 是否可绘制圆形（计算属性）
+    polygonDrawTitle,         // 多边形绘制按钮提示（计算属性）
+    circleDrawTitle,          // 圆形绘制按钮提示（计算属性）
+    drawPolygonWall,          // 绘制多边形围栏
+    drawCircleWall,           // 绘制圆形围栏
+    cancelDraw,               // 取消绘制（通用）
+    cancelPolygonDraw,        // 取消绘制（兼容旧接口）
+    pendingPolygonFence,      // 待保存的多边形围栏绘制结果
+    pendingCircleFence,       // 待保存的圆形围栏绘制结果
+    savePolygonFence,         // 保存多边形围栏（历史 + 后端）
+    saveCircleFence,          // 保存圆形围栏（历史 + 后端）
+    saveFence,                // 保存围栏（自动检测类型）
+    removeFenceFromMap,       // 从地图移除围栏
+    toggleFenceVisibility,    // 切换围栏显隐
+    setIdentifyZoneVisible,   // 设置识别区可见性
+    updateIdentifyZoneRadius, // 更新识别区半径
+    captureFenceScreenshot,   // 围栏区域截图（base64）
   }
-  return captureFenceScreenshot(map, positions, options)
 }

package/package.json

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