vue3基于leaflet.js实现地图编辑功能

leaflet.js地图编辑器项目功能说明文档

项目概述

本项目是基于 Vue3 + Vant + Leaflet 构建的移动端地图编辑器应用，提供地图展示、图形绘制、编辑和导出等功能。

技术栈

技术	版本	说明
Node.js	22.x	运行时环境
Vue	3.x	前端框架
Vant	4.x	移动端UI组件库
Leaflet	1.x	地图渲染库
Leaflet.draw	1.x	地图绘图插件
Vue Router	4.x	路由管理
Vite	4.x	构建工具
Sass	1.x	CSS预处理器

项目结构

复制代码

src/
├── components/          # 组件目录
│   ├── ChatRoom.vue     # 智能问答组件
│   ├── MapEditor.vue    # 地图编辑器主组件
│   ├── MapToolbar.vue   # 地图工具栏组件
│   ├── LayerSwitcher.vue # 图层切换组件
│   ├── GeoJSONModal.vue # GeoJSON模态框组件
│   ├── RectangleTest.vue # 矩形测试组件
│   └── SimpleMap.vue    # 简单地图组件
├── views/               # 视图目录
│   └── Home.vue         # 首页视图
├── router/              # 路由配置
│   └── index.js         # 路由定义
├── App.vue              # 根组件
├── main.js              # 入口文件
└── style.scss           # 全局样式

功能模块

1. 首页导航

路径 : /
功能: 提供各功能模块的入口导航

2. 智能问答

路径 : /chat
功能 :
- 支持图片上传并通过AI识别内容
- 支持文本输入获取AI回答
- 仿豆包智能问答界面风格
- 表情选择功能

3. 地图编辑器

路径 : /map
功能 :
- 地图展示（支持标准地图和卫星地图切换）
- 多种图形绘制：折线、多边形、矩形、圆形、标记点
- 图形编辑：拖动调整大小和位置
- 图形删除
- 数据导出：支持GeoJSON格式导出
- 数据导入：支持GeoJSON格式导入

4. 矩形测试

路径 : /rectangle
功能: 矩形绘制功能测试

5. 测试地图

路径 : /simple-map
功能: 简单地图展示测试

地图编辑器功能详解

绘制工具

工具	图标	功能说明
折线	✏️	绘制多条线段连接的路径
多边形	⬡	绘制封闭的多边形区域
矩形	▢	绘制矩形区域
圆形	○	绘制圆形区域
标记点	📍	在地图上标记点位

编辑工具

工具	功能说明
编辑	激活编辑模式，可拖动调整图形大小和位置
删除	删除选中的图形
保存	将绘制的图形导出为GeoJSON格式
清空	清空所有绘制的图形
回显	导入之前保存的GeoJSON数据

图层切换

标准地图: 显示普通地图视图
卫星地图: 显示卫星影像视图

API说明

智能问答API

使用豆包AI API进行智能问答，支持文本和图片输入。

地图服务API

使用高德地图瓦片服务：

标准地图: https://webrd0{s}.is.autonavi.com/appmaptile
卫星地图: https://webst0{s}.is.autonavi.com/appmaptile

配置说明

路由配置

路由定义在 src/router/index.js：

javascript 复制代码

const routes = [
  { path: '/', name: 'Home', component: Home },
  { path: '/chat', name: 'ChatRoom', component: ChatRoom },
  { path: '/map', name: 'MapEditor', component: MapEditor },
  { path: '/rectangle', name: 'RectangleTest', component: RectangleTest },
  { path: '/simple-map', name: 'SimpleMap', component: SimpleMap }
]

样式配置

全局样式定义在 src/style.scss，包含：

移动端适配配置
Leaflet地图样式引入
自定义组件样式

运行说明

环境要求

环境	版本要求	说明
Node.js	>= 22.0.0	推荐使用 v22.13.1
npm	>= 10.0.0	包管理工具
浏览器	现代浏览器	支持 ES6+ 特性

开发模式

bash 复制代码

npm install
npm run dev

生产构建

bash 复制代码

npm run build

预览构建结果

bash 复制代码

npm run preview

已知问题与解决方案

圆形编辑问题

问题: 编辑圆形时拖动半径，圆大小不更新

解决方案 : 重写 L.Edit.Circle.prototype._resize 方法，使用 requestAnimationFrame 实时更新圆形半径

矩形绘制问题

问题: 绘制矩形时tooltip报错

解决方案: 使用try-catch包装原始方法，失败时返回默认提示

兼容性问题

说明: 建议使用现代浏览器访问，支持移动端触摸操作

更新日志

v1.0.0

项目初始化，基于Vue3 + Vant搭建
集成Leaflet地图编辑器
实现智能问答功能
添加路由功能，拆分功能模块

许可证

MIT License