外观

移动端使用 ​

BICMap-Mobile 是基于 uni-app（Vue3 + Vite） 的安卓应用示例工程，演示如何在移动端 App 中集成 BicMap 地图引擎，并以 SLAM 建图 作为完整演示场景。

集成方式：renderJS ​

bicMap.ext.min.js 基于 MapLibre GL（WebGL）实现，依赖完整的浏览器 DOM / Canvas / WebGL 环境，无法直接运行在 uni-app 的逻辑层（JsCore / V8）中。

因此项目采用 uni-app 的 renderJS 机制，将地图引擎运行在视图层 WebView：

层职责
逻辑层（<script>）UI、交互、状态展示，不接触地图引擎
renderJS 层（<script module="mapRenderer" lang="renderjs">）加载 bicMap.ext.min.js，创建地图、加载 SLAM 帧、驱动机器人动画

两层通过 prop / action（逻辑层 → renderJS）与 ownerInstance.callMethod（renderJS → 逻辑层）双向通信。

单文件扩展版引擎 ​

移动端集成使用 BicMap 的 单文件扩展版 bicMap.ext.min.js，已内置 MapLibre GL 与 Turf，调用 bicMap.init()（无参）即可使用，无需 额外的 bicMap.min.js / bicMap.css / assets 资源，非常适合打包进 App。

引擎放在 src/lib/bicMap.ext.min.js，文件尾部追加 export default bicMap; 使其成为 ESM 模块，renderJS 中直接 import 使用，H5 dev / H5 build / App 三种环境共用同一套加载逻辑。

演示功能（SLAM 建图） ​

  • 50 帧累积扫图 BMP 实时绘制到隐藏 canvas，由 bicMap loadSlamMap 渲染为地图图层。
  • 机器人沿真实 GPS 路径平滑移动（独立 requestAnimationFrame，速度与帧率解耦）。
  • 支持：开始 / 暂停 / 重置 / 适应地图 / 自动更新帧 / 手动下一帧。
  • 实时状态：进度、当前帧、用时、已扫面积、上帧间隔。

运行 ​

bash
# 安装依赖（首次）
npm install

# H5 调试
npm run dev:h5      # 浏览器访问 http://localhost:8002

# App 调试 / 打包
npm run dev:app     # 生成 App 资源，配合 HBuilderX 真机运行
npm run build:app   # 构建 App 资源

推荐用 HBuilderX 打开本项目制作安卓自定义基座 / 云打包；CLI 方式生成的 App 资源需导入 HBuilderX 后再打包成 apk。

源码 ​

完整工程源码与说明请见 GitHub 仓库：Open-X-Humanoid/BICMap-Mobile。