基于腾讯地图实现电子围栏绘制与校验

需求背景：在安全巡检系统中，为巡检人员配置"电子围栏"，当人员在围栏内（或异常停留超时）触发告警。业务需要一个可配置、可编辑、可校验的围栏编辑器，支持多边形/矩形绘制、相交检测、搜索定位、缩略图生成上传和启停状态设置。

1. 组件背景与业务场景

• 业务目标：为巡检系统配置"电子围栏"，限定巡检活动区域，配合异常停留时限与启停状态形成完整的策略。
• 使用人群：业务管理员/调度人员；交互上要求"易绘制、可编辑、易清空、可搜索定位"。
• 数据形态：围栏区域以坐标序列存储（多边形/矩形路径），序列化为 JSON 持久化到后端。
• 辅助要素：提交前需校验围栏是否相交，生成围栏缩略图用于列表/详情展示。

界面入口为对话框模式（Dialog），包含基础表单与地图绘制区：

• 围栏区域名称、异常停留时限（分钟）、启停状态；
• 地图区域提供绘制/编辑/删除/一键删除、形状切换（多边形/矩形）、地点搜索。

---

2. 核心功能点与交互流程拆解

• 模式切换：绘制模式（DRAW）/编辑模式（INTERACT）/删除单个/一键删除全部。
• 工具切换：多边形与矩形两类覆盖物的快速切换。
• 搜索定位：联想输入+节流调用，点击候选项在地图上定位并弹出信息窗。
• 坐标收集：监听绘制与编辑完成事件，实时收集 polygon/rectangle 的路径点，序列化到表单字段 fenceArea。
• 相交检测：提交前对所有区域两两进行相交判断，避免配置出重叠区域。
• 缩略图生成：使用 Canvas 将围栏几何映射到可视缩略图，上传并记录返回的 URL。
• 资源清理：组件卸载时销毁编辑器与地图实例，释放内存。

基本链路如下：

1. 打开弹窗 → 根据类型（新建/编辑/查看）设置标题与编辑模式
2. 初始化地图与编辑器 → 注入已有几何 → 绑定 draw/adjust 完成事件
3. 绘制/编辑过程中更新 fenceArea → 搜索定位辅助操作
4. 提交：停止编辑器 → 收集/校验坐标 → 生成并上传缩略图 → 调用创建/更新接口

---

3. 技术选型与实现要点

3.1 地图与几何编辑：TMap GeometryEditor

• 地图基座：TMap.Map
• 覆盖物：TMap.MultiPolygon（多边形） 与 TMap.MultiRectangle（矩形）
• 编辑器：TMap.tools.GeometryEditor，支持 actionMode（激活模式）、activeOverlay（激活覆盖物）、snappable/selectable 等配置
• 事件监听：draw_complete（绘制完成）、adjust_complete（编辑完成）

示例代码initMap：

const initMap = () => {
  map = new TMap.Map("map-container", {
    zoom: 16,
    center: new TMap.LatLng(latitude.value, longitude.value),
    showControl: false,
  });

  // 已有几何解析与注入（编辑/查看）
  const polygonGeometries: any[] = [];
  if ((formType.value === "update" || formType.value === "view") && formData.value.fenceArea) {
    const geometries = JSON.parse(formData.value.fenceArea);
    geometries.forEach((geo) => {
      polygonGeometries.push({
        id: `polygon_${polygonGeometries.length}`,
        paths: geo.paths.map((p) => new TMap.LatLng(p.lat, p.lng)),
      });
    });
  }

  // 多边形与矩形覆盖物
  polygon = new TMap.MultiPolygon({ map, geometries: polygonGeometries });
  rectangle = new TMap.MultiRectangle({ map, geometries: [] });

  // 编辑器绑定
  editor = new TMap.tools.GeometryEditor({
    map,
    overlayList: [
      { overlay: polygon, id: "polygon", styles: { highlight: new TMap.PolygonStyle({ color: "rgba(255,255,0,.6)" }) }, selectedStyleId: "highlight" },
      { overlay: rectangle, id: "rectangle", styles: { highlight: new TMap.PolygonStyle({ color: "rgba(255,255,0,.6)" }) }, selectedStyleId: "highlight" },
    ],
    actionMode: "", // 由外部模式切换驱动
    activeOverlayId: activeType.value,
    snappable: !isViewMode.value,
    selectable: !isViewMode.value,
  });

  // 绘制/编辑完成后更新数据
  editor.on("draw_complete", updateFenceArea);
  editor.on("adjust_complete", updateFenceArea);
};

模式切换实现（绘制/编辑/删除/一键删除）：

const handleModeChange = (id: "draw"|"edit"|"delete"|"deletes") => {
  if (activeMode.value === id && id !== "delete" && id !== "deletes") return;

  switch (id) {
    case "draw":
      editor.stop();
      editor.setActionMode(TMap.tools.constants.EDITOR_ACTION.DRAW);
      activeMode.value = id;
      break;
    case "edit":
      editor.setActionMode(TMap.tools.constants.EDITOR_ACTION.INTERACT);
      activeMode.value = id;
      break;
    case "delete":
      editor.delete();
      updateFenceArea();
      break;
    case "deletes":
      // 临时切换到编辑模式，批量选择并删除所有几何
      const wasInDrawMode = activeMode.value === "draw";
      if (wasInDrawMode) {
        activeMode.value = "edit";
        editor.setActionMode(TMap.tools.constants.EDITOR_ACTION.INTERACT);
      }
      editor.select([]);
      const polygonIds = polygon?.geometries?.map((g) => g.id) || [];
      const rectIds = rectangle?.geometries?.map((g) => g.id) || [];
      if (polygonIds.length) { editor.setActiveOverlay("polygon"); editor.select(polygonIds); editor.delete(); }
      if (rectIds.length) { editor.setActiveOverlay("rectangle"); editor.select(rectIds); editor.delete(); }
      updateFenceArea();
      if (wasInDrawMode) {
        activeMode.value = "draw";
        editor.setActionMode(TMap.tools.constants.EDITOR_ACTION.DRAW);
      }
      break;
  }
};

工具切换（多边形/矩形）仅需切换 activeOverlayId：

const handleToolChange = (id: "polygon"|"rectangle") => {
  if (activeType.value === id) return;
  activeType.value = id;
  editor.setActiveOverlay(id);
};

3.2 坐标收集与相交检测

• 目标：统一收集 polygon/rectangle 的路径坐标，序列化为字符串到 fenceArea

• 相交检测：两两比较所有多边形路径，借助 TMap.geometry.computePolygonIntersection 判断是否相交，若相交阻断提交

const updateFenceArea = () => {
  const geometries: any[] = [];
  const allPolygons: any[] = [];

  if (polygon?.geometries?.length) {
    polygon.geometries.forEach((geo) => {
      geometries.push({ type: "polygon", paths: geo.paths });
      allPolygons.push(geo.paths);
    });
  }
  if (rectangle?.geometries?.length) {
    rectangle.geometries.forEach((geo) => {
      geometries.push({ type: "rectangle", paths: geo.paths });
      allPolygons.push(geo.paths);
    });
  }

  // 多边形两两相交检测
  if (allPolygons.length > 1) {
    let hasIntersection = false;
    for (let i = 0; i < allPolygons.length - 1; i++) {
      for (let j = i + 1; j < allPolygons.length; j++) {
        const inter = TMap.geometry.computePolygonIntersection(
          allPolygons[i].map((p) => new TMap.LatLng(p.lat, p.lng)),
          allPolygons[j].map((p) => new TMap.LatLng(p.lat, p.lng))
        );
        if (inter && inter.length > 0) { hasIntersection = true; break; }
      }
      if (hasIntersection) break;
    }
    if (hasIntersection) {
      message.error("围栏区域不能相交或重叠，请调整区域位置！");
      return false;
    }
  }

  formData.value.fenceArea = geometries.length ? JSON.stringify(geometries) : undefined;
  return true;
};

3.3 缩略图绘制与上传

• 动机：列表/详情等界面快速预览围栏形状，减少进入地图的成本

• 方法：将所有几何的经纬度投影到 canvas 坐标系；取坐标极值计算缩放与居中，绘制填充+描边

const drawFenceThumbnail = async () => {
  if (!formData.value.fenceArea) return;

  const canvas = document.createElement("canvas");
  canvas.width = 384; canvas.height = 216;
  const ctx = canvas.getContext("2d"); if (!ctx) return;

  // 背景图可替换为项目默认底图
  const bg = await new Promise<HTMLImageElement>((res, rej) => {
    const img = new Image();
    img.crossOrigin = "anonymous";
    img.onload = () => res(img);
    img.onerror = rej;
    img.src = "https://via.placeholder.com/384x216.png?text=BG";
  });
  ctx.drawImage(bg, 0, 0, canvas.width, canvas.height);

  const geometries = JSON.parse(formData.value.fenceArea);
  let minLat=Infinity,maxLat=-Infinity,minLng=Infinity,maxLng=-Infinity;
  geometries.forEach((g) => g.paths.forEach((p:any) => {
    const lat = p.lat || p.latitude; const lng = p.lng || p.longitude;
    minLat = Math.min(minLat, lat); maxLat = Math.max(maxLat, lat);
    minLng = Math.min(minLng, lng); maxLng = Math.max(maxLng, lng);
  }));

  const padding = 10;
  const contentW = canvas.width - padding * 2;
  const contentH = canvas.height - padding * 2;
  const latRange = maxLat - minLat; const lngRange = maxLng - minLng;
  let scale = Math.min(contentW / lngRange, contentH / latRange) * 0.9; // 安全边距
  const centerLng = (minLng + maxLng) / 2; const centerLat = (minLat + maxLat) / 2;
  const cx = canvas.width / 2; const cy = canvas.height / 2;

  ctx.strokeStyle = "rgba(252,193,31,.70)";
  ctx.lineWidth = 2; ctx.fillStyle = "rgba(219,132,38,.40)";

  geometries.forEach((g:any) => {
    ctx.beginPath();
    g.paths.forEach((p:any, idx:number) => {
      const x = cx + ( (p.lng||p.longitude) - centerLng ) * scale;
      const y = cy - ( (p.lat||p.latitude) - centerLat ) * scale;
      idx === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y);
    });
    ctx.closePath(); ctx.fill(); ctx.stroke();
  });

  const blob = await new Promise<Blob|null>((res) => canvas.toBlob(res, "image/png"));
  if (!blob) return;
  const file = new File([blob], `fence-thumbnail-${Date.now()}.png`, { type: "image/png" });
  const uploadResult = await httpRequest({ file: file as any, action: uploadUrl, method: "POST", filename: "file", data: {} });
  if (uploadResult?.data) formData.value.thumbnail = uploadResult.data;
};

（背景图为示例图片）

3.4 搜索联想与定位

• 关键点：节流调用、错误码处理（如频率限制）、定位后居中并显示信息窗

const getSuggestions = throttle(() => {
  if (!address.value) { suggestionList.value = []; return; }
  suggest.getSuggestions({ keyword: address.value, location: map.getCenter() })
    .then((result) => { suggestionList.value = result.data; })
    .catch((error) => {
      if (error.status == 120) message.error("搜索过于频繁，请稍后再试");
      else message.error("搜索失败，" + error.message + "，请联系系统管理员");
    });
}, 500);

function setSuggestion(item) {
  suggestionList.value = [];
  infoWindowList.forEach((w) => w.close()); infoWindowList.length = 0;
  address.value = item.title;
  const w = new TMap.InfoWindow({ map, position: item.location, content: `<h3>${item.title}</h3><p>地址：${item.address}</p>` });
  infoWindowList.push(w);
  map.setCenter(item.location);
}

3.5 打开弹窗、提交与资源清理

• 打开弹窗时设置标题与编辑模式：

const open = async (type: "create"|"update"|"view", id?: number) => {
  dialogVisible.value = true; formType.value = type; resetForm();
  if (id) { formLoading.value = true; try { formData.value = await PatrolEfenceApi.getPatrolEfence(id); } finally { formLoading.value = false; } }
  nextTick(() => {
    initMap();
    if (type === "update") { dialogTitle.value = "编辑围栏区域"; activeMode.value = "edit"; editor.setActionMode(TMap.tools.constants.EDITOR_ACTION.INTERACT); }
    else if (type === "create") { dialogTitle.value = "新建围栏区域"; activeMode.value = "draw"; editor.setActionMode(TMap.tools.constants.EDITOR_ACTION.DRAW); }
    else { dialogTitle.value = "查看围栏区域"; }
  });
};

• 提交时停止编辑、校验相交、生成缩略图并调用接口：

const submitForm = async () => {
  editor.stop();
  const isValid = updateFenceArea();
  if (!isValid) return;

  await formRef.value.validate();
  formLoading.value = true;
  await drawFenceThumbnail();

  try {
    const data = formData.value as unknown as PatrolEfenceVO;
    if (formType.value === "create") { await PatrolEfenceApi.createPatrolEfence(data); message.success(t("common.createSuccess")); }
    else { await PatrolEfenceApi.updatePatrolEfence(data); message.success(t("common.updateSuccess")); }
    dialogVisible.value = false; emit("success");
  } finally { formLoading.value = false; }
};

• 资源清理：unmounted 时销毁 editor/map，避免内存泄漏

const cleanupMap = () => {
  if (editor) { editor.destroy(); editor = null; }
  if (map) { map.destroy(); map = null; }
};
onUnmounted(cleanupMap);

---

4. 踩坑记录与性能优化经验

• 编辑器状态一致性

  • 删除"全部"前需临时切到编辑模式以支持批量选择，否则在绘制模式下 delete 不生效。
  • 删除后务必调用 updateFenceArea 刷新序列化数据，避免表单残留旧坐标。

• 绘制结束与提交时机

  • 提交前调用 editor.stop()，确保几何最新状态已落在 overlay 上，避免"拖动中提交"的状态差异。

• 缩略图映射边界

  • 经纬度与屏幕坐标是不同空间，先算极值与中心，再缩放至画布；额外乘以 0.9 "安全边距"系数，避免贴边截断。
  • y 轴方向需反转（屏幕坐标向下为正，纬度向上为正）。

• 搜索联想与调用频率

  • 使用 lodash-es throttle（500ms）降低接口压力。
  • 明确错误码（如 120 过频），给出清晰提示；无结果时清空建议列表。

• 只读模式开关

  • isViewMode 下将编辑器 snappable/selectable 关闭，减少误触，并减少内部命中测试消耗。

• 资源释放

  • 组件卸载时销毁 editor/map，防止多次进入弹窗导致堆叠与内存泄漏。

---

5. 可复用的最佳实践总结

• 绘制/编辑器模式解耦：用 activeMode/activeType 显式切换 actionMode 与 activeOverlay，状态一目了然。
• 数据唯一真源：任何绘制/编辑完成后立刻同步到 formData.fenceArea，避免 UI 与数据不同步。
• 提交防御：提交前停止编辑器 + 相交校验 + 表单校验，条条把关。
• 缩略图抽象：将"坐标→画布"的映射封装为通用函数，缩略图生成可用于列表/详情/导出。
• 异步节流与错误处理：联想搜索加节流、提示错误码；降低接口风险提升体验。
• 组件内清理：onUnmounted 清理地图与编辑器资源，确保弹窗多次打开稳定。
• 只读模式优化：查看模式下关闭可交互能力，既安全又省资源。

---