BMapViewer

BMapViewer 是面向 Vue 3 应用的 Cesium 地理信息可视化 SDK。它统一管理 Viewer 初始化、相机控制与资源销毁，并提供可组合的图层、拾取绘制和空间分析能力。

仓库同时提供 SDK 源码、可编辑在线示例、VitePress 技术文档和多格式构建产物，适合用于三维 GIS、离线地图、园区态势、设备监控与专题分析等场景。

在线资源

• 在线预览：浏览图层、拾取绘制与天气模块，并在线编辑运行示例代码。
• 在线文档：查看快速开始、组件 API、图层说明和工具使用指南。

核心能力

能力	说明
Viewer 生命周期	通过 Vue 组件创建、控制和销毁 Cesium.Viewer
可视化图层	提供点、线、面、气泡、热力图、3D Tiles 与动态效果图层
拾取与绘制	支持点、图标点、线、多边形拾取及节点拖拽编辑
空间分析	集成 Turf，使用 GeoJSON 完成距离、缓冲和空间关系计算
离线资源	支持本地 TMS 瓦片、3D Tiles 与自定义静态资源

目录结构

BMapViewer/
├─ src/sdk/                 # SDK 源码
├─ examples/                # 可运行示例
├─ docs/                    # 接入、API 与开发文档
├─ BMapViewer/              # npm run build:lib 生成的库文件
├─ demo-dist/               # npm run build:demo 生成的示例站点
├─ vite.config.ts           # 示例工程配置
└─ vite.lib.config.ts       # SDK 构建配置

本地运行

npm install
npm run dev

浏览器打开终端中 Vite 输出的地址即可查看基础示例。

示例站以模块主页作为统一入口，当前包含：

• #/layers：图层目录与可编辑运行示例
• #/pick-tools：点、图标点、线和多边形拾取示例
• #/weather：天气粒子系统目录骨架

主页文档链接默认指向 GitHub 仓库中的 Markdown 文件。部署独立文档站时，可以通过 VITE_DOCS_BASE_URL 指定文档站根地址：

VITE_DOCS_BASE_URL=https://example.com/BMapViewer npm run build:demo

运行技术文档站点：

npm run docs:dev

构建

# 同时构建 SDK 和示例站点
npm run build

# 只构建 SDK
npm run build:lib

# 只构建示例站点
npm run build:demo

SDK 构建结果位于 BMapViewer/，包含 ES Module、UMD 和样式文件。

在 Vue 3 项目中使用

安装本地包或发布后的包，并确保项目已安装 vue、cesium 和 vite-plugin-cesium：

npm install b-map-viewer cesium vite-plugin-cesium

Vite 配置：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import cesium from 'vite-plugin-cesium'

export default defineConfig({
  plugins: [vue(), cesium()],
})

组件中使用：

<script setup>
import { ref } from 'vue'
import { BMapViewer, MapLayers } from 'b-map-viewer'
import 'b-map-viewer/style.css'

const mapRef = ref(null)
const camera = {
  longitude: 116.3974,
  latitude: 39.9093,
  height: 12000,
  pitch: -45,
}

function handleReady(viewer) {
  const circles = new MapLayers.CircleGroupLayer(viewer, {
    radius: 300,
    fillColor: '#37d6ff',
  })

  circles.setData([
    {
      geometry: { coordinates: [116.3974, 39.9093] },
      properties: { id: 'center' },
    },
  ])
}
</script>

<template>
  <div style="width: 100%; height: 600px">
    <BMapViewer
      ref="mapRef"
      :camera="camera"
      :scene-mode="1"
      @ready="handleReady"
    />
  </div>
</template>

SDK 内部已经显式导入 Cesium，不需要再执行 window.Cesium = Cesium。

文档

• 在线文档
• 在线预览
• 完整技术文档站点
• 快速开始
• 组件 API
• 图层模块
• 开发与构建

兼容性

• Vue 3.4+
• Cesium 1.118.x（当前验证版本为 1.118.2）
• Vite 5+

License

Apache License 2.0