# @asymmetrik/ngx-leaflet-draw 中文文档
规范地址：https://npmcn.com/package/%40asymmetrik/ngx-leaflet-draw/
版本：18\.0\.0
npm 元数据更新时间：2026-03-13T16:28:34.156Z
中文译文更新时间：2026-11-07T01:33:28.290Z
软件包许可：MIT
本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。
原始 npm 页面：https://www.npmjs.com/package/%40asymmetrik/ngx-leaflet-draw
原文对照：https://npmcn.com/package/%40asymmetrik/ngx-leaflet-draw/?lang=original
项目主页：https://github.com/bluehalo/ngx-leaflet-draw#readme
源码仓库：https://github.com/bluehalo/ngx-leaflet-draw
弃用说明：Packaged moved to @bluehalo/ngx-leaflet-draw for all future versions, including minor and patch releases\.
## 关键信息（来自 npm 元数据）
- 包体积（解压后）：70.3 kB，16 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：1 个
- peer 依赖：leaflet 1，leaflet-draw 1，@angular/core 18，@angular/common 18，@asymmetrik/ngx-leaflet 18
- 首次发布：2017-08-28T16:48:47.660Z
- 最新版本发布：2024-06-03T19:40:31.479Z
- 近 30 天下载量：8810（2026-10-07 至 2026-11-05，npm 官方下载统计）
- 已发布版本数：26（近 12 个月 0 个）
## 中文简介
Leaflet Draw 插件的 Angular.io 组件
## 安装
```sh
npm install @asymmetrik/ngx-leaflet-draw
```
也可以使用：`pnpm add @asymmetrik/ngx-leaflet-draw`、`yarn add @asymmetrik/ngx-leaflet-draw`、`bun add @asymmetrik/ngx-leaflet-draw`
## README
# @asymmetrik/ngx-leaflet-draw (英语)
[](https://travis-ci.org/Asymmetrik/ngx-leaflet-draw/)
> Leaflet Draw 扩展到 Angular.io 的 @asymmetrik/ngx-leaflet 包 提供Leaflet Draw集成于Angular.io项目. 与 Leaflet v1.x 和 Leaflet Draw 1.x 兼容
> 现在支持Angular v18, 并在基于Angular- CLI的项目中使用 鉴于Leaflet.draw项目缺少活动,我们不太可能将这个插件扩展至Angular升级以外的功能.
> 注: 这是此库的最后一个版本, 将在命名空间 @asymmetrik 下发布 。 此软件包和未来软件包将在 @ bluehalo namespace 下发布 .
## 目录
- [安装](https://npmcn.com/package/%40asymmetrik/ngx-leaflet-draw/#readme-install)
- [使用量](https://npmcn.com/package/%40asymmetrik/ngx-leaflet-draw/#readme-usage)
- [API 密码](https://npmcn.com/package/%40asymmetrik/ngx-leaflet-draw/#readme-api)
- [贡献](https://npmcn.com/package/%40asymmetrik/ngx-leaflet-draw/#readme-contribute)
- [许可证](https://npmcn.com/package/%40asymmetrik/ngx-leaflet-draw/#readme-license)
- [贷项](https://npmcn.com/package/%40asymmetrik/ngx-leaflet-draw/#readme-credits)
## 安装
通过 npm(或纱线) 安装软件包及其对等依赖性 :
```shell
npm install leaflet
npm install leaflet-draw
npm install @asymmetrik/ngx-leaflet
npm install @asymmetrik/ngx-leaflet-draw
```
注:我见过一些与 `leaflet-draw@1.0.3` 财务报告和审定财务报表 `1.0.4`。 。 。 . 具体地说,标签锚和绘图矩似乎并不正确. 如果你有问题, `leaflet-draw@1.0.2` 似乎是没有这些问题的最新发行.
如果您打算在打字计划中使用此库( 使用打字), 您还需要通过 npm 安装传单打字:
```shell
npm install --save-dev @types/leaflet
npm install --save-dev @types/leaflet-draw
```
如果您想要运行演示, 克隆寄存器, 执行 `npm install`, (中文(简体) ), `npm run demo` 接着去 [http://localhost:4200 (英语)](http://localhost:4200/)。 。 。 .
## 使用量
要使用这个库,需要经过的几个设置步骤,根据你的应用环境(如Webpack,ngCli,SystemJS等)而有所不同. 这些步骤一般是:
- 遵循安装和配置指令 [@asymmetrik/ngx-leaflet (英语)](https://github.com/Asymmetrik/ngx-leaflet)
- 安装此库并安装 Leaflet- draw 打字(见上文) .
- 导入叶片和叶片绘制样式表
- 将 ngx- leaflet 和 ngx- leaflet- draw 模块导入到您的 Angular 项目
- 创建和配置地图(见下文和/或演示文件)
### 导入叶片样式表
要使用传单,请将传单样式表加载到您的应用程序中. 如果你已经通过npm安装, 你需要加载 `./node_modules/leaflet/dist/leaflet.css` 财务报告和审定财务报表 `./node_modules/leaflet-draw/dist/leaflet.draw.css`。 。 。 . 如何包含样式表将取决于您的特定设置 。 例子请参见: [@asymmetrik/ngx-leaflet (英语)](https://github.com/Asymmetrik/ngx-leaflet) 读取
### 导入代码依赖和模块
这个项目使用UMD输出,包括打字. 所以,你不应该做 任何特殊的事情来使用它 如果你正在构建你的项目 在Typescript.
#### Typescription Angular.io 模块导入
在使用您 Angular.io app中的模块之前,您需要在应用程序中导入. 注意您还需要导入 ngx- leaflet 模块 .
比如说,你 `app.module.ts`,添加:
```js
import { LeafletModule } from '@asymmetrik/ngx-leaflet';
import { LeafletDrawModule } from '@asymmetrik/ngx-leaflet-draw';
...
imports: [
...
LeafletModule,
LeafletDrawModule
]
...
```
#### 不使用打字符吗 ?
你勇敢的灵魂. 代码使用 UMD( bundles 在 ./ dist dir 中) 导出, 因此您应该能够导入使用您正在使用的任意模块系统/ 构建器, 即使您没有使用 Typescript .
### 创建和配置带有绘图控件的地图
要创建地图,请使用 `leaflet` 属性指令。 此指令必须先出. 您必须通过 `leafletOptions` 或通过约束 `leafletZoom`, (中文(简体) ), `leafletCenter`,以及 `leafletLayers`。 。 。 . 最后,添加: `leafletDraw` 属性指令,用于添加传单绘图控制并配置其中 `leafletDrawOptions`。 。 。 .
```html
```
要启用编辑, 您需要添加一个 `featureGroup` 到地图上,然后将特性组与 `drawOptions`。 。 。 . 此外,您还需要在功能组合中添加层,因为此功能将不再自动发生. 这两种变化都是新的 `@asymmetrik/ngx-leaflet-draw@6`,用于匹配默认的Leaflet Draw行为.
```js
drawnItems: FeatureGroup = featureGroup();
drawOptions = {
edit: {
featureGroup: this.drawnItems
}
};
public onDrawCreated(e: any) {
this.drawnItems.addLayer((e as DrawEvents.Created).layer);
}
```
#### 传单
这是一个启动传单绘图插件的属性指令 .
#### 传单
输入绑定, 用于创建时将选项传递到绘图插件 . 这些选项目前仅在创建时处理.
```js
drawOptions = {
position: 'topright',
draw: {
marker: {
icon: L.icon({
iconSize: [ 25, 41 ],
iconAnchor: [ 13, 41 ],
iconUrl: '2b3e1faf89f94a4835397e7a43b4f77d.png',
iconRetinaUrl: '680f69f3c2e6b90c1812a813edf67fd7.png',
shadowUrl: 'a0c6cc1401c107b501efee6477816891.png'
})
},
polyline: false,
circle: {
shapeOptions: {
color: '#d4af37'
}
},
rectangle: {
shapeOptions: {
color: '#85bb65'
}
}
},
edit: {
featureGroup: this.drawnItems
}
};
```
选项对象传递到Leaflet.draw对象. 因此,你可以参考 [他们的文档](https://github.com/Leaflet/Leaflet.draw) 用于帮助配置绘图控制.
#### 小册子 Draw 本地
复制到此对象 `L.drawLocal` 设置本地化选项. 这些设置仅在创建时间被应用.
```js
drawLocal: any = {
draw: {
toolbar: {
buttons: {
polygon: 'Draw an awesome polygon!'
}
}
}
};
```
### 绘制事件
这个散页画插件会曝光 `L.Draw.Event`s 发现于 [传单绘图文档](http://leaflet.github.io/Leaflet.draw/docs/leaflet-draw-latest.html#l-draw-event)。 。 。 . 举例来说,看看演示.
提供了下列活动:
- `(leafletDrawCreated)`
- `(leafletDrawEdited)`
- `(leafletDrawDeleted)`
- `(leafletDrawStart)`
- `(leafletDrawStop)`
- `(leafletDrawVertex)`
- `(leafletDrawEditStart)`
- `(leafletDrawEditMove)`
- `(leafletDrawEditResize)`
- `(leafletDrawEditVertex)`
- `(leafletDrawEditStop)`
- `(leafletDrawDeleteStart)`
- `(leafletDrawDeleteStop)`
- `(leafletDrawToolbarOpened)`
- `(leafletDrawToolbarClosed)`
- `(leafletDrawMarkerContext)`
### 获取绘图控件的引用
有时您可能需要直接访问 Leaflet Draw Control 实例 . 例如,以动态改变设置或改变其行为. 实现这一点有几种不同的方法,这取决于你所要做的事情.
最简单和最灵活的方式是使用输出绑定 `leafletDrawReady`。 。 。 . 此输出在地图创建后被引用, 事件的参数是 `Control.Draw` 举个例子.
第二是参考传单的图示本身,有几种方法可以做到这一点. 关于指令,你可以援引 `getDrawControl()` 函数以获取引用 `Control.Draw` 举个例子.
#### 传单
当Leaflet Draw Control最初在Leaflet Draw指令内创建时,此输出会释放一次 . 该事件只有在控制器存在并且可以被操纵时才会开火.
```html
```
```js
onDrawReady(drawControl: Draw.Control) {
// Do stuff with map
}
```
如果你在自己的组件内使用Leaflet指令,这种获取绘图控制的方法最有意义 只需要添加一些有限的功能或者注册一些事件处理器.
#### 插入叶片DrawDirective 到您的组件
在Angular.io中,指令的注入方式与Services相同. 这意味着您可以创建自己的组件或指令并注入 `LeafletDrawDirective` 进入它. 只有当您的自定义组件/方向存在于相同的 DOM 元素上,并在被注入的 LeafletDrawDirective 后命令使用,或者在孩子的 DOM 元素上命令使用,此操作才会有效 .
```html
```
```js
@Directive({
selector: '[myCustomDirective]'
})
export class MyCustomDirective {
leafletDrawDirective: LeafletDrawDirective;
constructor(leafletDrawDirective: LeafletDrawDirective) {
this.leafletDrawDirective = leafletDrawDirective;
}
someFunction() {
if (null != this.leafletDrawDirective.getDrawControl()) {
// Do stuff with the draw control
}
}
}
```
这个方法的好处是,如果你有兴趣在现有的活页绘图指令中添加一些可重复使用的能力,那就有点干净了.
### 显示并隐藏绘图控制
如果要切换抽取控件打开和关闭,可以使用以下方法:
```html
```
您可以将传单Draw指令放置在子元素上, 然后使用 \*ng 如果从地图上添加/删除绘图控制 . Ng 如果评价为虚假,则从地图上去掉孩子元素,从而破坏控制. 当它评价为真实时,会将孩子元素添加到地图中,重新创建控制.
### 关于标记的说明
如果您正在使用 Angular CLI 或 Webpack 来包装您的工程, 您需要配置标记图标, 如 `leafletDrawOptions` 上文的例子. 这个问题与Leaflet如何处理图标图像加载有关. 关于如何设置的更详细情况,请参考来自 [@asymmetrik/ngx-leaflet (英语)](https://github.com/Asymmetrik/ngx-leaflet#a-note-about-markers)。 。 。 .
## 贡献
公关接受。 如果你是Asymmetrik的一部分, 请在功能分支上贡献 `develop` 树枝. 如果你在Asymmetrik之外, 请叉我们的回购 做出贡献和提交PR反对 `develop`。 。 。 .
## 许可证
详情见LICENSE.
## 贷项
**[传单](http://leafletjs.com/)** 是一个很棒的地图包. **[叶子. draw](https://github.com/Leaflet/Leaflet.draw)** 使得地图上的画形变得非常容易.
## 常见问题
### @asymmetrik/ngx-leaflet-draw 是什么？
Leaflet Draw 插件的 Angular\.io 组件注意：该包已被作者标记为弃用——Packaged moved to @bluehalo/ngx-leaflet-draw for all future versions, including minor and patch releases\.
### 如何安装 @asymmetrik/ngx-leaflet-draw？
在项目目录运行 npm install @asymmetrik/ngx-leaflet-draw，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：leaflet（1）、leaflet-draw（1）、@angular/core（18）、@angular/common（18）、@asymmetrik/ngx-leaflet（18）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。
### @asymmetrik/ngx-leaflet-draw 支持 TypeScript 吗？
支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。
### @asymmetrik/ngx-leaflet-draw 支持 ESM 还是 CommonJS？
以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。
### @asymmetrik/ngx-leaflet-draw 可以商用吗？
@asymmetrik/ngx-leaflet-draw 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。
### @asymmetrik/ngx-leaflet-draw 的下载量有多少？
根据 npm 官方下载统计，@asymmetrik/ngx-leaflet-draw 在 2026/10/07 – 2026/11/05 这 30 天内被下载 8,810 次，日均约 294 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。
### @asymmetrik/ngx-leaflet-draw 还在维护吗？
最新版本 18\.0\.0 发布于 2024/06/04（2 年前）；至今共发布 26 个版本，其中过去 12 个月发布了 0 个；首次发布于 2017/08/29。作者已将其标记为弃用，新项目建议寻找替代方案。