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

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

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

功能特性

• 多层级地图展示

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

• 交互功能

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

• 图层控制

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

• 地图工具

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

• 数据源

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

使用说明

搜索功能

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

图层控制

右侧图层控制面板可以：

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

地图工具

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

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

想了解更多阶段性考核成果，系统学习GIS开发。

扫码添加新中地客服微信了解更多详细信息⬇️