核心内容摘要
葫芦里藏着什么惊喜？一键解锁，让你欲罢不能！
本文展示是是新中地学员使用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单独切换各图层的显示状态查看当前缩放级别一键开启/关闭所有图层重置将地图重置到初始位置和缩放级别测量开启/关闭距离测量工具全屏切换全屏模式截图保存当前地图截图