基于 Leaflet 地图库的强大线条、多边形、圆形、矩形等绘制插件Leaflet-Geoman
介绍
Leaflet-Geoman 是一个基于 Leaflet 地图库的强大插件，专为交互式地图几何形状操作设计，适用于开发者实现地图要素的绘制、编辑和管理。以下是其核心功能和应用场景的详细说明：
核心功能
- 几何要素绘制与编辑
- 支持绘制多种地理要素（如标记、线条、多边形、圆形、矩形等），并允许实时编辑（拖动、缩放、旋转、切割、分割等）。
- 提供吸附（Snap）和固定（Pin）功能，确保几何形状的精确拼接，避免重叠或间隙。
- 高精度与性能优化
- 在超大规模数据集下仍能保持流畅的编辑体验，适合处理复杂地理数据。
- 支持 GeoJSON 格式，便于与其他 GIS 系统集成。
- 自定义与扩展性
- 提供工具栏自定义功能，开发者可根据需求配置工具按钮（如绘制、编辑、删除等）。
- 所有功能均通过公共方法和事件暴露，便于与其他插件或系统集成。
- 多语言支持
- 支持多种语言（包括中文），可通过 setLang 方法切换界面语言。
应用场景
- Web GIS 开发
- 适用于需要地图编辑功能的在线应用，如位置服务、在线地图编辑器、地理数据可视化平台等。
- 地理信息分析
- 支持地理要素的动态标注和编辑，便于进行空间分析和数据采集。
- 教育与培训
- 提供直观的地图操作界面，适用于地理教学或培训场景。
代码示例
以下是一个简单的 Leaflet-Geoman 初始化示例：
<!DOCTYPE html>
<html>
<head><title>Leaflet-Geoman 示例</title><link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" /><link rel="stylesheet" href="https://unpkg.com/@geoman-io/leaflet-geoman-free/dist/leaflet-geoman.css" /><style>#map { height: 500px; }</style>
</head>
<body><div id="map"></div><script src="https://unpkg.com/leaflet/dist/leaflet.js"></script><script src="https://unpkg.com/@geoman-io/leaflet-geoman-free/dist/leaflet-geoman.min.js"></script><script>const map = L.map('map').setView([51.505, -0.09], 13);L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {attribution: 'Map data © OpenStreetMap contributors'}).addTo(map);// 初始化 Leaflet-Geomanmap.pm.addControls({position: 'topleft',drawMarker: true,drawPolyline: true,drawRectangle: true,drawPolygon: true,editMode: true,removalMode: true});map.pm.setLang('zh'); // 设置中文语言</script>
</body>
</html>开源地址：GitHub - geoman-io/leaflet-geoman: 🍂🗺️ The most powerful leaflet plugin for drawing and editing geometry layers🍂🗺️ The most powerful leaflet plugin for drawing and editing geometry layers - geoman-io/leaflet-geoman
https://github.com/geoman-io/leaflet-geoman