# 地图绘制与编辑工具

**Repository Path**: hgh2002/map-drawing-and-editing-tools

## Basic Information

- **Project Name**: 地图绘制与编辑工具
- **Description**: 这是一个基于 Leaflet.js 开发的地图绘制与编辑工具，支持天地图和图片两种模式加载底图，可绘制多边形、矩形等几何图形，能对图形进行名称、颜色等属性编辑，通过元素列表管理图形，并可将绘制内容导出为 PDF，适用于农业规划、土地管理等场景，界面采用左右分栏布局，左侧为编辑栏，右侧为地图显示区，操作便捷且功能实用。
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2025-07-06
- **Last Updated**: 2025-08-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 地块绘制工具 README.md  

## 项目概述  
这是一个基于Leaflet.js开发的地块绘制与编辑工具，支持在地图上绘制多边形、矩形、圆形等几何图形，并可编辑图形的名称、类型、面积等属性，适用于农业用地规划、土地资源管理等场景。工具界面简洁，集成天地图加载功能，支持图形元素的创建、管理及样式自定义。  


## 核心功能  
1. **地图底图加载**  
   - 支持天地图服务（需输入天地图密钥），可加载在线地图作为底图。  
2. **图形绘制能力**  
   - 提供多边形、矩形、线段、圆形等几何图形的绘制功能。  
3. **属性编辑与管理**  
   - 可设置地块名称、类型、面积等基础属性，自定义描边颜色、背景颜色、文字样式等。  
   - 通过“元素列表”管理所有绘制的图形，支持添加与删除操作。  


## 技术实现  
- **前端框架**：原生HTML + CSS + JavaScript。  
- **地图库**：Leaflet.js（开源交互式地图库）。  
- **扩展插件**：Leaflet.Draw（提供绘图功能）。  


## 使用说明  
1. **天地图配置**  
   - 在“天地图密钥”输入框中填入天地图开发者密钥，加载在线地图底图。  
2. **图形绘制**  
   - 点击右侧绘图控件（如“Draw a polygon”），在地图上拖动鼠标绘制图形。  
3. **属性编辑**  
   - 选中图形后，在左侧“元素属性”区域修改名称、类型、面积等信息，调整颜色与样式。  
4. **元素管理**  
   - 通过“元素列表”查看所有图形，点击“+”添加新元素，“−”删除选中元素。  


## 部署与运行  
- **访问地址**：https://hgh-leaflet.surge.sh/%E5%9C%B0%E5%9D%97%E7%BB%98%E5%88%B6.html  
- **本地使用**：直接在浏览器中打开HTML文件，无需服务器部署。  


## 注意事项  
- 天地图密钥需自行申请（天地图官网注册获取），未填入密钥时无法加载在线地图。  
- 图形绘制功能依赖Leaflet.Draw插件，需确保网络连接正常以加载外部资源。  


## 未来优化方向  
- 增加图形测量（面积、周长）实时计算功能。  
- 支持图形导出为KML、GeoJSON等格式。  
- 优化移动端交互体验，适配触屏操作。

## 项目截图
![项目截图](image.png)