AI编程案例：基于 Vue3 + Leaflet 开发的中国省市两级地理数据可视化系统

WebGIS开发2026-01-30 8:22

本文展示是是新中地学员使用AI编程制作的**"基于 Vue3 + Leaflet 开发的中国省市两级地理数据可视化系统"**，支持地图展示、搜索定位、图层控制等功能。

功能特性

多层级地图展示
- 省级边界展示
- 市级边界展示
- 地级市驻点标注
交互功能
- 地区搜索与快速定位
- 地图缩放和平移
- 点击区域显示详细信息

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

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

技术栈

项目结构

复制代码

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

快速开始

安装依赖

复制代码

pnpm install

开发模式

复制代码

pnpm dev

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

生产构建

复制代码

pnpm build

使用说明

搜索功能

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

图层控制

右侧图层控制面板可以：

地图工具

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

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

数据源
- 阿里云 DataV.GeoAtlas
前端框架: Vue 3
构建工具: Vite
地图引擎: Leaflet
绘图插件: Leaflet Draw
包管理器: pnpm
单独切换各图层的显示状态
查看当前缩放级别
一键开启/关闭所有图层
重置：将地图重置到初始位置和缩放级别
测量：开启/关闭距离测量工具
全屏：切换全屏模式
截图：保存当前地图截图