# china-map-visualization

**Repository Path**: chotoo/china-map-visualization

## Basic Information

- **Project Name**: china-map-visualization
- **Description**: 基于Vue3+Leaflet的中国省市两级地理数据可视化系统，支持地图展示、搜索定位、图层控制等功能
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2026-01-08
- **Last Updated**: 2026-04-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 中国省市两级地理数据可视化系统

基于 Vue3 + Leaflet 开发的中国省市两级地理数据可视化系统，支持地图展示、搜索定位、图层控制等功能。

## 功能特性

- **多层级地图展示**

  - 省级边界展示
  - 市级边界展示
  - 地级市驻点标注

  ![两级显示](./public/functionDemo/两级显示.gif)

- **交互功能**

  - 地区搜索与快速定位
  - 地图缩放和平移
  - 点击区域显示详细信息

  ![搜索定位](./public/functionDemo/搜索定位.gif)

  ![点击显示详情](./public/functionDemo/点击显示详情.gif)

- **图层控制**

  - 独立控制各图层显示/隐藏
  - 根据缩放级别自动显示/隐藏图层
  - 一键开启/关闭所有图层

  ![图层控制](./public/functionDemo/图层控制.gif)

- **地图工具**

  - 距离测量工具
  - 全屏模式切换
  - 地图重置功能
  - 截图功能

  ![测量功能](./public/functionDemo/测量功能.gif)

  ![其他功能](./public/functionDemo/其他功能.gif)

- **数据源**
  - 阿里云 DataV.GeoAtlas

## 技术栈

- **前端框架**: Vue 3
- **构建工具**: Vite
- **地图引擎**: Leaflet
- **绘图插件**: Leaflet Draw
- **包管理器**: pnpm

## 项目结构

```
demo3/
├── public/
│   ├── favicon.ico
│   └── geojson/
│       └── 全国省市驻点_点/          # 地级市驻点数据
├── src/
│   ├── assets/                      # 静态资源
│   ├── components/
│   │   ├── MapboxMap.vue           # 地图主组件
│   │   ├── SearchBar.vue           # 搜索栏组件
│   │   ├── InfoPanel.vue           # 信息面板组件
│   │   ├── FloatingToolbar.vue     # 浮动工具栏组件
│   │   └── MapLegend.vue           # 图例组件
│   ├── App.vue                     # 根组件
│   └── main.js                     # 入口文件
├── index.html
├── package.json
└── vite.config.js
```

## 快速开始

### 安装依赖

```bash
pnpm install
```

### 开发模式

```bash
pnpm dev
```

访问 http://localhost:5173 查看项目

### 生产构建

```bash
pnpm build
```

## 使用说明

### 搜索功能

在搜索栏输入省/市名称，系统会自动定位到对应区域并显示详细信息。

### 图层控制

右侧图层控制面板可以：

- 单独切换各图层的显示状态
- 查看当前缩放级别
- 一键开启/关闭所有图层

### 地图工具

左下角工具栏提供以下功能：

- 🎯 重置：将地图重置到初始位置和缩放级别
- 📏 测量：开启/关闭距离测量工具
- ⛶ 全屏：切换全屏模式
- 📷 截图：保存当前地图截图

## 浏览器支持

- Chrome (推荐)
- Edge
- Firefox
- Safari

## 开发建议

### 推荐的 IDE 设置

[VS Code](https://code.visualstudio.com/) + [Vue (Official)](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (并禁用 Vetur)

### 浏览器开发工具

- Chromium-based 浏览器 (Chrome, Edge, Brave 等):
  - [Vue.js devtools](https://chromewebstore.google.com/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd)
  - [在 Chrome DevTools 中启用自定义对象格式化程序](http://bit.ly/object-formatters)
- Firefox:
  - [Vue.js devtools](https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools/)
  - [在 Firefox DevTools 中启用自定义对象格式化程序](https://fxdx.dev/firefox-devtools-custom-object-formatters/)

## 免责声明

⚠️ 数据来源于阿里云 API，仅供可视化展示，不作为行政区划依据。

## 许可证

MIT License