地图生命周期

地图生命周期是指地图从创建到销毁的整个过程。了解地图生命周期有助于在合适的时机执行相应的操作。

生命周期阶段

1. 初始化阶段

地图实例创建时，会触发初始化过程：

const sdk = new navMap.MapSDK({
  container: "map",
  center: [116.39, 39.9],
  zoom: 10,
});

在初始化阶段，SDK 会：

• 创建地图容器
• 加载地图样式
• 初始化各种管理器（图层管理器、GeoJSON管理器等）
• 注册插件

2. 加载阶段

地图样式加载完成后，会触发 load 事件：

sdk.on("load", () => {
  console.log("地图样式已加载");
  // 此时可以安全地操作地图样式
});

3. 完成阶段

所有初始化工作完成后，会触发 loadComplete 事件：

sdk.on("loadComplete", (event) => {
  console.log("地图初始化完成");
  console.log("NOTAM管理器:", event.notam);
  console.log("ADSB管理器:", event.adsb);
  
  // 此时所有功能都已就绪，可以开始使用
  setupLayerControlPanel();
});

loadComplete 事件会在以下操作完成后触发：

• 期数设置完成
• 所有管理器初始化完成
• 图标加载完成
• 图表功能初始化完成

4. 运行阶段

地图正常运行期间，可以监听各种事件：

// 缩放事件
sdk.on("zoom", () => {
  console.log("当前缩放级别:", sdk.getZoom());
});

// 移动事件
sdk.on("move", () => {
  console.log("地图中心:", sdk.getCenter());
});

// 旋转事件
sdk.on("rotate", () => {
  console.log("地图旋转角度:", sdk.getBearing());
});

5. 重新初始化

当需要更新期数或重新加载地图时，可以触发重新初始化：

sdk.on("reinit", (event) => {
  console.log("地图重新初始化完成，期数:", event.period);
  // 重新设置图层控制面板等
});

6. 销毁阶段

当不再需要地图时，应该销毁地图实例以释放资源：

sdk.destroy();

销毁地图会：

• 移除所有事件监听器
• 清理所有图层和源
• 释放内存资源

事件顺序

地图生命周期的典型事件顺序：

1. 创建实例 → new MapSDK()
2. 样式加载 → load 事件
3. 初始化完成 → loadComplete 事件
4. 运行期间 → zoom、move、click 等事件
5. 重新初始化 → reinit 事件（可选）
6. 销毁 → destroy() 方法

最佳实践

1. 在 loadComplete 后再操作图层

sdk.on("loadComplete", () => {
  // ✅ 正确：在 loadComplete 后添加图层
  sdk.addBuiltInLayer("airport");
});

// ❌ 错误：在 loadComplete 前添加图层可能失败
sdk.addBuiltInLayer("airport");

2. 监听错误事件

sdk.on("error", (error) => {
  console.error("地图错误:", error);
  // 处理错误
});

3. 清理资源

// 在页面卸载前销毁地图
window.addEventListener("beforeunload", () => {
  if (sdk) {
    sdk.destroy();
  }
});

完整示例

let sdk;

async function initMap() {
  try {
    // 1. 创建地图实例
    sdk = new navMap.MapSDK({
      container: "map",
      center: [116.39, 39.9],
      zoom: 10,
    });

    // 2. 监听样式加载
    sdk.on("load", () => {
      console.log("地图样式已加载");
    });

    // 3. 监听初始化完成
    sdk.on("loadComplete", (event) => {
      console.log("地图初始化完成");
      
      // 4. 添加图层
      sdk.addBuiltInLayer("airport");
      
      // 5. 设置事件监听
      setupEventListeners();
    });

    // 6. 监听重新初始化
    sdk.on("reinit", (event) => {
      console.log("地图重新初始化，期数:", event.period);
    });

  } catch (error) {
    console.error("地图初始化失败:", error);
  }
}

function setupEventListeners() {
  sdk.on("click", (e) => {
    console.log("点击位置:", e.lngLat);
  });

  sdk.on("zoom", () => {
    console.log("缩放级别:", sdk.getZoom());
  });
}

// 页面卸载时清理
window.addEventListener("beforeunload", () => {
  if (sdk) {
    sdk.destroy();
  }
});

initMap();