Leaflet.draw 开源项目教程

2026-01-16 09:43:07作者：胡易黎Nicole

Vector drawing and editing plugin for Leaflet

项目地址：https://gitcode.com/gh_mirrors/le/Leaflet.draw

项目介绍

Leaflet.draw 是一个开源的 JavaScript 库，用于在 Leaflet 地图上添加绘图功能。它允许用户在地图上绘制多边形、矩形、圆形、折线等矢量图形，并支持编辑和删除这些图形。Leaflet.draw 的设计目标是既易于终端用户使用，也便于开发者集成。

项目快速启动

安装

首先，克隆项目仓库到本地：

git clone https://github.com/Leaflet/Leaflet.draw.git

然后，进入项目目录并安装依赖：

cd Leaflet.draw
npm install

示例代码

以下是一个简单的示例，展示如何在 Leaflet 地图上启用绘图功能：

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
    <link rel="stylesheet" href="https://unpkg.com/leaflet-draw/dist/leaflet.draw.css" />
    <style>
        #map {
            height: 600px;
        }
    </style>
</head>
<body>
    <div id="map"></div>
    <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
    <script src="https://unpkg.com/leaflet-draw/dist/leaflet.draw.js"></script>
    <script>
        var map = L.map('map').setView([51.505, -0.09], 13);

        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '© OpenStreetMap contributors'
        }).addTo(map);

        var drawnItems = new L.FeatureGroup();
        map.addLayer(drawnItems);

        var drawControl = new L.Control.Draw({
            draw: {
                polyline: true,
                polygon: true,
                rectangle: true,
                circle: true,
                marker: true
            },
            edit: {
                featureGroup: drawnItems
            }
        });
        map.addControl(drawControl);

        map.on(L.Draw.Event.CREATED, function (event) {
            var layer = event.layer;
            drawnItems.addLayer(layer);
        });
    </script>
</body>
</html>

应用案例和最佳实践

应用案例

地理信息系统 (GIS)：Leaflet.draw 可以用于创建和编辑地理数据，适用于城市规划、环境监测等领域。
在线地图编辑器：用户可以在地图上绘制路径、区域等，适用于旅游规划、户外活动等场景。

最佳实践

自定义样式：通过设置 shapeOptions 属性，可以自定义绘制图形的样式，使其与地图主题相匹配。
事件处理：利用 Leaflet.draw 提供的事件系统，可以在图形创建、编辑或删除时执行自定义操作。

典型生态项目

Leaflet.draw 作为 Leaflet 生态系统的一部分，与其他 Leaflet 插件和工具配合使用，可以扩展其功能：

Leaflet.markercluster：用于聚合大量标记，提高地图性能。
Leaflet.heat：用于创建热力图，展示数据分布。
Leaflet.pm：提供更高级的绘图和编辑功能。

通过这些生态项目的结合使用，可以构建功能丰富、交互性强的地图应用。

Vector drawing and editing plugin for Leaflet

项目地址：https://gitcode.com/gh_mirrors/le/Leaflet.draw

登录后查看全文

热门内容推荐

1 【亲测免费】开源项目 `build-your-own-x` 使用指南 2 【亲测免费】探索科技之旅：《Build Your Own X》项目详解 3 GitHub_Trending/bu/build-your-own-x自动化：CI/CD流程在自制项目中的应用 4 从零打造智能家居系统：用build-your-own-x实现家庭自动化

最新内容推荐

Degrees of Lewdity中文汉化终极指南：零基础玩家必看的完整教程 Unity游戏翻译神器：XUnity Auto Translator 完整使用指南 PythonWin7终极指南：在Windows 7上轻松安装Python 3.9+终极macOS键盘定制指南：用Karabiner-Elements提升10倍效率 Pandas数据分析实战指南：从零基础到数据处理高手 Qwen3-235B-FP8震撼升级：256K上下文+22B激活参数 7步搞定机械键盘PCB设计：从零开始打造你的专属键盘终极WeMod专业版解锁指南：3步免费获取完整高级功能 DeepSeek-R1-Distill-Qwen-32B技术揭秘：小模型如何实现大模型性能突破音频修复终极指南：让每一段受损声音重获新生

项目优选

收起

deepin linux kernel

OpenHarmony documentation | OpenHarmony开发者文档

Nop Platform 2.0是基于可逆计算理论实现的采用面向语言编程范式的新一代低代码开发平台，包含基于全新原理从零开始研发的GraphQL引擎、ORM引擎、工作流引擎、报表引擎、规则引擎、批处理引引擎等完整设计。nop-entropy是它的后端部分，采用java语言实现，可选择集成Spring框架或者Quarkus框架。中小企业可以免费商用

🔥LeetCode solutions in any programming language | 多种编程语言实现 LeetCode、《剑指 Offer（第 2 版）》、《程序员面试金典（第 6 版）》题解

flutter_flutter

Ascend Extension for PyTorch

本项目是CANN提供的数学类基础计算算子库，实现网络在NPU上加速计算。

喝着茶写代码！最易用的自托管一站式代码托管平台，包含Git托管，代码审查，团队协作，软件包和CI/CD。

ohos_react_native

React Native鸿蒙化仓库

openEuler内核是openEuler操作系统的核心，既是系统性能与稳定性的基石，也是连接处理器、设备与服务的桥梁。