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

如果你也想学习同款技能，可在文末获取试听方式。

功能特性

多层级地图展示

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

交互功能

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

图层控制

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

地图工具

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

中国省市两级地理数据展示

省份/直辖市/自治区/特别行政区示例	图层控制选项	数据说明
安徽省、四川省、湖北省、重庆市、浙江省、湖南省、江西省、贵州省、福建省、云南省、广西壮族自治区、广东省、台湾省、澳门特别行政区	省级边界、市级边界、地级市驻点、全部开启	数据来源于阿里云API，仅供可视化展示，不作为行政区划依据

缩放级别与图层生效范围

图层类型	生效缩放范围
省级边界	Zoom 0+
市级边界	Zoom 6+
地级市驻点	Zoom 5+

数据源

阿里云 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

快速开始

安装依赖

pnpm install

开发模式

pnpm dev

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

生产构建

pnpm build

使用说明

搜索功能

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

图层控制

右侧图层控制面板可以：

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

地图工具

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

1. 重置：将地图重置到初始位置和缩放级别
2. 测量：开启/关闭距离测量工具
3. 全屏：切换全屏模式
4. 截图：保存当前地图截图