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

前言

在开发地图应用时，处理用户点击事件是一个核心功能。本文将深度解析一个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而不是普通对象？

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时，实际调用的是markerEmit
      emit("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：初始化底层markerService
    console.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
};

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

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

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',     // 显示在标记点上方20px
        zIndex: 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. 调用handleMarkerClick
  handleMarkerClick(张三的数据);
  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); // 约60fps

viewChangeListener = 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));
    }
  }
};

总结

这个事件系统的设计体现了现代前端开发的几个核心原则：

1. 分层架构的价值

• 职责分离：每一层都有明确的职责

• 可维护性：修改某一层不影响其他层

• 可测试性：每一层都可以独立测试

• 可扩展性：容易添加新功能

2. 设计模式的应用

• 观察者模式：解耦事件的发布和订阅

• 依赖注入：提高代码的可测试性和灵活性

• 适配器模式：连接不同接口的系统

3. 性能考虑

• Map数据结构：O(1)时间复杂度的操作

• 事件防抖：避免频繁的UI更新

• 内存管理：及时清理监听器和缓存

4. 错误处理

• 容错机制：一个监听器出错不影响其他监听器

• 重试机制：处理临时性错误

• 错误上报：便于问题定位和修复

通过深入理解这个事件系统，我们可以学到如何在复杂的前端应用中组织代码，如何处理多层级的事件传播，以及如何设计可维护、可扩展的架构。

记住：复杂的系统不是目标，而是为了更好地解决实际问题。每一层的存在都有其必要性，每一个设计决策都有其考量。

希望这篇深度解析能帮助你完全理解这个事件系统的每一个细节。如果还有任何疑问，欢迎私信！