架构设计

三层结构

┌────────────────────────────────────────────────────────┐
│ indoor-nav（应用层）                                    │
│ 页面路由 / 历史记录 / 业务数据 / 布局                    │
├────────────────────────────────────────────────────────┤
│ @indoor-map/fmap-react（组件层）                        │
│ FMapProvider / FMapView / 搜索 / 导航面板 / 历史记录     │
├────────────────────────────────────────────────────────┤
│ @indoor-map/fmap-js（封装层）                           │
│ FMap / FMapSearch / FMapNavigation / FMapMarker / ...  │
├────────────────────────────────────────────────────────┤
│ 蜂鸟视图 Fengmap SDK（全局 script，不打包）             │
└────────────────────────────────────────────────────────┘

职责划分原则：

• fmap-js：只依赖 fengmap SDK，提供纯 JS 的业务封装，不依赖 React。
• fmap-react：只依赖 fmap-js 与 Ant Design，提供通用 UI 组件。
• indoor-nav：纯业务逻辑与页面布局，所有地图能力都来自组件层。

核心数据流

1. FMapProvider 创建 FMap 实例，地图加载完成后创建 FMapSearch / FMapNavigation / FMapMarker / FMapFloor / FMapLocation 等子模块。
2. 子组件通过 useFMap() 获取实例，FMapView 负责挂载地图容器并处理点击事件。
3. 搜索/导航结果通过 Props 回调向上传递，业务层负责状态管理（如历史记录写入 localStorage）。
4. FMapState 提供可订阅的状态快照（当前楼层、缩放、视角等），useFMapState 在 React 侧消费。

架构图