# 前端面试题：养老场景电子围栏 — 绘制 + 越界检测 + 声光报警

## 题目描述

在 Vue 3 + 高德地图的微前端子应用中，实现一个**养老院/社区电子围栏**系统：

```
┌──────────────────────────────────────────────┐
│              sub-app-header                  │
├──────────────────────────────────────────────┤
│  🚨 电子围栏报警！（越界时全屏覆盖）             │
│  ✅ 老人在安全区域内  （状态标签）               │
│                                              │
│       🗺️ 高德地图                             │
│   [绿色多边形围栏]  +  [👴 可拖拽老人]          │
│                                              │
├──────────────────────────────────────────────┤
│ 🗺️ 电子围栏  [🔷绘制围栏][⭕圆形围栏][🗑️清除]  │
│ 🎯 绘制提示条（顶点计数 + 闭合提示）             │
├──────────────────────────────────────────────┤
│ 👴 老人控制  [➕添加][↑←→↓方向键][🗑️移除]      │
├──────────────────────────────────────────────┤
│ 📋 报警记录（右侧浮层）                         │
└──────────────────────────────────────────────┘
```

**核心要求：**

1. 支持**多边形**和**圆形**两种围栏绘制
2. 老人标记可拖拽 + 方向键移动，每次移动**即时检测**越界
3. 越界时触发**声光报警**：围栏变红、全屏浮层、蜂鸣音、报警记录
4. 老人回到围栏内**自动解除**报警
5. 组件卸载时**完整清理**所有地图覆盖物和事件监听

---

## 架构设计

### 文件分层

```
microapp-vue3/src/
├── composables/
│   ├── useAmap.ts          ← 地图实例管理（单例加载 JSAPI、生命周期）
│   └── useGeofence.ts      ← 电子围栏核心逻辑（围栏、标记、检测、报警）
├── views/
│   └── MapView.vue         ← 视图层（布局、按钮、报警 UI）
├── config/amap.ts          ← 密钥、版本、插件列表
└── vite-env.d.ts           ← AMap 类型声明（Polygon/Circle/Marker/GeometryUtil...）
```

**关键设计决策：逻辑与视图分离。** `useGeofence` composable 封装所有地图操作，`MapView.vue` 只负责 UI 渲染和事件绑定。好处：

- 围栏逻辑可在其他页面复用（如多围栏管理页）
- 单元测试只需测 composable，无需挂载 Vue 组件
- 视图层更换 UI 框架（如 Element Plus 面板）不影响核心逻辑

---

## 核心技术点拆解

### 1. 围栏绘制 — 交互设计与踩坑

#### 多边形绘制流程

```
点击「🔷 绘制围栏」
  → map.setStatus({ doubleClickZoom: false })   ← 关键！禁用双击缩放
  → 注册 map.on('click', onClick)
  → 光标变 crosshair

每次单击：
  ├─ 地理距离 < 30m 且 已有点 ≥ 3？ → 闭环完成 ✅（点击首顶点）
  ├─ 否则 → 添加顶点
  │    ├─ new AMap.Marker（编号圆点）
  │    ├─ new AMap.Polyline（虚线预览）
  │    └─ 点数 ≥ 3？→ 销毁首顶点 → 重建为红色脉冲高亮标记
  └─ 右键 → cancelDraw()

闭环（三种方式）：
  ├─ 点击红色脉冲的首顶点（Haversine < 30m）
  ├─ 点击「✅ 闭合围栏（N点）」按钮
  └─ 创建 AMap.Polygon → 清理绘制中间状态 → 恢复 doubleClickZoom
```

#### 圆形绘制流程

```
点击「⭕ 圆形围栏」
  → 第 1 次点击：确定圆心（红色标记）
      → map.on('mousemove')：动态预览圆形（Haversine 实时计算半径）
  → 第 2 次点击：确定半径
      → 清理预览 Circle → 创建正式 Circle 围栏
  → 右键：取消
```

#### ⚠️ 踩坑记录（面试中最有区分度）

| 踩坑 | 现象 | 根因 | 修复 |
|------|------|------|------|
| **双击闭合** | 双击后地图缩放 + 多了 2 个废顶点 | AMap 默认 `doubleClickZoom: true` 拦截双击；双击 = click+click+dblclick | `map.setStatus({ doubleClickZoom: false })` + 改用点击首顶点闭合 |
| **`lngLatToContainer({lng,lat})`** | 第 4 次点击报 `Pixel(NaN, NaN)` | AMap v2 不接受普通对象，只接受 `[lng,lat]` 或 `LngLat` 实例 | 用 **Haversine 地理距离**替换像素距离判断，不再调用此方法 |
| **`marker.setContent()`** | 更新标记内容后内部状态损坏 → NaN | AMap v2 的 `setContent` 触发重新布局，新旧内容尺寸不同时偏移计算异常 | 改为 **destroy + new Marker** 重建，确保内部状态干净 |
| **`e.pixel` 不可靠** | 偶发 NaN | 某些事件回调中 `e.pixel` 可能未被填充 | 一律使用 `e.lnglat` + Haversine，不依赖像素坐标 |
| **scoped CSS 无效** | 自定义 Marker 样式不生效 | AMap 注入的 DOM 不带 Vue 的 `data-v-xxx` 属性 | 新增**非 scoped** 的 `<style>` 块，用全局 class 选择器 |

---

### 2. 老人标记管理

```ts
// 创建：HTML content + draggable + dragend 自动检测
const marker = new AMap.Marker({
  position,
  content: '<div class="geofence-person-marker">👴</div>',  // ← CSS class，非 inline
  offset: new AMap.Pixel(-17, -17),   // 34×34 居中
  draggable: true,                    // 允许拖拽
  zIndex: 200,                        // 高于围栏(100)和顶点(120)
})

marker.on('dragend', () => {
  // 每次拖拽结束 → 更新位置 → 立即检测越界
  const pos = marker.getPosition()
  personPosition.value = [pos.lng, pos.lat]
  checkBoundary()
})
```

**两种移动方式：**

| 方式 | 实现 | 步长 | 适用场景 |
|------|------|------|----------|
| 拖拽 | `draggable: true` + `dragend` 事件 | 任意 | 手动测试、演示 |
| 方向键 | `movePerson(direction)` ± 0.0005° | ~30-50m | 精确步进测试 |

**为什么步长用 0.0005° 而非固定米数？** 经纬度步长简单可靠，不依赖地图投影。对于养老场景的社区围栏（通常 100-500m 范围），像素级精度足够。

---

### 3. 越界检测 — 双算法兜底

```ts
function checkBoundary(): void {
  const pp = personPosition.value
  if (!pp || !fenceOverlay.value) return

  let inside: boolean

  if (fenceType.value === 'circle') {
    // 圆形：AMap 内置 contains() 方法
    inside = (fenceOverlay.value as AMap.Circle).contains(pp)
  } else {
    // 多边形：优先 AMap.GeometryUtil，兜底射线法
    try {
      inside = AMap.GeometryUtil.isPointInRing(
        { lng: pp[0], lat: pp[1] },
        fenceVertices.value
      )
    } catch {
      inside = isPointInPolygon(pp, fenceVertices.value)  // 纯 JS 兜底
    }
  }

  // 状态变迁检测：只在"进入→出去"时报警，"出去→进入"时解除
  const wasInside = isInside.value
  isInside.value = inside

  if (!inside && wasInside) triggerAlarm(pp)    // 刚刚越界
  if (inside && !wasInside) resetAlarm()         // 刚刚回归
}
```

**为什么需要兜底？** `AMap.GeometryUtil` 在某些加载顺序下可能未就绪（JSAPI 异步加载）。射线法作为纯数学算法始终可用：

```
射线法（Ray Casting）：从目标点向右发射一条水平线
  → 统计与多边形各边的交点数
  → 奇数 = 内部，偶数 = 外部
```

**状态变迁检测的设计意图：** 不直接用 `if (!inside) alert()`，而是追踪 `wasInside → isInside` 的变化。这样：
- 持续在围栏外 → 不重复报警
- 出去再进来再出去 → 每次跨越边界都报警（累计次数 + 历史记录）

---

### 4. 报警系统 — 五通道并行的设计模式

越界时**同时触发 5 个通道**，每个通道独立可关闭：

```
triggerAlarm()
  ├─ 通道 1：视觉-围栏
  │    updateFenceStyle(true)
  │    绿色实线 → 红色虚线（fillColor/strokeColor 切换）
  │
  ├─ 通道 2：视觉-全屏浮层
  │    alarmActive = true → v-if 渲染
  │    全屏红色脉冲背景 + 震动弹窗 + 脉冲图标
  │    点击任意处 → dismissAlarm()
  │
  ├─ 通道 3：视觉-状态标签
  │    fence-status--safe → fence-status--alarm
  │    "✅ 安全" → "🚨 已越界！"
  │
  ├─ 通道 4：听觉-蜂鸣
  │    startAlarmSound()
  │    Web Audio API → OscillatorNode 方波 880Hz
  │    每 800ms 蜂鸣一次（setInterval）
  │    0.3 秒 duration + exponentialRampToValueAtTime 淡出
  │
  └─ 通道 5：记录-历史
       alarmHistory.push({ time, position })
       右侧浮层实时展示
```

**`updateFenceStyle` 的兼容处理：**

```ts
// AMap 不同版本可能没有 setOptions，兜底用 Object.assign
poly.setOptions?.(style) || Object.assign(poly as any, style)
```

---

### 5. 响应式设计 — `shallowRef` 的正确用法

```ts
// ✅ 正确：shallowRef — 只在引用替换时触发更新
const fenceOverlay = shallowRef<AMap.Polygon | AMap.Circle | null>(null)
const personMarker = shallowRef<AMap.Marker | null>(null)

// ❌ 错误：ref — 会深度追踪 AMap 实例的数千个内部属性
// const fenceOverlay = ref<AMap.Polygon | null>(null)
// → setCenter/setZoom 等操作触发深度 diff → 性能灾难
```

| 存储方式 | 适用场景 | 代价 |
|----------|----------|------|
| `shallowRef` | 地图实例、覆盖物（内部状态由 AMap 自行管理） | 无性能损耗 |
| `ref` | 简单值（坐标数组、布尔、计数） | 需要响应式追踪 |
| `computed` | 派生状态（`hasFence`、`hasPerson`） | 自动缓存 |

---

### 6. 生命周期清理 — 避免内存泄漏的完整链条

```ts
onUnmounted(() => {
  destroyGeofence()
    ├─ stopAlarmSound()      // 清理 setInterval + Oscillator
    ├─ clearFence()          // map.remove(polygon/circle) + 重置状态
    ├─ removePerson()        // map.remove(marker) + 停止报警
    └─ cancelDraw()          // 清理预览线/顶点/事件监听 + 恢复 doubleClickZoom
})
```

**事件监听的清理机制：**

```ts
// 绑定：将 handler 引用存储到 map 实例的自定义属性上
;(map as any)._geofenceClick = onClick
map.on('click', onClick)

// 清理：通过引用精确 off，避免误删其他监听器
const m = map as any
if (m._geofenceClick) {
  map.off('click', m._geofenceClick)
  delete m._geofenceClick
}
```

---

## 完整调用链路图

```
用户操作 → 电子围栏响应
═══════════════════════════════════════════

┌─ 绘制 ─────────────────────────────────────┐
│ [🔷绘制围栏] → startDrawPolygon()            │
│   → map.setStatus({ doubleClickZoom:false }) │
│   → 逐一点击 → onClick(e)                   │
│     → 每点：new Marker + new Polyline       │
│     → ≥3点：首顶点变红脉冲                   │
│   → 点击首顶点 / [✅闭合] → finishDraw()     │
│     → finishPolygonDraw()                   │
│       → new AMap.Polygon(path, FENCE_STYLE) │
│       → cleanupDrawing(map)                 │
│       → map.setStatus({ doubleClickZoom:true})│
└────────────────────────────────────────────┘

┌─ 老人 ─────────────────────────────────────┐
│ [➕添加老人] → addPerson()                   │
│   → new AMap.Marker({draggable:true})       │
│   → marker.on('dragend', checkBoundary)     │
│   → checkBoundary()  // 初始检测             │
│                                              │
│ [↑↓←→] / 拖拽 → movePerson()                │
│   → marker.setPosition([lng, lat])          │
│   → checkBoundary()  // 每次移动立即检测      │
└────────────────────────────────────────────┘

┌─ 检测 ─────────────────────────────────────┐
│ checkBoundary()                             │
│   ├─ 无围栏 → isInside = true (skip)       │
│   ├─ 圆形 → Circle.contains(point)          │
│   └─ 多边形 → GeometryUtil.isPointInRing()  │
│              └─ 失败 → isPointInPolygon()   │
│   └─ wasInside && !inside → triggerAlarm()  │
│   └─ !wasInside && inside → resetAlarm()    │
└────────────────────────────────────────────┘

┌─ 报警 ─────────────────────────────────────┐
│ triggerAlarm(position)                      │
│   ├─ alarmCount++                           │
│   ├─ alarmHistory.push({time, position})    │
│   ├─ updateFenceStyle(true) // 围栏变红虚线  │
│   ├─ alarmActive = true   // 浮层出现       │
│   └─ startAlarmSound()    // 蜂鸣开始       │
│                                              │
│ dismissAlarm() / resetAlarm()               │
│   ├─ alarmActive = false                    │
│   ├─ updateFenceStyle(false) // 恢复绿色     │
│   └─ stopAlarmSound()     // 蜂鸣停止       │
└────────────────────────────────────────────┘
```

---

## 考察点汇总

| 层级 | 考察点 | 难度 |
|------|--------|------|
| **架构设计** | Composable 模式：逻辑/视图分离、单一职责 | ⭐⭐⭐ |
| **响应式** | `shallowRef` vs `ref` vs `computed` 的选择理由 | ⭐⭐ |
| **几何算法** | 射线法（Ray Casting）原理 + Haversine 公式 | ⭐⭐⭐⭐ |
| **地图 SDK 踩坑** | `doubleClickZoom`、`lngLatToContainer` 参数格式、`setContent` 副作用 | ⭐⭐⭐⭐⭐ |
| **交互设计** | 三种闭环方式（点击首顶点/按钮/右键取消）的 UX 考量 | ⭐⭐⭐ |
| **事件管理** | 动态事件绑定/解绑、闭包捕获、内存泄漏防范 | ⭐⭐⭐ |
| **Web Audio API** | OscillatorNode + GainNode + exponentialRampToValueAtTime | ⭐⭐⭐ |
| **生命周期** | `onUnmounted` 中 4 步清理链（音效→围栏→标记→绘制态） | ⭐⭐ |
| **CSS 隔离** | scoped vs 全局样式在 AMap 自定义标记中的应用 | ⭐⭐⭐ |
| **状态机** | wasInside/inside 变迁检测避免重复报警 | ⭐⭐ |

---

## 加分项

- **能解释为什么不用 `AMap.MouseTool` 而手动处理 click 事件** — 更细粒度的交互控制（首顶点高亮、实时顶点计数、三通道闭环）
- **能指出 `setContent` 的替代方案** — destroy + new Marker 重建，或使用 `setOptions`（如果 SDK 支持）
- **能说明 `lngLatToContainer` 的参数格式陷阱** — AMap v2 只接受 `[lng, lat]` 数组或 `LngLat` 实例，不接受 `{lng, lat}` 普通对象
- **能提出改进方向**：
  - 支持多个围栏 + 多个老人（一对多/多对多关系）
  - 使用 `watchPosition` 替代 `getCurrentPosition` 实现实时 GPS 追踪
  - 报警信息通过 WebSocket 推送到护工端
  - 围栏数据持久化（localStorage/后端）+ 编辑已有围栏的顶点
  - 使用 AMap 的 `PolygonEditor` 插件支持围栏二次编辑
- **能分析 `movePerson` 的步长选择** — 0.0005° 约 30-50 米的经纬度换算

---

## 追问方向

### 追问 1：如果围栏有 100 个顶点，`isPointInPolygon` 的性能如何？

**期望回答：** 射线法时间复杂度 O(n)，n 为顶点数。100 个顶点约 0.01ms。但养老场景围栏通常 4-20 个顶点，性能完全不是瓶颈。如果真有数千顶点，可以先用 bounding box 做粗筛。

### 追问 2：圆形围栏的 `contains()` 精度取决于什么？

**期望回答：** `AMap.Circle.contains()` 基于球面几何计算，精度受限于：
1. 地球半径常量（AMap 使用 6378137m）
2. 高纬度地区 Mercator 投影变形
3. 极小的圆（<1m）可能受浮点精度影响
对于养老场景（通常 100-1000m 半径），精度完全够用。

### 追问 3：`alarmActive` 为什么用 `ref` 而不用 `shallowRef`？

**期望回答：** `alarmActive` 是布尔值，不是对象。`ref(true)` 和 `shallowRef(true)` 对原始值行为完全相同——Vue 对原始类型不会深度追踪。但用 `ref` 语义更清晰（"这是一个需要响应式的值"）。

### 追问 4：如果老人恰好在围栏边界线上，`isPointInRing` 返回什么？

**期望回答：** 取决于浮点精度和算法实现。射线法在边界线上行为不确定（可能 true 也可能 false）。生产环境应该在边界 ±2m 加一个模糊区间（hysteresis），避免在边界反复触发报警/解除。

### 追问 5：`startAlarmSound` 中为什么要 try-catch？

**期望回答：**
1. 部分浏览器（如 iOS Safari）要求 AudioContext 必须在用户手势中创建
2. 某些企业环境可能禁用 Web Audio API
3. setInterval 可能被浏览器节流（后台标签页降至 1s）
4. 静默失败比页面崩溃更优雅——视觉报警仍然工作

### 追问 6：为什么不在 `drag` 事件中检测，而是 `dragend`？

**期望回答：** `drag` 事件每像素触发一次，拖拽 100px 就触发 100 次 `checkBoundary`，其中 99 次是浪费。`dragend` 只触发一次，刚好够。"边界穿越"在拖拽中段发生还是在终点发生，对报警结果无影响——报警只需要知道"最终位置是否在围栏外"。