huweili-cesium 1.2.37 → 1.2.38

package/js/captureFenceScreenshot.js

@@ -1,1041 +1,191 @@
 /**
- * 防区设置页面 - 地图操作工具函数
- * 
- * 提供防区设置页面所需的地图相关功能，包括：
- * 1. 指挥所半球区域的初始化和控制
- * 2. 多边形电子围栏的绘制和管理
- * 3. 围栏历史记录的管理
- * 
- * @author 
- * @version 1.0.0
+ * 电子围栏绘制完成后，按围栏在屏幕上的范围裁剪地图截图并输出 base64
  */
-
-// 导入依赖
 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'
-
-/**
- * UI 提示文字常量（使用 Unicode 转义避免 Windows 编辑器编码问题）
- */
-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
- * 优先从全局配置获取，若未配置则使用默认值
- */
-export const DEFENSE_ZONE_MAP_ID =
-  window.MapInstanceIds?.DEFENSE_ZONE_SETTING || 'defense-zone-setting-map'
-
-/**
- * 最大围栏数量限制
- */
-const MAX_FENCE_COUNT = 6
+import { useMapStore } from './stores/mapStore.js'
 
-/**
- * 获取地图状态管理实例
- */
-const mapStore = useMapStore()
-
-/**
- * 获取基础地图配置工具函数
- */
-const { setBeiJingTime, setCesiumCenter } = basicConfig()
-
-/**
- * 获取多边形围栏绘制工具函数
- */
-const { drawPolygonFenceNoLabel, destroyPolygonFenceNoLabel, destroyPolygonFence, showPolygonFence, drawCircleFence, destroyCircleFence, showCircleFence } = drawFenceNew()
-
-/**
- * 当前地图实例ID（运行时动态赋值）
- */
-let currentMapId = ''
+const scratchCartesian2 = new Cesium.Cartesian2()
 
 /**
- * 多边形绘制控制器（用于取消正在进行的绘制操作）
- * @type {{ cancel?: () => void } | null}
+ * 将围栏顶点经纬度转为 Cartesian3
+ * @param {Array<{ lng: number, lat: number, height?: number }>} positions
  */
-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        // 半径（米）
-}
-
-/**
- * 获取当前地图ID
- * @returns {string} 地图实例ID
- */
-const getMapId = () => currentMapId || DEFENSE_ZONE_MAP_ID
-
-/**
- * 更新识别区信息
- * @param {number} lng - 中心点经度
- * @param {number} lat - 中心点纬度
- * @param {number} radius - 半径（米）
- */
-const updateIdentifyZoneInfo = (lng, lat, radius) => {
-  identifyZoneInfo.center = [lng, lat]
-  identifyZoneInfo.radius = radius
-}
-
-/**
- * 判断点是否在识别区内
- * @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
+function toCartesians(positions) {
+  return positions.map((p) =>
+    Cesium.Cartesian3.fromDegrees(Number(p.lng), Number(p.lat), Number(p.height) || 0)
+  )
 }
 
 /**
- * 将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)
-      }
+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
     }
-  } catch (e) {
-    console.warn('Cartesian3转换经纬度失败:', e)
-  }
-  return null
-}
 
-/**
- * 判断多边形是否完全在识别区内
- * @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
-}
+    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,
+    })
 
-/**
- * 格式化围栏时间戳（用于历史记录显示）
- * @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())}`
+    setTimeout(done, duration * 1000 + 400)
+  })
 }
 
 /**
- * 压缩 base64 缩略图（缩小尺寸 + JPEG 低质量，用于入库）
- * @param {string} dataUrl
- * @param {{ maxWidth?: number, quality?: number }} [options]
+ * 等待地图完成一次真实绘制（postRender 后再截图，避免画布为空）
  */
-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}`
+function waitScenePostRender(map) {
+  return new Promise((resolve) => {
+    const remover = map.scene.postRender.addEventListener(() => {
+      remover()
+      resolve()
+    })
+    map.scene.requestRender()
   })
-
-/** 是否围栏样式对象（含 opacity / outlineWidth） */
-const isFenceStyleObject = (obj) =>
-  obj && typeof obj === 'object' && !Array.isArray(obj) && ('opacity' in obj || 'outlineWidth' in obj)
+}
 
 /**
- * 将截图 base64 写入 dbData 内层样式对象（与 opacity、outlineWidth 同级），而非外层
+ * 计算围栏顶点在 canvas 绘图缓冲中的包围盒（像素）
  */
-const embedBase64InDbData = (dbData, thumbnail) => {
-  const base64 = thumbnail ?? ''
+function computeFenceScreenBBox(map, positions) {
+  const scene = map.scene
+  let minX = Infinity
+  let minY = Infinity
+  let maxX = -Infinity
+  let maxY = -Infinity
+  let valid = 0
 
-  if (Array.isArray(dbData)) {
-    return dbData.map((item) =>
-      isFenceStyleObject(item) ? { ...item, base64 } : item
+  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
+
+    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++
   }
 
-  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 } }
-      }
-    }
+  if (valid < 2 || !Number.isFinite(minX)) {
+    return null
   }
 
-  return dbData
+  return { minX, minY, maxX, maxY }
 }
 
 /**
- * 创建防区设置页面的地图操作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} 包含地图操作方法和计算属性的对象
+ * 按包围盒裁剪 Cesium 画布并转为 PNG base64
  */
-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 || []
+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)
 
-      data.forEach((item) => {
-        if (item.isEnable !== 1) return
-        if (!item.pointParam) return
+  const target = document.createElement('canvas')
+  target.width = width
+  target.height = height
+  const ctx = target.getContext('2d')
+  if (!ctx) return null
 
-        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
+  ctx.drawImage(source, x, y, width, height, 0, 0, width, height)
+  return target.toDataURL('image/png')
+}
 
-            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)
-    }
+/**
+ * 围栏绘制完成后截图：先定位围栏，再裁剪仅包含围栏的区域
+ *
+ * @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=false] 截图前是否飞行定位到围栏
+ * @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, 前缀）
+ */
+export async function captureFenceScreenshot(map, positions, options = {}) {
+  if (!map?.scene?.canvas) {
+    console.warn('[captureFenceScreenshot] 地图实例无效')
+    return null
   }
-
-  /**
-   * 设置识别区可见性
-   * @param {boolean} visible - 是否可见
-   */
-  const setIdentifyZoneVisible = (visible) => {
-    setVisibilityCommandHemisphereZones({ mapId: getMapId(), visible })
+  if (!Array.isArray(positions) || positions.length < 3) {
+    console.warn('[captureFenceScreenshot] 围栏顶点不足，无法截图')
+    return null
   }
 
-  /**
-   * 更新识别区半径
-   * 将公里值转换为米后调用更新方法
-   * 
-   * @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)
-  }
+  const padding = options.padding ?? 48
+  const printBase64 = options.printBase64 !== false
 
-  /**
-   * 从地图上移除指定围栏
-   * @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())
-    }
+  if (options.flyTo === true) {
+    await flyCameraToFence(map, positions, options)
   }
 
-  /**
-   * 切换围栏的显隐状态
-   * @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
+  await waitScenePostRender(map)
 
-          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)
-    }
+  const bbox = computeFenceScreenBBox(map, positions)
+  if (!bbox) {
+    console.warn('[captureFenceScreenshot] 围栏不在可视区域，截图失败')
+    return null
   }
 
-  /**
-   * 开始绘制多边形电子围栏
-   * 处理绘制状态检查、创建绘制控制器、绑定回调函数
-   */
-  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
-    }
+  await waitScenePostRender(map)
 
-    // 生成唯一的围栏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)
-    }
+  const base64 = cropCanvasToBase64(map, bbox, padding)
+  if (!base64) {
+    console.warn('[captureFenceScreenshot] 裁剪画布失败')
+    return null
   }
 
-  /**
-   * 开始绘制圆形电子围栏
-   * 处理绘制状态检查、创建绘制控制器、绑定回调函数
-   */
-  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)
-    }
-  }
-
-  /**
-   * 计算点到识别区中心点的距离（米）
-   * @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
-  }
-
-  /**
-   * 取消正在进行的绘制（多边形或圆形）
-   */
-  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')
-    }
+  if (printBase64) {
+    console.log('[围栏截图 base64]', base64)
   }
 
-  /**
-   * 保存待提交的圆形围栏：写入历史列表并调用后端接口（由页面「保存」按钮触发）
-   * @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 base64
+}
 
-  /**
-   * 返回暴露给外部使用的方法和属性
-   */
-  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）
+/**
+ * 根据 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
   }
+  return captureFenceScreenshot(map, positions, options)
 }

package/package.json

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