976 lines
39 KiB
Markdown
976 lines
39 KiB
Markdown
# 高德地图 Composable 面试题
|
||
|
||
---
|
||
|
||
## Q1：如何在 Vue 3 中集成高德地图（AMap）？
|
||
|
||
---
|
||
|
||
## 题目
|
||
|
||
请你设计一个 Vue 3 组合式函数（Composable）来集成高德地图 JSAPI，要求：
|
||
1. 支持在多个页面中独立使用，但 SDK 脚本只下载一次
|
||
2. 安全密钥在脚本加载之前正确设置
|
||
3. 地图容器在 flex 布局中能正确渲染
|
||
|
||
请描述关键实现步骤和设计决策。
|
||
|
||
---
|
||
|
||
## 参考答案
|
||
|
||
### 1. 配置文件（`src/config/amap.ts`）
|
||
|
||
集中管理 Key、安全密钥、版本号和插件列表：
|
||
|
||
| 配置项 | 说明 |
|
||
|--------|------|
|
||
| `AMAP_JSAPI_KEY` | 前端地图 Key（`VITE_AMAP_JSAPI_KEY` 环境变量） |
|
||
| `AMAP_SECURITY_CODE` | 安全密钥，2021/12/02 后申请的 Key 必须配合使用 |
|
||
| `AMAP_VERSION` | JSAPI 版本，如 `'2.0'` |
|
||
| `AMAP_PLUGINS` | 需要加载的插件数组，如 `Geocoder`、`Driving`、`ToolBar` 等 |
|
||
|
||
### 2. `loadAMap()` — SDK 全局单例加载
|
||
|
||
用两个模块级变量实现双重锁：
|
||
|
||
```
|
||
let amapPromise = null // 正在进行的加载 Promise（防并发重复加载）
|
||
let AMapGlobal = null // 已完成的加载结果（后续调用 O(1) 秒返）
|
||
|
||
loadAMap():
|
||
① if (AMapGlobal) → 直接返回缓存 // 最快路径
|
||
② if (!amapPromise) → 创建加载 Promise // 首次 / 上次失败后
|
||
├─ 先设置 window._AMapSecurityConfig // ⚠️ 必须在 load 之前
|
||
├─ 调用 AMapLoader.load({ key, version, plugins })
|
||
├─ 成功 → 存入 AMapGlobal
|
||
└─ 失败 → amapPromise = null（允许重试）
|
||
③ return amapPromise // 并发调用复用同一 Promise
|
||
```
|
||
|
||
关键设计：
|
||
- **Promise 去重**：多个组件同时调用，只发一次网络请求
|
||
- **失败可重试**：`catch` 中重置 `amapPromise`，不污染 `AMapGlobal`
|
||
|
||
### 3. `useAmap()` — 地图实例管理
|
||
|
||
```ts
|
||
// 返回值
|
||
containerRef // ref → 模板绑定到 <div ref="containerRef" />
|
||
mapInstance // shallowRef → 地图实例（为什么用 shallowRef 见 Q2）
|
||
loading/error // ref → 加载/错误状态
|
||
initMap() // 异步初始化：loadAMap() → new AMap.Map(container, options)
|
||
destroyMap() // 销毁实例 + onUnmounted 自动调用
|
||
```
|
||
|
||
### 4. 页面中使用
|
||
|
||
```vue
|
||
<template>
|
||
<div ref="containerRef" class="map-container" />
|
||
</template>
|
||
|
||
<script setup>
|
||
import { onMounted, nextTick } from 'vue'
|
||
import { useAmap } from '@/composables/useAmap'
|
||
|
||
const { containerRef, mapInstance, initMap } = useAmap({ zoom: 15 })
|
||
|
||
onMounted(async () => {
|
||
const map = await initMap()
|
||
if (map) nextTick(() => map.resize()) // 修正 flex 布局下的初始尺寸
|
||
})
|
||
</script>
|
||
```
|
||
|
||
### 5. 关键细节
|
||
|
||
- **安全密钥时序**：`_AMapSecurityConfig` 必须在 `AMapLoader.load()` 之前设置，否则 Driving / Geocoder 等服务报 `INVALID_USER_SCODE`
|
||
- **flex 布局修正**：地图创建后调用 `map.resize()`，因为 flex 分配的尺寸可能尚未生效
|
||
- **`%` 而非 `vh`**：容器用 `height: 100%` 逐级继承，适配微前端宿主不一定是全视口的场景
|
||
|
||
---
|
||
|
||
## 总结一句话
|
||
|
||
> **配置文件集中管理 Key/插件 → `loadAMap()` 全局单例确保 SDK 只下载一次 → `useAmap()` 封装实例生命周期，页面只需绑定 `containerRef` 并调用 `initMap()`。**
|
||
|
||
|
||
---
|
||
|
||
## Q2：多个地图页面复用时有哪些性能陷阱？如何解决？
|
||
|
||
---
|
||
|
||
## 题目
|
||
|
||
你的应用中有 3 个页面各自包含高德地图，用户在不同页面间切换。请分析：
|
||
1. **JSAPI 脚本会重复下载吗？如何保证只下载一次？**
|
||
2. **`mapInstance` 为什么用 `shallowRef` 而不是 `ref`？从性能和副作用两个角度说明。**
|
||
3. **页面切换时旧地图实例如何清理？画出关键生命周期。**
|
||
|
||
---
|
||
|
||
## 参考答案
|
||
|
||
### 1. JSAPI 脚本只下载一次
|
||
|
||
`loadAMap()` 通过 `AMapGlobal` 缓存已加载结果。页面 A 首次调用时发起 `AMapLoader.load()`，页面 B/C 调用时直接命中缓存返回，不产生额外网络请求。
|
||
|
||
**进阶：`AMap` 与 `mapInstance` 的本质区别**
|
||
|
||
| 对象 | 本质 | 作用 | 数量 |
|
||
|------|------|------|------|
|
||
| **`AMap`** | 全局命名空间 (SDK) | 提供构造函数（如 `new AMap.Marker`）和工具方法 | 全局唯一 |
|
||
| **`mapInstance`** | 地图实例 (Instance) | 具体的地图对象，负责渲染、缩放、事件监听 | 每个容器一个 |
|
||
|
||
> **面试官提问：既然已经有了 `mapInstance`，为什么在点击事件处理函数中还要重新调用 `await loadAMap()`？**
|
||
>
|
||
> **回答：** 因为 `mapInstance` 只是一个渲染好的地图“窗口”，它不包含创建新零件（如 Marker 或 Polyline）的“工厂工具”。为了在点击位置创建新的 Marker，必须通过 `loadAMap()` 获取 `AMap` 这个构造函数库。由于 `loadAMap` 做了单例缓存，这种重复调用是 O(1) 级别的，既保证了代码的健壮性（确保 SDK 已加载），又不会产生额外的网络开销。
|
||
|
||
页面切换时的关键流程：
|
||
|
||
```
|
||
页面 A 活跃 → 页面 B 挂载
|
||
│
|
||
├─ A.onUnmounted → destroyMap()
|
||
│ └─ mapInstance.value.destroy() // 释放 WebGL 上下文、事件监听
|
||
│
|
||
└─ B.onMounted → initMap()
|
||
├─ loadAMap() → 命中 AMapGlobal 缓存（不下载）
|
||
└─ new AMap.Map(containerB, options) // 全新实例挂到新 DOM
|
||
```
|
||
|
||
**核心结论**：SDK 全局常驻，地图实例按页面创建/销毁，互不干扰。
|
||
|
||
### 2. 为什么 `mapInstance` 必须用 `shallowRef`？
|
||
|
||
| 维度 | `shallowRef` ✅ | `ref` ❌ |
|
||
|------|-----------------|----------|
|
||
| **性能** | 仅追踪 `.value` 整体替换，初始化为 O(1) | 递归代理整个 AMap.Map 对象树（数百个属性/WebGL 上下文），阻塞主线程 |
|
||
| **副作用** | 不劫持属性访问，AMap 内部 `this` 指向不变 | Proxy 改变 `this` 指向，可能破坏地图渲染循环、事件系统 |
|
||
| **语义** | 代码中只需要 `mapInstance.value = new Map()` / `.destroy()` / `= null`，不关心内部属性变化 | 完全用不到深度追踪能力 |
|
||
|
||
**一句话**：`shallowRef` 用于"只关心对象整体是否被替换，不关心内部怎么变"的第三方复杂实例。
|
||
|
||
### 3. 页面切换时的完整生命周期
|
||
|
||
| 步骤 | 时机 | 动作 |
|
||
|------|------|------|
|
||
| ① 旧地图销毁 | `onUnmounted` → `destroyMap()` | `map.destroy()` 释放画布、事件、DOM |
|
||
| ② 响应式清理 | Vue 组件卸载 | `mapInstance`、`containerRef` 随组件 GC |
|
||
| ③ 新地图创建 | `onMounted` → `initMap()` | `containerRef` 绑定新 DOM → `new AMap.Map(新容器)` |
|
||
| ④ SDK 缓存命中 | `initMap()` 内部 `loadAMap()` | `AMapGlobal` 非空，O(1) 返回 |
|
||
|
||
---
|
||
|
||
## 总结一句话
|
||
|
||
> **SDK 全局单例只下载一次，地图实例按页面生灭，`shallowRef` 避免深度代理第三方对象 —— 三者配合才能让多页面地图既快又稳。**
|
||
|
||
|
||
---
|
||
|
||
## Q3：如何在高德地图上添加和管理 Marker？
|
||
|
||
---
|
||
|
||
## 题目
|
||
|
||
在一个电子围栏应用中，你需要在地图上添加多种标记：老人位置（👴，可拖拽）、护理员位置（👩⚕️，程序控制移动）、起点/终点（📍/🏁，静态）、围栏顶点（序号圆点，绘制完成后清除）。请回答：
|
||
|
||
1. **Marker 的基本创建流程是什么？`content` 和 `offset` 的作用？**
|
||
2. **不同类型的 Marker 在"创建/更新/销毁"策略上有什么不同？为什么？**
|
||
3. **为什么 Marker 的 CSS 样式不能写在 Vue 的 `<style scoped>` 中？**
|
||
|
||
---
|
||
|
||
## 参考答案
|
||
|
||
### 1. Marker 的基本创建
|
||
|
||
```ts
|
||
const marker = new AMap.Marker({
|
||
position: [lng, lat], // 经纬度
|
||
content: '<div class="my-marker">👴</div>', // 自定义 DOM 内容
|
||
offset: new AMap.Pixel(-17, -17), // 锚点偏移（让图标中心对准坐标）
|
||
zIndex: 200, // 层级
|
||
draggable: true, // 是否可拖拽
|
||
})
|
||
map.add(marker) // 添加到地图
|
||
```
|
||
|
||
- **`content`**：任意 HTML 字符串，AMap 将其渲染为 Marker 的 DOM 节点。比默认的图标更灵活（可以用 emoji + CSS）。
|
||
- **`offset`**：Marker 默认以左上角对齐坐标点，`offset` 向左上偏移一半宽高，使图标中心对准坐标。
|
||
|
||
### 2. 不同 Marker 的创建/更新/销毁策略
|
||
|
||
| 类型 | 创建策略 | 更新策略 | 销毁策略 |
|
||
|------|----------|----------|----------|
|
||
| **老人 👴** | `addPerson` 时 `new Marker` + `map.add` | 拖拽 `dragend` → `setPosition` + 边界检测 | `removePerson` 时 `map.remove` |
|
||
| **护理员 👩⚕️** | `addCaregiver` 时 `new Marker` + `map.add` | 动画循环中 `setPosition`（每 40ms） | `removeCaregiver` 时 `map.remove` |
|
||
| **起点 📍 / 终点 🏁** | 首次点击时 `new Marker`，**保存引用** | **复用**：再次点击只调 `setPosition`，不重建 | `removeOrigin/Dest` 时 `map.remove` |
|
||
| **围栏顶点** | 每次点击都 `new Marker` + `map.add` | 无需更新（绘制过程中只增不减） | `finishDraw`/`cancelDraw` 时**批量 `map.remove`** |
|
||
|
||
**为什么起点/终点用"复用 setPosition"而非"删了重建"？** 避免闪烁，性能更好，且语义上"同一个标记在移动"比"消失再出现"更自然。
|
||
|
||
**为什么围栏顶点要批量清理？** 顶点是临时绘制辅助标记，围栏完成后由 Polygon 接管显示，顶点 Marker 必须全部 `map.remove()`，否则会残留在画布上。
|
||
|
||
### 3. 为什么样式不能 scoped？
|
||
|
||
Vue 的 `<style scoped>` 会给选择器加 `data-v-xxx` 属性选择器。但 Marker 的 DOM 是由 AMap **直接注入地图容器**的，不在 Vue 模板编译范围内，DOM 节点上没有 `data-v-xxx` 属性 → scoped 样式完全匹配不到。
|
||
|
||
**正确做法**：在 `.vue` 文件末尾加一个非 scoped 的 `<style>` 块：
|
||
|
||
```vue
|
||
<style>
|
||
/* 全局生效，按 className 精确匹配，避免污染 */
|
||
.geofence-person-marker { width: 34px; height: 34px; ... }
|
||
.geofence-caregiver-marker { width: 34px; height: 34px; ... }
|
||
</style>
|
||
```
|
||
|
||
通过 **业务前缀命名**（如 `geofence-`）来隔离，而非依赖 Vue 的 scoped 机制。
|
||
|
||
---
|
||
|
||
## 总结一句话
|
||
|
||
> **Marker 通过 `content` + `offset` 实现自定义 UI；静态标记复用 `setPosition`，临时标记批量清理，样式用全局 `<style>` + 业务前缀隔离。**
|
||
|
||
|
||
---
|
||
## Q4：如何实现"标记起点 → 终点 → 规划路线 → 动画移动"的完整交互？
|
||
|
||
---
|
||
|
||
## 题目
|
||
|
||
护理员巡护场景：点击按钮 → 点击地图放置 📍 起点 → 同样放置 🏁 终点 → 添加 👩⚕️ 护理员 → 规划驾车路线（蓝色折线）→ 护理员沿路线动画到达终点。请回答：
|
||
|
||
1. **"点击地图放标记"的交互如何设计？为什么不用全局 `map.on('click')`？**
|
||
2. **路线规划的核心流程？`AMap.Driving` 有哪些注意点？**
|
||
3. **动画如何实现？为什么需要对路径点降采样？**
|
||
|
||
---
|
||
|
||
## 参考答案
|
||
|
||
### 1. "标记模式"交互：用完即解绑
|
||
|
||
采用 **进入模式 → 点击地图 → 退出模式** 三段式，核心是一个 `settingMode` 状态变量（`'origin'` | `'dest'` | `null`）：
|
||
|
||
| 阶段 | 动作 |
|
||
|------|------|
|
||
| **进入** | `settingMode = mode`，光标设为 `crosshair`，`map.on('click', handler)` |
|
||
| **点击** | `eventLngLat(e)` 提取坐标 → `applyOrigin(pt)` 或 `applyDestination(pt)` |
|
||
| **退出** | `settingMode = null`，光标还原，`map.off('click', handler)` |
|
||
|
||
**为什么不用全局 `map.on('click')`？** 一直开着无法区分"现在该放起点还是终点"，需要额外的 `if/else` 分支；模式开关职责单一，每个模式用完即解绑，防止事件堆积。
|
||
|
||
**Marker 复用策略**：起点/终点如果已存在，只调 `setPosition()` 而非删了重建 —— 避免闪烁。
|
||
|
||
### 2. 路线规划：`AMap.Driving` 五步走
|
||
|
||
前提：`config/amap.ts` 的 `AMAP_PLUGINS` 已包含 `'AMap.Driving'`。
|
||
|
||
```
|
||
① new AMap.Driving({ map, policy: 0 }) → 必须传 map 实例
|
||
② driving.search(起点LngLat, 终点LngLat, callback) → 回调风格，需手动包装 Promise
|
||
③ 从 result.routes[0].steps[i].path 逐段拼出完整坐标数组
|
||
④ new AMap.Polyline({ path, strokeColor: '#4A90D9' }) + map.add()
|
||
⑤ map.setFitView([polyline], false, [60,60,60,60]) → 自动缩放让整条路线可见
|
||
```
|
||
|
||
| 注意点 | 说明 |
|
||
|------|------|
|
||
| **插件预加载** | 未在 `AMAP_PLUGINS` 中声明则 `AMap.Driving` 为 `undefined` |
|
||
| **`policy` 策略** | `0`=速度优先, `1`=费用优先, `2`=距离优先, `3`=不走快速路 |
|
||
| **回调 ≠ Promise** | `search` 是回调风格，用 `new Promise` 包裹以配合 `async/await` |
|
||
| **`steps[i].path`** | 每段道路包含该段所有拐点，需遍历拼接 |
|
||
|
||
### 3. 动画 & 降采样
|
||
|
||
**为什么降采样？** Driving 返回的原始路径有 **数千个点**（每几米一个），直接逐点动画：
|
||
> 5000 点 × 40ms = **200 秒**，太慢且大部分点位间距不到 1 像素。
|
||
|
||
降采样到 **250 点**：等距抽取，`250 × 40ms ≈ 10 秒`，流畅且速度合理。
|
||
|
||
```ts
|
||
// 降采样：从 N 个点中等距取 target 个
|
||
function downsamplePath(path, target = 250) {
|
||
const step = (path.length - 1) / (target - 1)
|
||
return Array.from({ length: target }, (_, i) => path[Math.round(i * step)])
|
||
}
|
||
```
|
||
|
||
**动画循环**：`setInterval` 每 40ms 调一次 `marker.setPosition(animPath[i])`，配合 `animProgress`（0→1）驱动进度条 UI。用 `setInterval` 而非 `rAF` 是因为地图不是逐帧画布，固定间隔配合降采样点数能精确控制总耗时。
|
||
|
||
### 完整流程（状态机视角）
|
||
|
||
```
|
||
settingMode='origin' → click → applyOrigin(Marker 复用)
|
||
↓
|
||
settingMode='dest' → click → applyDestination(Marker 复用)
|
||
↓
|
||
addCaregiver() → new Marker(👩⚕️) at 起点
|
||
↓
|
||
planRoute() → Driving.search → 拼 path → Polyline(蓝) → downsample→250
|
||
↓
|
||
startAnimation() → setInterval 40ms → setPosition → 到达
|
||
```
|
||
|
||
> 全程通过 `isPlanning` / `isAnimating` / `canPlanRoute`(computed) 控制按钮互斥与禁用状态。
|
||
|
||
---
|
||
|
||
## 总结一句话
|
||
|
||
> **模式开关管理点选（用完即解绑）→ `AMap.Driving` + 回调转 Promise 规划路线 → 降采样到 250 点后 `setInterval` + `setPosition` 驱动动画，状态变量全程控制 UI 互斥。**
|
||
|
||
|
||
---
|
||
## Q6：如何在高德地图上实现电子围栏的交互绘制与越界报警？
|
||
|
||
---
|
||
|
||
## 题目
|
||
|
||
在一个养老看护应用中，你需要实现以下功能：
|
||
1. **多边形围栏绘制**：用户在地图上逐点点击添加顶点，支持预览虚线、首顶点高亮提示闭合、右键取消
|
||
2. **圆形围栏绘制**：第一次点击定圆心，鼠标移动实时预览圆形，第二次点击定半径
|
||
3. **老人越界报警**：老人标记（👴）可通过方向键或拖拽移动，每次移动自动检测是否在围栏内，越界时触发声光报警并记录历史
|
||
|
||
请描述关键实现思路，重点关注**绘制过程的交互设计**和**越界检测算法**。
|
||
|
||
---
|
||
|
||
## 参考答案
|
||
|
||
### 一、多边形围栏绘制
|
||
|
||
#### 1. 整体状态机
|
||
|
||
绘制过程由 `isDrawing` + `fenceType` 两个状态变量驱动，按钮禁用/启用、提示条显示、光标样式全部由它们控制：
|
||
|
||
```
|
||
空闲 ──[点击「绘制围栏」]──▶ 绘制中（polygon）
|
||
│ ├─ click → 添加顶点（编号圆点 + 虚线连接）
|
||
│ ├─ click 首顶点(30m内) → 闭环完成
|
||
│ └─ 右键 → 取消
|
||
◀──────────────────────────────┘
|
||
```
|
||
|
||
#### 2. 关键设计决策
|
||
|
||
| 决策 | 做法 | 原因 |
|
||
|------|------|------|
|
||
| **事件绑定** | `map.on('click', handler)` 临时绑定，绘制完成/取消时 `off` | 用完即解绑，避免全局监听干扰其他功能 |
|
||
| **双击冲突** | 绘制开始时 `map.setStatus({ doubleClickZoom: false })` | 双击 = click+click+dblclick，不关闭则 dblclick 被 AMap 消费导致触发意外缩放 |
|
||
| **光标提示** | `map.setDefaultCursor('crosshair')` | 用户明确知道"正在绘制中" |
|
||
| **右键取消** | `map.on('rightclick', handler)` + `e.domEvent.preventDefault()` | 阻止浏览器右键菜单弹出 |
|
||
|
||
#### 3. 闭环判断：Haversine 距离
|
||
|
||
当已有 ≥3 个顶点时，每次点击计算点击位置与首顶点的地理距离。距离 < 30 米 → 自动闭环：
|
||
|
||
```ts
|
||
// Haversine 公式 — 球面两点最短距离
|
||
function haversineDistance(a, b):
|
||
R = 6371000 // 地球半径（米）
|
||
dLat, dLng 转为弧度
|
||
a = sin²(dLat/2) + cos(lat1) * cos(lat2) * sin²(dLng/2)
|
||
return R * 2 * atan2(√a, √(1-a))
|
||
```
|
||
|
||
**为什么不用像素距离？** 缩放级别变化时像素距离不等价于地理距离——zoom=10 时 30 米 = 2px，zoom=18 时 30 米 = 80px。用地理距离保证所有缩放级别行为一致。
|
||
|
||
#### 4. 首顶点高亮渐变
|
||
|
||
≥3 个顶点后，第一个顶点标记从普通绿色圆点（`geofence-vertex-dot`）替换为红色脉动大圆（`geofence-first-vertex`），CSS 动画 `geofence-vertex-pulse` 缩放+阴影闪烁——给用户强烈暗示"点击这里闭合"。
|
||
|
||
### 二、圆形围栏绘制
|
||
|
||
#### 两阶段 Click 设计
|
||
|
||
```
|
||
阶段 1：第一次 click
|
||
├─ 记录圆心坐标
|
||
├─ map.off('click', onClick) ← 解绑第一阶段
|
||
├─ 添加红色圆心标记
|
||
├─ map.on('mousemove', onMouseMove) ← 动态预览圆形
|
||
├─ map.on('click', onSecondClick) ← 第二阶段
|
||
└─ map.on('rightclick', onCancel)
|
||
|
||
onMouseMove：
|
||
└─ 计算 Haversine(圆心, 鼠标) → 更新预览 Circle 的半径
|
||
|
||
阶段 2：第二次 click
|
||
├─ 计算最终半径
|
||
├─ 清理预览 Circle + 圆心标记
|
||
├─ 创建正式 Circle 覆盖物
|
||
└─ 恢复 doubleClickZoom + 默认光标
|
||
```
|
||
|
||
**关键**：两个阶段通过解绑/重新绑定不同的事件处理器实现，而非在同一个 handler 中用 `if/else` 分支——职责更清晰。
|
||
|
||
### 三、越界检测
|
||
|
||
#### 1. 检测时机
|
||
|
||
每次老人位置变化都触发 `checkBoundary()`：
|
||
|
||
- **方向键移动** (`movePerson`)：`setPosition` → `checkBoundary()`
|
||
- **拖拽标记** (`dragend` 事件)：更新 `personPosition` → `checkBoundary()`
|
||
- **首次添加** (`addPerson`)：创建后立即检测一次
|
||
|
||
#### 2. 判断点是否在围栏内
|
||
|
||
| 围栏类型 | 方法 | 说明 |
|
||
|---------|------|------|
|
||
| **圆形** | `AMap.Circle.contains(point)` | AMap 内置方法，直接判断 |
|
||
| **多边形** | `AMap.GeometryUtil.isPointInRing()` | AMap 工具方法，优先使用 |
|
||
| 多边形兜底 | 自实现射线法 `isPointInPolygon()` | try-catch 兜底，防止 GeometryUtil 不可用 |
|
||
|
||
**射线法原理**：从待测点向右发射水平射线，统计与多边形各边的交点数——奇数=在内，偶数=在外。
|
||
|
||
#### 3. 状态转换
|
||
|
||
```ts
|
||
checkBoundary():
|
||
计算 inside（当前是否在围栏内）
|
||
|
||
if (!inside && wasInside): // 刚刚越界
|
||
→ triggerAlarm(position)
|
||
|
||
if (inside && !wasInside): // 刚刚回栏
|
||
→ resetAlarm()
|
||
```
|
||
|
||
**核心**：用 `wasInside`（上一次检测结果）与当前 `inside` 比较，只做**状态转换检测**，不做持续检测。越界后只要不回围栏，不会重复触发报警。
|
||
|
||
### 四、报警表现（多通道）
|
||
|
||
报警通过三个通道同时表现，每个通道独立控制：
|
||
|
||
| 通道 | 实现 | 说明 |
|
||
|------|------|------|
|
||
| **视觉-浮层** | `alarm-overlay` 绝对定位覆盖地图，box-shake + bg-pulse 动画，点击任意处关闭 | `alarmActive` 控制 `v-if` |
|
||
| **视觉-标签** | `fence-status` 位置标签：红底"老人已越界" / 绿底"安全区域内" | 由 `alarmActive` 驱动 class 切换 |
|
||
| **视觉-围栏** | `updateFenceStyle(true)` → 填充红色半透明 + 红色虚线描边 + 加粗 | `setOptions` 动态切换样式 |
|
||
| **听觉** | Web Audio API：880Hz 方波，每 800ms 响 300ms，增益从 0.2 指数衰减到 0 | `OscillatorNode` + `setInterval` |
|
||
| **记录** | `alarmHistory` 追加 `{ time, position }`，右侧面板显示 | 累计 `alarmCount` 在浮层中展示 |
|
||
|
||
### 五、架构分工
|
||
|
||
```
|
||
MapView.vue (胶水层)
|
||
│
|
||
├─ useAmap() → mapInstance（地图实例，注入下游）
|
||
│
|
||
├─ useGeofence(mapInstance)
|
||
│ ├─ 围栏绘制（Polygon/Circle）
|
||
│ ├─ 老人标记（添加/移动/拖拽）
|
||
│ └─ 越界检测 + 报警
|
||
│
|
||
└─ useRouteTrack(mapInstance)
|
||
└─ 路线规划 + 护理员动画（共享 mapInstance，互不干扰）
|
||
|
||
生命周期：onUnmounted → destroyGeofence() + destroyRouteTrack()
|
||
```
|
||
|
||
两个 Composable 共享同一个 `mapInstance`，通过各自的状态变量（`isDrawing`、`isPlanning`、`isAnimating`）在模板层实现按钮互斥——绘制围栏时禁用路线操作，规划路线时禁用围栏操作。
|
||
|
||
---
|
||
|
||
## 总结一句话
|
||
|
||
> **多边形用"点击地图→Haversine 30m 首顶点闭合 + 手动按钮兜底"，圆形用"两阶段 Click + mousemove 实时预览"，越界检测用 GeometryUtil/射线法 + 状态转换去重，报警通过视觉（浮层/标签/围栏变色）+ 听觉（Web Audio 蜂鸣）+ 记录（历史面板）三通道实现。**
|
||
|
||
|
||
---
|
||
## Q5：大卡车每10s发一个GPS点，连续3天（~25920点），前端如何绘制轨迹？会卡顿吗？如何处理？
|
||
|
||
---
|
||
|
||
## 题目
|
||
|
||
一辆大卡车每 10 秒上报一个 GPS 位置，连续跑了 3 天，累计约 **25920 个轨迹点**。前端需要在地图上展示完整轨迹。请回答：
|
||
|
||
1. **直接渲染 25920 个点会不会卡顿？为什么？**
|
||
2. **有哪些优化方案？请从数据层、渲染层、交互层三个维度分别说明。**
|
||
3. **落地的推荐组合方案是什么？**
|
||
|
||
---
|
||
|
||
## 参考答案
|
||
|
||
### 1. 会不会卡顿？为什么？
|
||
|
||
**一定会严重卡顿，甚至可能浏览器崩溃（OOM）**。原因：
|
||
|
||
| 环节 | 问题 |
|
||
|------|------|
|
||
| **数据规模** | 25920 个点 = 25919 条线段，远超 AMap.Polyline 流畅阈值（通常 < 2000 段） |
|
||
| **渲染机制** | `AMap.Polyline` 基于 DOM / 普通 Canvas 逐段绘制，缩放平移时全量重绘，直接榨干 CPU |
|
||
| **内存风险** | 大规模坐标数组 + AMap 内部渲染缓冲持续驻留，极端情况 OOM 崩溃 |
|
||
| **视觉浪费** | 屏幕宽度 ~1920px，缩小看整条轨迹只需几百像素，25920 个点中 95% 挤在同一像素毫无贡献 |
|
||
|
||
**一句话**：DOM/Canvas 全量渲染 2.6 万段折线 → 主线程阻塞 + 内存激增 + 每帧重绘 → 必定卡顿。
|
||
|
||
---
|
||
|
||
### 2. 优化方案（数据层 → 渲染层 → 交互层）
|
||
|
||
#### ▎数据层优化：减少点数（脱水）
|
||
|
||
##### 方案一：Douglas-Peucker 抽稀（核心方案）
|
||
|
||
道格拉斯-普克算法——保留轨迹形状特征，丢弃共线/冗余点：
|
||
|
||
> **原理**：连首尾 → 找离连线最远的中间点 → 若距离 > epsilon 则保留并递归 → 否则丢弃中间所有点。
|
||
|
||
- epsilon = 10 米时，25920 点 → **约 500~800 点**，地图上肉眼完全无法分辨差异
|
||
- O(n log n)，浏览器计算 < 50ms，前端即可完成
|
||
- 现成库：`simplify-js`、`@turf/simplify`，一行调用
|
||
|
||
**效果**：数据量精简 70%~90%，弯道保留密集点，直道只留两端点。
|
||
|
||
##### 方案二：按缩放级别动态抽稀
|
||
|
||
同一份数据，不同 zoom 用不同 epsilon——远看粗、近看细：
|
||
|
||
| Zoom | 含义 | Epsilon | 预期点数 |
|
||
|------|------|---------|---------|
|
||
| 3~8 | 省/国级别 | 500m | < 100 |
|
||
| 9~12 | 城市级别 | 100m | 200~500 |
|
||
| 13~15 | 区/街道 | 20m | 500~1500 |
|
||
| 16+ | 建筑级 | 5m 或原始数据 | 1000~5000 |
|
||
|
||
**实现**：预计算 3~4 个精度版本的 path，监听 `map.on('zoomend')` 切换 `polyline.setPath()`，避免实时计算。
|
||
|
||
##### 方案三：后端预聚合（前端最省心）
|
||
|
||
后端存储时提前产出多精度版本：
|
||
|
||
```
|
||
GET /api/track/123?precision=low → ~300 点（zoom < 10）
|
||
GET /api/track/123?precision=medium → ~2000 点（zoom 10~14）
|
||
GET /api/track/123?precision=high → 原始数据（zoom > 14）
|
||
```
|
||
|
||
**优点**：前端无需计算，首次请求即最优。
|
||
**缺点**：需后端配合，存储多份。
|
||
|
||
##### 方案四：时间维度聚合
|
||
|
||
最近数据精细、历史粗化：
|
||
|
||
| 时间段 | 展示策略 | 点数 |
|
||
|--------|---------|------|
|
||
| 最近 2 小时 | 原始精度（10s/点） | 720 |
|
||
| 2~12 小时前 | 1 分钟/点 | 600 |
|
||
| 12~72 小时前 | 10 分钟/点 | 360 |
|
||
|
||
**适用场景**：实时监控页，用户更关注"现在在哪"，而非历史每一秒。
|
||
|
||
---
|
||
|
||
#### ▎渲染层优化：换引擎（重构）
|
||
|
||
##### 方案五：AMap.Loca — 高德官方 WebGL 大数据引擎（推荐）
|
||
|
||
高德专门针对大屏和海量数据开发的 WebGL 可视化引擎。Loca 中的 **`LineLayer`（折线层）** 或 **`LinkLayer`（飞线层）** 专为万级、十万级轨迹线设计：
|
||
|
||
- WebGL 渲染，GPU 并行处理，不受 DOM/Canvas 瓶颈限制
|
||
- 平移缩放只更新投影矩阵，不重建几何
|
||
- 2.6 万条线段也能维持 60fps
|
||
|
||
**这是高德官方推荐的海量线条方案，也是 Gemini 回答的核心推荐。**
|
||
|
||
##### 方案六：AMap.LabelsLayer + LabelMarker（海量标记场景）
|
||
|
||
如果需要在地图上显示 2.6 万个停靠点或关键标记，传统 `Marker` 超过几百个就卡。`LabelsLayer` 基于 Canvas/WebGL，渲染几万个点极其流畅。配合 `AMap.MassMarks` 可做到百万级散点。
|
||
|
||
##### 方案七：AMap.CustomLayer / 自定义 WebGL 图层（终极可控）
|
||
|
||
使用 `AMap.CustomLayer` 叠加 Three.js 或原生 WebGL：
|
||
|
||
- 坐标一次性上传 GPU 缓冲
|
||
- 完全控制渲染管线（着色器、线宽、颜色渐变）
|
||
- 百万点也能 60fps
|
||
|
||
**缺点**：开发成本高，25920 点场景不需要。
|
||
|
||
---
|
||
|
||
#### ▎交互层优化：按需加载（减负）
|
||
|
||
##### 方案八：视口裁剪（Bounds Filter）
|
||
|
||
监听 `mapmove` / `zoomchange`，获取 `map.getBounds()`，只渲染当前可视区域内的轨迹段：
|
||
|
||
- 视口内的段 → `polyline.setMap(map)` 显示
|
||
- 视口外的段 → `polyline.setMap(null)` 隐藏
|
||
- 用户放大后视口变小，实际渲染点数自然大幅下降
|
||
|
||
**配合 zoom 自适应使用效果最佳**：缩小看粗略趋势（点数少），放大看局部细节（视口小 → 点数也少）。
|
||
|
||
##### 方案九：防抖（Debounce）
|
||
|
||
地图拖拽和缩放时频繁触发重绘，必须加防抖：
|
||
|
||
- 对 `mapmove` / `zoomchange` 加 **200ms 防抖**
|
||
- 等用户操作停止后再重新计算和渲染轨迹
|
||
- 避免拖拽过程中每秒触发数十次无意义的重绘
|
||
|
||
##### 方案十：分片计算（rAF 分批）
|
||
|
||
如果 2.6 万个点必须全量处理（如客户端抽稀计算），不要用 `forEach` 一次性跑完导致浏览器假死：
|
||
|
||
- 用 `requestAnimationFrame` 将计算分批，每帧处理 500~1000 个点
|
||
- 计算期间保持 UI 响应，避免"页面卡死"的用户体验
|
||
|
||
---
|
||
|
||
### 3. 推荐组合方案
|
||
|
||
按量级分档推荐：
|
||
|
||
| 点量 | 组合 |
|
||
|------|------|
|
||
| **< 1 万** | DP 抽稀 + zoom 自适应 + 防抖 |
|
||
| **1~5 万**（本场景） | DP 抽稀 + zoom 自适应 + 视口裁剪 + 防抖 |
|
||
| **5~20 万** | DP 抽稀 + zoom 自适应 + **Loca LineLayer** + 防抖 |
|
||
| **20 万+** | 后端预聚合 + Loca LineLayer / CustomLayer + 视口裁剪 |
|
||
|
||
**对于本场景（25920 点）的具体落地步骤**：
|
||
|
||
1. 收到原始 25920 点 → 前端 `simplify-js` DP 抽稀，epsilon 10m → ~800 点
|
||
2. 预计算 3 个精度版本（epsilon = 5m / 50m / 200m），对应 zoom >= 14 / 10~13 / < 10
|
||
3. 创建 `AMap.Polyline`，根据当前 zoom 选择对应精度
|
||
4. 监听 `zoomend` → `setPath(对应精度)` 无缝切换
|
||
5. 对 `mapmove` 加 200ms 防抖，避免拖拽时频繁重绘
|
||
6. 如果后端支持分段查询，叠加视口裁剪只加载可见段
|
||
|
||
> **够用原则**：2.6 万点不需要上 Loca 或 CustomLayer。DP 抽稀 + zoom 自适应 + 防抖三板斧足够丝滑。点数上 5 万再考虑 Loca。
|
||
|
||
---
|
||
|
||
## 总结一句话
|
||
|
||
> **数据层 DP 抽稀去冗余（脱水）→ 渲染层 Loca/CustomLayer 换引擎（重构，量大时）→ 交互层 zoom 自适应 + 视口裁剪 + 防抖（减负），三层组合按量级分档选配，2.6 万点 DP + zoom + 防抖足矣。**
|
||
|
||
|
||
---
|
||
## Q7：如何在高德地图上叠加自定义图片（ImageLayer）？
|
||
|
||
---
|
||
|
||
## 题目
|
||
|
||
你有一张本地图片（如建筑平面图、园区示意图、地质图层），需要将其叠加到高德地图的指定地理范围内。请回答：
|
||
|
||
1. **高德地图 JSAPI v2 中用什么类实现图片叠加？`GroundOverlay`(v1) 和 `ImageLayer`(v2) 有什么区别？**
|
||
2. **如何确定图片的地理范围（Bounds）？**
|
||
3. **如何管理图片图层的生命周期（加载/显示/隐藏/销毁）？**
|
||
4. **Vite 项目中 `import xxx from '@/assets/xxx.png'` 拿到的到底是什么？**
|
||
|
||
---
|
||
|
||
## 参考答案
|
||
|
||
### 1. ImageLayer vs GroundOverlay
|
||
|
||
| 维度 | `GroundOverlay` (v1.x) | `ImageLayer` (v2.0) |
|
||
|------|------------------------|---------------------|
|
||
| **所属版本** | JSAPI v1.x | JSAPI v2.0 |
|
||
| **构造函数** | `new AMap.GroundOverlay(bounds, { image: url })` | `new AMap.ImageLayer({ url, bounds })` |
|
||
| **添加方式** | `map.add(groundOverlay)` | `imageLayer.setMap(map)` |
|
||
| **所需插件** | 无（v1 核心） | 无（v2 核心，继承自 `BuildLayer`） |
|
||
| **扩展性** | 基本属性（透明度、层级） | 更丰富的图层管理 API（setZooms, setOpacity, setzIndex 等） |
|
||
|
||
本项目使用 JSAPI v2.0，所以用 `AMap.ImageLayer`。
|
||
|
||
### 2. Bounds — 地理边界
|
||
|
||
`AMap.Bounds` 用**西南角 + 东北角**两个经纬度坐标定义一个矩形区域：
|
||
|
||
```ts
|
||
const bounds = new AMap.Bounds(
|
||
[116.385, 39.902], // 西南角 (southWest)
|
||
[116.410, 39.917], // 东北角 (northEast)
|
||
)
|
||
|
||
const imageLayer = new AMap.ImageLayer({
|
||
url: '/path/to/image.png',
|
||
bounds: bounds, // 也可以是 [lng1, lat1, lng2, lat2] 四元组
|
||
zooms: [3, 20], // 缩放级别范围（小于 3 或大于 20 时自动隐藏）
|
||
opacity: 0.8, // 透明度 0-1
|
||
})
|
||
imageLayer.setMap(map)
|
||
```
|
||
|
||
**如何确定 bounds？** 有三种常见方式：
|
||
|
||
| 方式 | 说明 | 适用场景 |
|
||
|------|------|---------|
|
||
| **手动指定** | 已知图片覆盖的实际地理位置范围 | 有明确坐标的建筑平面图、园区图 |
|
||
| **从地图视口取** | `map.getBounds()` 获取当前可视区域，直接用于 bounds | "把图片铺满当前屏幕"的快速开发 |
|
||
| **从图片元数据取** | 图片自带地理参考信息（如 GeoTIFF） | 专业 GIS 图层 |
|
||
|
||
### 3. 生命周期管理
|
||
|
||
图片图层的完整生命周期分为 5 个阶段：
|
||
|
||
```
|
||
① 创建 → ② 加载 → ③ 显示 → ④ 更新 → ⑤ 销毁
|
||
```
|
||
|
||
```ts
|
||
// ① 创建
|
||
const layer = new AMap.ImageLayer({ url, bounds, zooms, opacity })
|
||
|
||
// ② 加载（异步，监听 complete 事件）
|
||
layer.on('complete', () => console.log('图片加载完成'))
|
||
layer.setMap(map) // 此时开始网络请求
|
||
|
||
// ③ 显示/隐藏
|
||
layer.show() // 显示（默认）
|
||
layer.hide() // 隐藏，不销毁
|
||
|
||
// ④ 更新属性
|
||
layer.setOpacity(0.5)
|
||
layer.setBounds(newBounds)
|
||
layer.setZooms([10, 18])
|
||
|
||
// ⑤ 销毁
|
||
layer.setMap(null) // 从地图移除
|
||
layer.destroy() // 释放资源
|
||
```
|
||
|
||
**关键细节**：
|
||
|
||
- `show()`/`hide()` 只控制可见性，不触发网络请求（图片已缓存），适合频繁切换场景
|
||
- `setMap(null)` 从地图移除但不释放内存，`destroy()` 彻底释放
|
||
- `zooms` 参数让图片在特定缩放级别自动显隐 —— 比手动监听 `zoomchange` 更优雅
|
||
- 组件卸载时必须调用 `destroy()`，否则图片资源泄漏
|
||
|
||
### 4. Vite 中的图片导入
|
||
|
||
```ts
|
||
import desktopPng from '@/assets/desktop.png'
|
||
```
|
||
|
||
这里 `desktopPng` 是 **字符串（URL 地址）**，不是文件对象或 base64。
|
||
|
||
Vite 对小于 `assetsInlineLimit`（默认 4KB）的图片自动内联为 base64，大于阈值的（如这张 desktop.png 是 1.6MB）则复制到 `dist/assets/` 并返回带 hash 的路径，如 `/assets/desktop-D4jkcXaU.png`。
|
||
|
||
这意味着 `AMap.ImageLayer` 接收的 `url` 就是一个普通的 HTTP URL，AMap 内部通过 `<img>` 标签加载，完全兼容 Vite 的构建产物。
|
||
|
||
### 实际落地示例
|
||
|
||
```vue
|
||
<template>
|
||
<div ref="containerRef" class="map-container" />
|
||
<button @click="toggleLayer">切换图层</button>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { useAmap } from '@/composables/useAmap'
|
||
import desktopPng from '@/assets/desktop.png'
|
||
|
||
const { containerRef, mapInstance, initMap } = useAmap({ zoom: 14 })
|
||
const layer = shallowRef<AMap.ImageLayer | null>(null)
|
||
|
||
onMounted(async () => {
|
||
const map = await initMap()
|
||
if (!map) return
|
||
|
||
layer.value = new AMap.ImageLayer({
|
||
url: desktopPng, // Vite 导入的 URL
|
||
bounds: new AMap.Bounds([116.38,39.90], [116.41,39.92]),
|
||
zooms: [3, 20],
|
||
})
|
||
layer.value.setMap(map)
|
||
})
|
||
|
||
function toggleLayer() {
|
||
layer.value?.[layerVisible ? 'hide' : 'show']()
|
||
}
|
||
|
||
onUnmounted(() => layer.value?.destroy())
|
||
</script>
|
||
```
|
||
|
||
---
|
||
|
||
## 总结一句话
|
||
|
||
> **JSAPI v2 用 `AMap.ImageLayer({ url, bounds, zooms })` 替代 v1 的 `GroundOverlay`；Bounds 由西南/东北两个经纬度定义；生命周期通过 `setMap`/`show`/`hide`/`destroy` 管理；Vite 的图片 import 返回构建后的 URL 字符串，直接传给 `url` 即可。**
|
||
|
||
|
||
---
|
||
## Q8：如何在 ImageLayer 上叠加 Marker？遇到"地图文字盖住图片"怎么办？
|
||
|
||
---
|
||
|
||
## 题目
|
||
|
||
你通过 `AMap.ImageLayer` 在地图上叠加了一张园区平面图。现在需要在图片上放置若干标记点（如设备位置、巡检点），但发现两个问题：
|
||
|
||
1. **Marker 放在图片上能被看到吗？会不会被图片挡住？**
|
||
2. **地图自带的 POI 标注和路名盖在了图片上面，怎么处理？**
|
||
|
||
请回答这两个问题的原因和解决方案。
|
||
|
||
---
|
||
|
||
## 参考答案
|
||
|
||
### 1. Marker 与 ImageLayer 的层级关系
|
||
|
||
高德地图的渲染从下到上分为多个图层：
|
||
|
||
```
|
||
┌───────────────────────┐
|
||
│ ⑥ 地图文字标注 │ ← 独立渲染层，永远最上层！
|
||
│ ⑤ Marker 标记 │ ← 默认 zIndex 100+
|
||
│ ④ Polygon / Polyline │
|
||
│ ③ ImageLayer │ ← 默认 zIndex 6
|
||
│ ② 道路 / 建筑 │
|
||
│ ① 底图瓦片 │
|
||
└───────────────────────┘
|
||
```
|
||
|
||
**默认情况下 Marker 就在 ImageLayer 之上**，不需要特殊处理就能看到。但建议显式设置 zIndex 确保万无一失：
|
||
|
||
```ts
|
||
// ImageLayer: zIndex 200
|
||
const layer = new AMap.ImageLayer({ url, bounds, zIndex: 200 })
|
||
|
||
// Marker: zIndex 500（明确比 ImageLayer 高）
|
||
const marker = new AMap.Marker({ position, zIndex: 500 })
|
||
```
|
||
|
||
如果 Marker 数量多（几百个），建议用同一个 zIndex 即可，AMap 内部按添加顺序渲染同层 Marker。
|
||
|
||
### 2. 为什么地图文字会盖住图片？
|
||
|
||
地图的 **POI 标注和路名** 渲染在 AMap 引擎的**独立文字图层**上，这个图层位于所有用户叠加层（ImageLayer、Marker、Polygon 等）之上。所以无论 ImageLayer 的 zIndex 设多高，文字始终在上面。
|
||
|
||
这**不是 bug**——高德的设计假设用户叠加图片后仍需要看到地名参考。但图片叠加场景通常不需要。
|
||
|
||
**解决方案**：通过 `map.setFeatures()` 控制底图要素的显示，去掉 `'point'`（POI 标注）：
|
||
|
||
```ts
|
||
// 隐藏 POI 标注和路名
|
||
map.setFeatures(['bg', 'road', 'building']) // 去掉 'point'
|
||
|
||
// 恢复
|
||
map.setFeatures(['bg', 'road', 'building', 'point'])
|
||
```
|
||
|
||
| 参数 | 含义 |
|
||
|------|------|
|
||
| `'bg'` | 背景地图 |
|
||
| `'road'` | 道路线 |
|
||
| `'building'` | 建筑 3D |
|
||
| **`'point'`** | **POI 标注 + 路名（就是盖在图片上的文字）** |
|
||
|
||
**注意事项**：
|
||
|
||
- **页面切换时需恢复**：在 `onUnmounted` 中将 features 恢复为全量 `['bg', 'road', 'building', 'point']`，否则离开页面后其他地图页面也看不到标注
|
||
- 如果只需要隐藏路名但保留 POI，可以用 `map.setShowLabel(false)`（不推荐的旧 API），或者接受"要么全留要么全去"
|
||
- `setFeatures` 是全局操作，影响整个地图实例。如果同一地图上有多个 ImageLayer 需要不同策略，需要自己管理状态
|
||
|
||
### 3. 完整示例：图片 + Marker + 无文字标注
|
||
|
||
```ts
|
||
// ① 地图就绪后先叠加图片
|
||
const imageLayer = new AMap.ImageLayer({
|
||
url: desktopPng,
|
||
bounds: new AMap.Bounds([116.38, 39.90], [116.41, 39.92]),
|
||
zIndex: 200,
|
||
})
|
||
imageLayer.setMap(map)
|
||
|
||
// ② 隐藏 POI 标注（可选：提供按钮让用户自行切换）
|
||
map.setFeatures(['bg', 'road', 'building'])
|
||
|
||
// ③ 在图片上放置 Marker
|
||
function placeMarker(lng: number, lat: number) {
|
||
const marker = new AMap.Marker({
|
||
position: [lng, lat],
|
||
content: '<div class="my-marker">📍</div>',
|
||
offset: new AMap.Pixel(-13, -13),
|
||
zIndex: 500, // 明确高于 ImageLayer
|
||
draggable: true,
|
||
})
|
||
marker.setMap(map)
|
||
return marker
|
||
}
|
||
|
||
// ④ 离开页面时清理
|
||
onUnmounted(() => {
|
||
imageLayer.destroy()
|
||
map.setFeatures(['bg', 'road', 'building', 'point']) // 恢复文字层
|
||
})
|
||
```
|
||
|
||
### 4. Marker 交互设计：模式开关
|
||
|
||
在图片上放置 Marker 需要"点击地图"交互。推荐使用**模式开关**而非全局 `map.on('click')`：
|
||
|
||
```
|
||
用户点击「📍 添加标记」→ map.on('click', handler) + 光标变 crosshair
|
||
用户点击地图 → 创建 Marker + 可能自动退出模式
|
||
用户再次点击按钮 → map.off('click', handler) + 光标还原
|
||
```
|
||
|
||
**为什么不用始终开启的全局 click？** 全局 click 无法区分用户的意图——是在拖动地图还是在放置标记。模式开关让职责单一，用完即解绑，事件不堆积。
|
||
|
||
---
|
||
|
||
## 总结一句话
|
||
|
||
> **Marker 默认层级就在 ImageLayer 之上，设 zIndex:500 保底；地图文字标注通过 `map.setFeatures(['bg','road','building'])` 去掉 `'point'` 来隐藏，离开页面时恢复；放置 Marker 用模式开关管理 map click 事件，用完即解绑。**
|
||
|
||
|
||
---
|
||
## Q9：ImageLayer 上的 Marker 为什么移除图片后还在？它们是什么关系？
|
||
|
||
---
|
||
|
||
## 题目
|
||
|
||
你在 `ImageLayer` 上放了一些 Marker，视觉上 Marker 在图片上面。但当你调用 `removeImageLayer()` 移除图片后，Marker 依然留在地图上。为什么？
|
||
|
||
---
|
||
|
||
## 参考答案
|
||
|
||
**因为它们不是父子关系，而是平级兄弟。**
|
||
|
||
ImageLayer 和 Marker 都直接挂在地图实例上，是**两个独立的覆盖物**：
|
||
|
||
```
|
||
mapInstance
|
||
/ \
|
||
ImageLayer Marker①, Marker②, Marker③...
|
||
```
|
||
|
||
zIndex 只决定视觉上的前后遮挡，不产生任何数据上的从属关系。移除 ImageLayer 只销毁自己，Marker 不受影响。
|
||
|
||
**类比**：桌上铺一块布（ImageLayer），上面放几颗棋子（Marker）。抽走布，棋子还在桌上——它们从没粘在布上。
|
||
|
||
**如果想让 Marker 跟着图片走**，可以：
|
||
- 图片隐藏时调 `marker.hide()`，显示时调 `marker.show()`
|
||
- 或者更彻底：移除图片时 `clearMarkers()`，重新叠加时再重建 Marker
|
||
|
||
---
|
||
|
||
## 总结一句话
|
||
|
||
> **高德地图中所有覆盖物（ImageLayer、Marker、Polygon 等）都是 `mapInstance` 的平级子节点，视觉上的"谁在谁上面"由 zIndex 控制，数据上互不隶属。**
|