# BBBMap

**Repository Path**: axver_com/bbbmap

## Basic Information

- **Project Name**: BBBMap
- **Description**: BBBMap 是一个基于现代前端技术栈开发的 WebGIS 应用，提供地图展示、图层管理等功能，支持矢量瓦片MVT、栅格瓦片、GeoJSON等空间数据。项目采用 Vue 3 作为前端框架，使用 TailwindCSS 进行样式管理，MapLibre GL 作为地图引擎。
- **Primary Language**: JavaScript
- **License**: BSD-3-Clause
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 36
- **Forks**: 6
- **Created**: 2025-05-07
- **Last Updated**: 2025-09-01

## Categories & Tags

**Categories**: Uncategorized

**Tags**: webgis, vectortile, geojson, mapbox, maplibre

## README

![地图可视化界面](./screenshot/map.png)

# BBBMap - WebGIS 项目

基于 Vue 3 + TailwindCSS + MapLibre GL 的现代化 WebGIS 应用。

## 项目简介

BBBMap 是一个基于现代前端技术栈开发的 WebGIS 应用，提供地图展示、图层管理等功能。项目采用 Vue 3 作为前端框架，使用 TailwindCSS 进行样式管理，MapLibre GL 作为地图引擎。

## 系统功能介绍

BBBMap 提供了一套完整的 WebGIS 解决方案，具有以下核心功能：

### 地图可视化

系统支持多种底图切换，包括卫星影像、矢量地图和自定义样式地图。用户可以通过直观的界面进行地图缩放、平移和旋转操作，实现对地理空间的精确探索。

![暗黑模式界面](./screenshot/dark.png)
### 图层管理

系统提供了强大的图层管理功能，支持多种数据源的加载和显示：
- 矢量图层（点、线、面）
- 栅格图层
- GeoJSON 数据


这些工具使用户能够从地理数据中挖掘出有价值的空间关系和模式。

### 暗黑模式支持

系统提供了明亮和暗黑两种主题模式，用户可以根据自己的偏好或使用环境切换不同的显示模式。



## 技术栈

- Vue 3
- TailwindCSS
- MapLibre GL
- Vue Router
- Pinia

## 功能特性

- 用户认证
- 地图展示
- 图层管理
- 响应式设计
- 数据可视化
- 主题切换

## 项目结构

```
axmap-gl/
├── src/
│   ├── assets/        # 静态资源
│   ├── components/    # 组件
│   ├── views/         # 页面
│   ├── router/        # 路由配置
│   ├── store/         # 状态管理
│   └── App.vue        # 根组件
├── doc/               # 项目文档
│   ├── architecture/  # 架构文档
│   ├── api/          # API文档
│   ├── development/  # 开发文档
│   └── deployment/   # 部署文档
├── screenshot/        # 系统截图
└── public/           # 公共资源
```

## 获取代码

您可以通过以下命令从Gitee仓库克隆项目代码：

```bash
# 使用HTTPS
git clone https://gitee.com/axver_com/bbbmap.git

# 或使用SSH（如果您已配置SSH密钥）
git clone git@gitee.com:axver_com/bbbmap.git
```

克隆完成后，进入项目目录：

```bash
cd bbbmap
```

## 快速开始

### 环境要求

- Node.js >= 16.0.0
- npm >= 7.0.0

### 安装依赖

```bash
npm install
```

### 开发环境运行

```bash
npm run dev
```

### 生产环境构建

```bash
npm run build
```

### 预览生产构建

```bash
npm run preview
```

## 开发规范

- 使用 Vue 3 组合式 API
- 使用 TailwindCSS 进行样式管理
- 遵循 DRY 原则
- 保持代码简洁可读
- 使用 TypeScript 进行类型检查

## 版权信息

Copyright © 2024 axver.com

## 联系方式

- 微信：axversoft
- 邮箱：axversoft@163.com
- 官网：https://axver.com