当前位置：首页 > news >正文

Vue3 + GeoScene 地图点击事件系统设计

news 2025/8/31 5:15:30

前言

在开发地图应用时，处理用户点击事件是一个核心功能。本文将深度解析一个Vue3 + GeoScene项目中复杂的事件系统，从底层的事件注册机制到最终的UI响应，每一个细节都不放过。

核心概念：事件系统的完整架构

完整的数据流向图

用户点击地图↓
🗺️ GeoScene SDK: this.view.on("click") ↓ (自动触发)
🔧 markerService: handleMapClick() → this.emit()↓ (查找并调用所有监听器)
🎯 useMarkers: setupEventListeners() → 注册的回调函数↓ (调用传入的emit函数)  
🎨 MapComponent: markerEmit() → handleMarkerClick()↓ (Vue事件系统)
🏠 父组件: @marker-click="handleMarkerClick"

第一部分：自制事件系统核心 - markerService

1. 事件存储机制详解

export class MarkerService {constructor() {// 🔥 核心：使用Map存储事件监听器this.eventHandlers = new Map();// 结构示例：// Map {//   "marker-click" => [函数1, 函数2, 函数3],//   "map-click-empty" => [函数A, 函数B]// }this.view = null;this.map = null;this.markers = new Map();}
}

为什么用Map而不是普通对象？

特性	Map	普通对象 {}
键的类型	任何类型	只能是字符串/Symbol
大小获取	map.size	Object.keys(obj).length
遍历性能	优化过的迭代器	需要Object.keys()
删除性能	O(1)	delete慢，可能触发优化降级

2. on() 方法 - 事件注册器深度解析

/*** 添加事件监听器 - 这是整个事件系统的基础* @param {string} eventName 事件名称，如 "marker-click"* @param {Function} handler 处理函数*/
on(eventName, handler) {// 🔍 步骤1：检查该事件类型是否已存在if (!this.eventHandlers.has(eventName)) {// 如果不存在，为这个事件类型创建一个空数组this.eventHandlers.set(eventName, []);console.log(`创建新事件类型: ${eventName}`);}// 🔍 步骤2：将监听函数添加到对应事件的数组中this.eventHandlers.get(eventName).push(handler);console.log(`事件监听器已注册: ${eventName}, 当前监听器数量: ${this.eventHandlers.get(eventName).length}`);
}

详细执行过程示例：

// 假设现在要注册两个不同的监听器// 第一次调用
markerService.on("marker-click", function A() { console.log("处理器A"); });
// 内部状态：eventHandlers = Map { "marker-click" => [函数A] }// 第二次调用
markerService.on("marker-click", function B() { console.log("处理器B"); });
// 内部状态：eventHandlers = Map { "marker-click" => [函数A, 函数B] }// 第三次调用，不同事件类型
markerService.on("map-click-empty", function C() { console.log("处理器C"); });
// 内部状态：eventHandlers = Map { 
//   "marker-click" => [函数A, 函数B],
//   "map-click-empty" => [函数C]
// }

3. emit() 方法 - 事件触发器深度解析

/*** 发射事件 - 这是事件系统的触发核心* @param {string} eventName 要触发的事件名称* @param {*} data 要传递的事件数据*/
emit(eventName, data) {console.log(`准备触发事件: ${eventName}`, data);// 🔍 步骤1：从存储中获取该事件的所有监听器const handlers = this.eventHandlers.get(eventName);// 🔍 步骤2：检查是否有监听器if (handlers) {console.log(`找到 ${handlers.length} 个监听器`);// 🔍 步骤3：遍历调用所有监听器handlers.forEach((handler, index) => {try {console.log(`调用监听器 ${index + 1}/${handlers.length}`);// 🔥 关键：调用监听器函数，传入事件数据handler(data);console.log(`监听器 ${index + 1} 执行成功`);} catch (error) {// 🛡️ 错误隔离：一个监听器出错不影响其他监听器console.error(`标记点事件处理器执行失败 [${eventName}]:`, error);}});} else {console.warn(`事件 ${eventName} 没有注册任何监听器`);}
}

详细执行过程示例：

// 假设之前注册了两个监听器：
// eventHandlers = Map { "marker-click" => [函数A, 函数B] }// 现在触发事件
markerService.emit("marker-click", { name: "张三", id: "zhangsan" });// 内部执行过程：
// 1. 获取 "marker-click" 对应的数组: [函数A, 函数B]
// 2. 遍历数组:
//    - 调用 函数A({ name: "张三", id: "zhangsan" })
//    - 调用 函数B({ name: "张三", id: "zhangsan" })
// 3. 每个函数都会收到相同的数据并执行各自的逻辑

4. 地图点击处理完整流程

/*** 处理地图点击事件 - 这是整个流程的起点*/
handleMapClick(event) {if (!this.view) return;console.log("地图点击事件触发", event);// 🔍 使用hitTest检测点击位置的内容this.view.hitTest(event).then((response) => {console.log("hitTest结果:", response.results.length, response.results);if (response.results.length > 0) {// 🔍 有内容被点击，检查每个结果let foundMarker = false;response.results.forEach((result, index) => {if (result.graphic && result.graphic.layer === this.markersLayer) {console.log(`发现标记点 ${index}:`, result.graphic.attributes);// 🔥 关键：触发标记点点击事件this.emit('marker-click', {markerId: result.graphic.attributes.markerId,attributes: result.graphic.attributes,position: this.view.toScreen(result.graphic.geometry),graphic: result.graphic});foundMarker = true;}});if (!foundMarker) {console.log("点击到了其他图层，非标记点");}} else {console.log("点击空白区域");// 🔥 关键：触发空白区域点击事件this.emit('map-click-empty');}}).catch((error) => {console.error("hitTest失败:", error);});
}

hitTest 详细工作原理：

// hitTest 的工作过程
this.view.hitTest(event)
// ↓ GeoScene内部处理
// 1. 将屏幕坐标转换为地图坐标
// 2. 检查该坐标位置的所有图层
// 3. 按图层顺序（上层优先）返回命中的图形对象
// ↓ 返回结果
.then((response) => {// response.results 是一个数组，包含所有被点击的图形// 每个元素包含：// - graphic: 图形对象// - layer: 所属图层  // - mapPoint: 地图坐标// - screenPoint: 屏幕坐标
})

第二部分：业务逻辑层 - useMarkers深度解析

1. setupEventListeners() 详细解析

/*** 设置事件监听器 - 这是连接底层服务和上层组件的关键桥梁*/
const setupEventListeners = () => {console.log("开始设置事件监听器");// 🎯 监听器1：标记点点击事件markerService.on("marker-click", (data) => {console.log("useMarkers收到标记点点击事件:", data);// 🔍 步骤1：更新内部响应式状态selectedMarker.value = data;console.log("已更新selectedMarker状态");// 🔍 步骤2：检查是否有上层组件的emit函数if (emit) {console.log("准备调用上层组件的emit函数");// 🔥 关键：调用传入的emit函数（实际上是MapComponent的markerEmit）emit("marker-click", data);console.log("✅ 已转发事件到上层组件");} else {console.warn("没有提供emit函数，无法转发事件");}});// 🎯 监听器2：地图空白区域点击事件markerService.on("map-click-empty", () => {console.log("useMarkers收到地图空白点击事件");// 🔍 步骤1：清除选中状态selectedMarker.value = null;console.log("已清除selectedMarker状态");// 🔍 步骤2：转发事件if (emit) {console.log("📞 准备调用上层组件的emit函数");emit("map-click-empty");console.log("✅ 已转发空白点击事件到上层组件");}});console.log("✅ 事件监听器设置完成");
};

关键理解：emit参数的来源

// MapComponent.vue中
const markerEmit = (eventName, data) => {console.log("MapComponent的markerEmit被调用:", eventName, data);// ... 处理逻辑
};// 传递给useMarkers
const { ... } = useMarkers(markerEmit);// useMarkers内部
export function useMarkers(emit) {  // 这里的emit就是markerEmit函数const setupEventListeners = () => {markerService.on("marker-click", (data) => {// 当这里调用emit时，实际调用的是markerEmitemit("marker-click", data);  // 等价于 markerEmit("marker-click", data)});};
}

2. 初始化流程详解

/*** 初始化标记点服务 - 整个系统的启动点* @param {Object} view MapView实例 - GeoScene地图视图* @param {Object} map Map实例 - GeoScene地图对象*/
const initMarkerService = async (view, map) => {try {console.log("开始初始化标记点服务");// 🔍 步骤1：初始化底层markerServiceconsole.log("初始化markerService...");markerService.initialize(view, map);console.log("✅ markerService初始化完成");// 🔍 步骤2：设置事件监听器（关键步骤！）console.log("设置事件监听器...");setupEventListeners();console.log("✅ 事件监听器设置完成");// 🔍 步骤3：标记为已初始化isInitialized.value = true;console.log("标记点服务初始化完成");// 🔍 步骤4：重置错误状态markerState.lastError = null;} catch (error) {console.error("标记点服务初始化失败:", error);markerState.lastError = error.message;throw error;}
};

初始化时机详解：

// MapComponent.vue中的调用时机
view.value.when(async () => {console.log("地图视图准备就绪");// 🔥 关键：只有在地图完全加载后才初始化标记点服务await initMarkerService(view.value, map.value);// 添加测试数据addZhangsanMarker(view.value, renIcon);addMultipleTestMarkers();
});

3. 响应式状态管理详解

// 🔍 响应式状态定义
const isInitialized = ref(false);           // 是否已初始化
const markers = ref(new Map());              // 所有标记点的存储
const selectedMarker = ref(null);            // 当前选中的标记点// 🔍 标记点统计状态
const markerState = reactive({totalCount: 0,      // 总数量personCount: 0,     // 人员数量deviceCount: 0,     // 设备数量  vehicleCount: 0,    // 车辆数量lastError: null     // 最后的错误信息
});/*** 更新标记点统计信息*/
const updateMarkerCounts = () => {console.log("更新标记点统计信息");// 🔍 从markerService获取最新数据const allMarkers = markerService.getAllMarkers();console.log(`当前标记点总数: ${allMarkers.size}`);// 🔍 更新总数markerState.totalCount = allMarkers.size;// 🔍 重置计数器markerState.personCount = 0;markerState.deviceCount = 0;markerState.vehicleCount = 0;// 🔍 遍历统计各类型数量allMarkers.forEach((marker, id) => {const type = marker.attributes?.type;switch (type) {case MarkerTypes.PERSON:markerState.personCount++;break;case MarkerTypes.DEVICE:markerState.deviceCount++;break;case MarkerTypes.VEHICLE:markerState.vehicleCount++;break;default:console.warn(`未知标记点类型: ${type}`);}});console.log("统计完成:", {总数: markerState.totalCount,人员: markerState.personCount,设备: markerState.deviceCount,车辆: markerState.vehicleCount});
};

第三部分：组件层 - MapComponent深度解析

1. markerEmit 桥梁函数详解

/*** 标记点事件处理函数 - 连接组合函数和Vue组件的关键桥梁* @param {string} eventName 事件名称* @param {Object} data 事件数据*/
const markerEmit = (eventName, data) => {console.log("markerEmit桥梁函数被调用:", eventName, data);// 🔍 根据事件类型执行不同的内部处理if (eventName === 'marker-click') {console.log("处理标记点点击事件");// 🔥 关键：调用组件内部的处理函数handleMarkerClick(data);} else if (eventName === 'map-click-empty') {console.log("处理地图空白点击事件");// 🔥 关键：调用组件内部的处理函数handleMapClickEmpty();}// 🔍 无论什么事件，都转发给父组件console.log("转发事件给父组件");emit(eventName, data);  // 这里的emit是Vue的defineEmits
};

为什么需要这个桥梁函数？

统一入口：所有来自useMarkers的事件都通过这里
内部处理：可以在转发前进行组件内部的处理
事件转发：确保父组件也能收到事件通知
类型区分：根据事件类型执行不同的处理逻辑

2. handleMarkerClick 详细处理流程

/*** 处理标记点点击事件 - 显示弹窗的核心逻辑* @param {Object} data 标记点数据*/
const handleMarkerClick = (data) => {console.log("开始处理标记点点击:", data);console.log("当前弹窗状态:", showPopup.value);// 🔍 步骤1：根据标记点类型设置弹窗信息if (data.attributes.type === 'vehicle') {console.log("设置车辆信息弹窗");popupMarker.value = {type: 'vehicle',title: data.attributes.title,name: data.attributes.name,plateNumber: data.attributes.plateNumber,     // 车牌号driver: data.attributes.driver,               // 司机vehicleType: data.attributes.vehicleType      // 车辆类型};} else {console.log("设置人员信息弹窗");popupMarker.value = {type: 'person',title: data.attributes.title,name: data.attributes.name,company: data.attributes.company,             // 公司phone: data.attributes.phone                  // 电话};}console.log("弹窗信息设置完成:", popupMarker.value);// 🔍 步骤2：存储标记点的地理坐标（提取纯数据，避免响应式代理问题）popupGeometry.value = {longitude: data.graphic.geometry.longitude,latitude: data.graphic.geometry.latitude};console.log("弹窗地理坐标:", popupGeometry.value);// 🔍 步骤3：显示弹窗showPopup.value = true;console.log("弹窗已显示");// 🔍 步骤4：在下一个tick中计算并设置弹窗位置nextTick(() => {console.log("在nextTick中更新弹窗位置");updatePopupPosition();// 🔍 额外延迟确保DOM完全更新setTimeout(() => {if (showPopup.value && popupGeometry.value) {console.log("延迟更新弹窗位置");updatePopupPosition();}}, 50);});// 🔍 步骤5：设置地图视图变化监听器（确保弹窗跟随地图移动）if (!viewChangeListener && view.value) {console.log("设置地图视图变化监听器");viewChangeListener = view.value.watch(['center', 'zoom', 'rotation'], () => {console.log("地图视图发生变化，更新弹窗位置");updatePopupPosition();});}
};

3. 弹窗位置计算详解

/*** 更新弹出框位置 - 确保弹窗始终显示在正确的地理位置上方*/
const updatePopupPosition = () => {// 🔍 检查必要条件if (!popupGeometry.value || !view.value) {console.warn("缺少必要的地理坐标或地图视图");return;}try {console.log("开始计算弹窗位置");// 🔍 步骤1：创建新的Point对象（避免Vue响应式代理问题）const point = new Point({longitude: popupGeometry.value.longitude,latitude: popupGeometry.value.latitude,spatialReference: { wkid: 4326 }  // WGS84地理坐标系});console.log("创建地理坐标点:", {经度: point.longitude,纬度: point.latitude,坐标系: "WGS84"});// 🔍 步骤2：将地理坐标转换为屏幕坐标const screenPosition = view.value.toScreen(point);console.log("屏幕坐标:", screenPosition);// 🔍 步骤3：验证屏幕坐标的有效性if (screenPosition && typeof screenPosition.x === 'number' && typeof screenPosition.y === 'number') {console.log("✅ 屏幕坐标有效，更新弹窗位置");// 🔍 步骤4：设置弹窗的CSS位置popupPosition.value = {position: 'absolute',left: screenPosition.x + 'px',           // 水平居中对齐top: (screenPosition.y - 20) + 'px',     // 显示在标记点上方20pxzIndex: 1000,                            // 确保在最上层transform: 'translate(-50%, -100%)'      // CSS变换：水平居中，垂直在上方};console.log("弹窗位置已更新:", popupPosition.value);} else {console.warn("无效的屏幕坐标:", screenPosition);}} catch (error) {console.error("更新弹出框位置失败:", error);}
};

为什么要创建新的Point对象？

// ❌ 问题：直接使用响应式对象
view.value.toScreen(popupGeometry.value);
// Vue3会将popupGeometry.value包装成Proxy，GeoScene SDK无法正确处理// ✅ 解决：创建纯粹的几何对象
const point = new Point({longitude: popupGeometry.value.longitude,  // 提取纯值latitude: popupGeometry.value.latitude,    // 提取纯值spatialReference: { wkid: 4326 }
});
view.value.toScreen(point);  // GeoScene SDK可以正确处理

4. 地图视图变化监听详解

/*** 地图视图变化监听器 - 确保弹窗始终跟随标记点*/
if (!viewChangeListener && view.value) {console.log("设置地图视图变化监听器");// 🔥 关键：监听地图的中心点、缩放级别、旋转角度变化viewChangeListener = view.value.watch(['center', 'zoom', 'rotation'], () => {console.log("地图视图发生变化:");console.log("  - 中心点:", view.value.center);console.log("  - 缩放级别:", view.value.zoom);console.log("  - 旋转角度:", view.value.rotation);// 重新计算弹窗位置updatePopupPosition();});
}

为什么需要监听视图变化？

平移：用户拖拽地图时，标记点的屏幕位置会改变

缩放：用户缩放地图时，标记点的屏幕位置会改变

旋转：如果地图支持旋转，标记点位置也会改变

监听器清理：

/*** 关闭弹窗时的清理工作*/
const closePopup = () => {console.log("❌ 关闭弹窗");// 🔍 清理状态showPopup.value = false;popupMarker.value = {};popupGeometry.value = null;// 🔍 清理地图视图变化监听器（重要：防止内存泄漏）if (viewChangeListener) {console.log("清理地图视图变化监听器");viewChangeListener.remove();viewChangeListener = null;}
};

第四部分：完整事件流程详细追踪

场景：用户点击"张三"标记的完整执行流程

阶段1：初始化阶段（应用启动时）

// 1. MapComponent.vue 组件创建
console.log("MapComponent组件开始创建");// 2. 定义markerEmit桥梁函数
const markerEmit = (eventName, data) => { ... };
console.log("markerEmit桥梁函数已定义");// 3. 调用useMarkers，传入markerEmit
const { initMarkerService, ... } = useMarkers(markerEmit);
console.log("useMarkers已初始化，markerEmit已传入");// 4. 地图创建完成
view.value.when(async () => {console.log("地图视图准备就绪");// 5. 初始化标记点服务await initMarkerService(view.value, map.value);// 内部执行：// - markerService.initialize(view, map)// - setupEventListeners() ← 关键：注册事件监听器console.log("标记点服务初始化完成");
});

阶段2：事件注册阶段（setupEventListeners执行）

// setupEventListeners() 内部执行：
console.log("开始注册事件监听器");// 注册第一个监听器
markerService.on("marker-click", (data) => {console.log("监听器1已注册：marker-click");// 这个函数被存储到：// eventHandlers.get("marker-click") = [这个函数]
});// 注册第二个监听器  
markerService.on("map-click-empty", () => {console.log("监听器2已注册：map-click-empty");// 这个函数被存储到：// eventHandlers.get("map-click-empty") = [这个函数]
});console.log("✅ 所有事件监听器注册完成");

阶段3：用户交互阶段（点击张三）

// 1. 用户在屏幕上点击张三的标记
console.log("👆 用户点击了张三标记");// 2. GeoScene SDK自动触发点击事件
// this.view.on("click", this.handleMapClick.bind(this))
console.log("🗺️ GeoScene SDK触发点击事件");// 3. markerService.handleMapClick 执行
console.log("🎯 markerService开始处理点击");// 4. hitTest检测点击内容
this.view.hitTest(event).then((response) => {console.log("🔍 hitTest检测结果:", response.results);// 5. 发现张三的标记被点击if (发现张三标记) {console.log("📍 检测到张三标记被点击");// 6. 触发marker-click事件this.emit('marker-click', 张三的数据);console.log("🚀 触发marker-click事件");}
});

阶段4：事件传播阶段

// 1. markerService.emit() 执行
console.log("markerService.emit开始执行");// 2. 查找并调用所有监听器
const handlers = this.eventHandlers.get("marker-click");
console.log(`找到${handlers.length}个监听器`);// 3. 调用useMarkers注册的监听器
handlers.forEach(handler => {console.log("调用监听器...");handler(张三的数据);  // 这里调用的是useMarkers中注册的函数
});// 4. useMarkers的监听器函数执行
console.log("useMarkers监听器开始执行");// 5. 更新内部状态
selectedMarker.value = 张三的数据;
console.log("selectedMarker状态已更新");// 6. 调用传入的emit函数（实际是markerEmit）
emit("marker-click", 张三的数据);
console.log("调用markerEmit函数");

阶段5：组件响应阶段

// 1. markerEmit函数执行
console.log("markerEmit桥梁函数开始执行");// 2. 检查事件类型并处理
if (eventName === 'marker-click') {console.log("处理标记点点击事件");// 3. 调用handleMarkerClickhandleMarkerClick(张三的数据);console.log("handleMarkerClick开始执行");
}// 4. handleMarkerClick内部处理
console.log("开始设置弹窗");// 设置弹窗信息
popupMarker.value = {type: 'person',name: '张三',title: '张三来救',company: '运营分公司',phone: '16666666666'
};// 设置弹窗位置
popupGeometry.value = {longitude: 张三的经度,latitude: 张三的纬度
};// 显示弹窗
showPopup.value = true;
console.log("张三的弹窗已显示");// 5. 转发事件给父组件
emit(eventName, data);  // Vue的defineEmits
console.log("事件已转发给父组件");

阶段6：UI更新阶段

// 1. Vue响应式系统触发DOM更新
console.log("Vue开始更新DOM");// 2. UserPopup组件渲染
console.log("UserPopup组件开始渲染");// 3. nextTick中更新弹窗位置
nextTick(() => {console.log("计算弹窗位置");updatePopupPosition();
});// 4. 设置地图变化监听
viewChangeListener = view.value.watch(['center', 'zoom', 'rotation'], () => {updatePopupPosition();
});
console.log("地图变化监听器已设置");// 5. 用户看到最终结果
console.log("✅ 张三的信息弹窗已完全显示");

第五部分：核心数据结构详解

1. Map数据结构的深度应用

// 为什么所有地方都使用Map？// 1. markerService中的eventHandlers
this.eventHandlers = new Map();
// 结构：Map<string, Function[]>
// 例如：Map {
//   "marker-click" => [function1, function2],
//   "map-click-empty" => [function3]
// }// 2. markerService中的markers
this.markers = new Map();
// 结构：Map<string, MarkerObject>
// 例如：Map {
//   "zhangsan" => { graphic: ..., attributes: ... },
//   "lisi" => { graphic: ..., attributes: ... }
// }// 3. useMarkers中的markers
const markers = ref(new Map());
// 这是markerService.markers的响应式副本// Map的性能优势对比：
// 操作        | Map      | Array    | Object
// 添加        | O(1)     | O(1)     | O(1)
// 查找        | O(1)     | O(n)     | O(1)
// 删除        | O(1)     | O(n)     | O(1)
// 获取大小    | O(1)     | O(1)     | O(n)
// 遍历        | 高效      | 高效      | 需要Object.keys()

2. 空间参考系统详解

// WGS84坐标系 (wkid: 4326) 详解
spatialReference: { wkid: 4326 }// 4326 = WGS84地理坐标系
// - 全称：World Geodetic System 1984
// - 单位：度（degrees）
// - 经度范围：-180° 到 +180°
// - 纬度范围：-90° 到 +90°
// - 用途：GPS、Google Maps、天地图等// 其他常见坐标系：
// { wkid: 3857 } // Web Mercator（网络地图常用）
// { wkid: 4490 } // CGCS2000（中国坐标系）
// { wkid: 2154 } // RGF93（法国坐标系）// 坐标转换示例：
const point = new Point({longitude: 116.3977,  // 北京天安门经度latitude: 39.9085,    // 北京天安门纬度spatialReference: { wkid: 4326 }
});// GeoScene会自动处理坐标系转换
const screenPos = view.toScreen(point);  // 地理坐标 → 屏幕坐标
const mapPoint = view.toMap(screenPos);  // 屏幕坐标 → 地理坐标

3. 响应式系统和代理问题详解

// Vue3响应式系统的影响// ❌ 问题：Vue会将对象包装成Proxy
const geometry = ref({longitude: 116.3977,latitude: 39.9085
});
// geometry.value 实际上是一个Proxy对象// GeoScene SDK期望纯粹的对象，不是Proxy
view.toScreen(geometry.value);  // 可能失败！// ✅ 解决方案1：创建新对象
const point = new Point({longitude: geometry.value.longitude,  // 提取纯值latitude: geometry.value.latitude,    // 提取纯值spatialReference: { wkid: 4326 }
});// ✅ 解决方案2：使用toRaw
import { toRaw } from 'vue';
const rawGeometry = toRaw(geometry.value);// ✅ 解决方案3：使用markRaw（防止响应式）
import { markRaw } from 'vue';
const point = markRaw(new Point({...}));

第六部分：设计模式深度解析

1. 观察者模式（发布-订阅）的完整实现

/*** 观察者模式的核心组件*/// 1. 主题（Subject）- markerService
class MarkerService {constructor() {this.observers = new Map();  // 观察者列表}// 添加观察者on(event, observer) {if (!this.observers.has(event)) {this.observers.set(event, []);}this.observers.get(event).push(observer);}// 通知所有观察者emit(event, data) {const observers = this.observers.get(event);if (observers) {observers.forEach(observer => observer.update(data));}}
}// 2. 观察者（Observer）- useMarkers中的监听函数
const observer = {update(data) {// 响应数据变化selectedMarker.value = data;emit("marker-click", data);}
};// 3. 注册观察者
markerService.on("marker-click", observer.update);

2. 依赖注入模式详解

/*** 依赖注入的实现和好处*/// ❌ 紧耦合的设计
function useMarkers() {const handleMarkerClick = (data) => {// 直接依赖Vue的emit，无法测试和复用emit("marker-click", data);  // 这里的emit来自哪里？不清楚};
}// ✅ 依赖注入的设计
function useMarkers(emit) {  // 通过参数注入依赖const handleMarkerClick = (data) => {emit("marker-click", data);  // 使用注入的emit};return { handleMarkerClick };
}// 使用时注入具体的实现
const myEmit = (event, data) => console.log(event, data);
const { handleMarkerClick } = useMarkers(myEmit);// 好处：
// 1. 解耦：useMarkers不依赖具体的emit实现
// 2. 可测试：可以注入mock函数进行测试
// 3. 可复用：可以在不同场景下注入不同的emit
// 4. 可配置：运行时决定具体的依赖实现

3. 适配器模式应用

/*** markerEmit作为适配器*/// 外部接口（GeoScene事件） → 适配器 → 内部接口（Vue事件）// GeoScene事件格式
const geoSceneEvent = {type: "click",graphic: { ... },position: { x: 100, y: 200 }
};// Vue事件格式  
const vueEvent = {type: "marker-click",data: { name: "张三", ... }
};// markerEmit适配器
const markerEmit = (eventName, data) => {// 1. 处理事件格式转换let processedData = data;// 2. 执行内部逻辑if (eventName === 'marker-click') {handleMarkerClick(processedData);}// 3. 转发给外部系统emit(eventName, processedData);
};

第七部分：性能优化和最佳实践

1. 事件监听器的生命周期管理

/*** 正确的监听器管理*/// ✅ 正确的注册时机
const initMarkerService = async (view, map) => {// 只在初始化时注册一次setupEventListeners();
};// ✅ 正确的清理时机
onUnmounted(() => {// 组件卸载时清理所有监听器if (viewChangeListener) {viewChangeListener.remove();}// 清理markerService中的监听器markerService.removeAllListeners();
});// ❌ 错误的做法：重复注册
const handleSomeAction = () => {// 每次调用都会重复注册监听器，造成内存泄漏markerService.on("marker-click", handler);
};

2. 防抖和节流优化

/*** 地图事件的防抖处理*/// 地图移动时频繁触发位置更新，需要防抖
import { debounce } from 'lodash-es';const debouncedUpdatePosition = debounce(() => {updatePopupPosition();
}, 16); // 约60fpsviewChangeListener = view.value.watch(['center', 'zoom'], debouncedUpdatePosition);/*** hitTest结果的缓存*/
const hitTestCache = new Map();const optimizedHitTest = async (event) => {const key = `${event.x},${event.y}`;if (hitTestCache.has(key)) {return hitTestCache.get(key);}const result = await view.hitTest(event);hitTestCache.set(key, result);// 清理过期缓存setTimeout(() => {hitTestCache.delete(key);}, 1000);return result;
};

3. 错误处理和容错机制

/*** 完善的错误处理*/const robustEmit = (eventName, data) => {const handlers = this.eventHandlers.get(eventName);if (handlers) {handlers.forEach((handler, index) => {try {handler(data);} catch (error) {console.error(`监听器${index}执行失败:`, error);// 错误上报errorReporter.report({type: 'event_handler_error',eventName,handlerIndex: index,error: error.message,stack: error.stack});// 继续执行其他监听器}});}
};/*** 重试机制*/
const retryableOperation = async (operation, maxRetries = 3) => {for (let i = 0; i < maxRetries; i++) {try {return await operation();} catch (error) {console.warn(`操作失败，第${i + 1}次重试:`, error);if (i === maxRetries - 1) {throw error;}// 指数退避await new Promise(resolve => setTimeout(resolve, Math.pow(2, i) * 1000));}}
};