介绍
leaflet.draw 是一款基于 Leaflet 的 JavaScript 库，用于在地图上绘制各种形状，如点、线、多边形等。它使用方便，具有众多的可配置选项，还可以与其他 Leaflet 插件集成。
本文将详细介绍如何使用 npm 包 leaflet.draw，包括安装、配置和使用，并提供示例代码以帮助您更好地理解。
安装
使用 npm 包管理器安装 leaflet.draw：
--- ------- ------------
配置
要使用 leaflet.draw，需要引入 Leaflet 和 leaflet.draw 的 CSS 和 JavaScript 文件。可以通过以下方式完成：
----- ---------------- ------------------------------------------------------- ---------------------- ---------------- ----- ---------------- ----------------------------------------------------------------- -- ------- ----------------------------------------------------- ---------------------- ------------------------ ------- -------------------------------------------------------------------------
其中，integrity 属性用于验证文件的完整性，可以提高文件下载的安全性。如果您使用的是其他版本的 Leaflet 或 leaflet.draw，请相应地更改链接。
使用
基本用法
在以下示例中，我们将创建一个基本的 Leaflet 地图，并添加一个绘画控件，使用户可以在地图上绘制直线和多边形：
---- -------- -------------- --------------
--------
--- --- - ----------------------------- ------- ----
-- -- ---------
----------------------------------------------------------------- -
------------ -- ------------- -------------
--------------
-- -- -----------
--- ---------- - --- -----------------
-------------------------
--- ----------- - --- ----------------
----- -
------------- ----------
--
----- -
-------- -----
--------- -----
------- ------
---------- ------
------- -----
-
---
----------------------------
-- -- ------------ --
---------------------- -------- --- -
--- ---- - ------------
----- - --------
-- ----- --- --------- -- ---- --- ----------- -
-- ----
---------------- ------ --------- ---
-
---------------------------
---
---------运行结果如下图所示：
以上代码中，我们首先创建了一个 Leaflet 地图，并添加了一个 TileLayer，以显示地图底图。接下来，我们使用 L.Control.Draw 构造函数创建一个绘画控件，并将其添加到地图上。在绘画控件的配置中，我们启用了直线和多边形的绘制功能，并禁用了其他形状的绘制。
为了使用户可以在地图上直接进行绘制操作，我们还需要监听 draw:created 事件。当用户完成绘制操作时，leaflet.draw 将触发此事件，并将新绘制的图形作为参数传递给回调函数。在本示例中，我们将新图形添加到一个名为 drawnItems 的 FeatureGroup 中，并设置其样式。
自定义
leaflet.draw 具有丰富的可配置选项，可以根据您的需求进行个性化定制。以下是一些常用的自定义示例：
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/35260