BMapViewer

BMapViewer 是面向 Vue 3 应用的 Cesium 地理信息可视化 SDK。它统一管理 Viewer 初始化、相机控制与资源销毁，并提供职责独立的多源底图、业务图层、拾取绘制、空间分析和天气效果能力。

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

在线资源

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

核心能力

能力	说明
Viewer 生命周期	通过 Vue 组件创建、控制和销毁 Cesium.Viewer
多源底图	通过 BaseMaps 管理离线瓦片、高德、百度、腾讯、ArcGIS、天地图、Google、GeoVis 和自定义切片
可视化图层	提供点、线、面、气泡、热力图、3D Tiles 与动态效果图层
拾取与绘制	支持点、图标点、线、多边形拾取及节点拖拽编辑
空间分析	集成 Turf，使用 GeoJSON 完成距离、缓冲和空间关系计算
天气粒子	通过 WeatherEffects 提供雨、雪、雾、沙尘、云层和闪电后处理效果
离线资源	支持本地 TMS 瓦片、3D Tiles 与自定义静态资源

目录结构

BMapViewer/
├─ src/sdk/base-map/        # BaseMaps 底图模块
├─ src/sdk/layer/           # MapLayers 业务图层
├─ src/sdk/weather/         # WeatherEffects 天气模块
├─ 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 输出的地址即可查看基础示例。

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

• #/base-maps：离线瓦片与多源 Provider 的可编辑底图示例
• #/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 { BaseMaps, 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) {
  new BaseMaps.BaseMap(viewer, {
    type: 'offline',
    url: '/tiles/{z}/{x}/{reverseY}.png',
    coordinateSystem: 'GCJ02',
  })

  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