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

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

项目概述

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

技术栈

项目结构

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
• 功能: 简单地图展示测试

地图编辑器功能详解

绘制工具

编辑工具

图层切换

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

API说明

智能问答API

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

地图服务API

使用高德地图瓦片服务：

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

配置说明

路由配置

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

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地图样式引入
• 自定义组件样式

运行说明

环境要求

开发模式

npm install
npm run dev

生产构建

npm run build

预览构建结果

npm run preview

已知问题与解决方案

圆形编辑问题

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

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

矩形绘制问题

问题: 绘制矩形时tooltip报错

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

兼容性问题

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

更新日志

v1.0.0

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

许可证

MIT License