基于 Leaflet 地图库的强大线条、多边形、圆形、矩形等绘制插件Leaflet-Geoman

diygwcom

于 2025-05-17 15:57:01 发布

阅读量732

点赞数 13

文章标签： leaflet

本文链接：https://blog.csdn.net/luck332/article/details/148029509

版权

介绍

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-Geoman
    map.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-geomanhttps://github.com/geoman-io/leaflet-geoman