@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 下发布 .
目录
安装
通过 npm(或纱线) 安装软件包及其对等依赖性 :
npm install leaflet
npm install leaflet-draw
npm install @asymmetrik/ngx-leaflet
npm install @asymmetrik/ngx-leaflet-draw
注:我见过一些与 [email protected] 财务报告和审定财务报表 1.0.4。 。 。 .
具体地说,标签锚和绘图矩似乎并不正确.
如果你有问题, [email protected] 似乎是没有这些问题的最新发行.
如果您打算在打字计划中使用此库( 使用打字), 您还需要通过 npm 安装传单打字:
npm install --save-dev @types/leaflet
npm install --save-dev @types/leaflet-draw
如果您想要运行演示, 克隆寄存器, 执行 npm install, (中文(简体) ), npm run demo 接着去 http://localhost:4200 (英语)。 。 。 .
使用量
要使用这个库,需要经过的几个设置步骤,根据你的应用环境(如Webpack,ngCli,SystemJS等)而有所不同. 这些步骤一般是:
- 遵循安装和配置指令 @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 (英语) 读取
导入代码依赖和模块
这个项目使用UMD输出,包括打字. 所以,你不应该做 任何特殊的事情来使用它 如果你正在构建你的项目 在Typescript.
Typescription Angular.io 模块导入
在使用您 Angular.io app中的模块之前,您需要在应用程序中导入. 注意您还需要导入 ngx- leaflet 模块 .
比如说,你 app.module.ts,添加:
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。 。 。 .
<div leaflet style="height: 400px;"
leafletDraw
[leafletOptions]="options"
[leafletDrawOptions]="drawOptions"
(leafletDrawCreated)="onDrawCreated($event)">
<div [leafletLayer]="drawnItems"></div>
</div>
要启用编辑, 您需要添加一个 featureGroup 到地图上,然后将特性组与 drawOptions。 。 。 .
此外,您还需要在功能组合中添加层,因为此功能将不再自动发生.
这两种变化都是新的 @asymmetrik/ngx-leaflet-draw@6,用于匹配默认的Leaflet Draw行为.
drawnItems: FeatureGroup = featureGroup();
drawOptions = {
edit: {
featureGroup: this.drawnItems
}
};
public onDrawCreated(e: any) {
this.drawnItems.addLayer((e as DrawEvents.Created).layer);
}
传单
这是一个启动传单绘图插件的属性指令 .
传单
输入绑定, 用于创建时将选项传递到绘图插件 . 这些选项目前仅在创建时处理.
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对象. 因此,你可以参考 他们的文档 用于帮助配置绘图控制.
小册子 Draw 本地
复制到此对象 L.drawLocal 设置本地化选项.
这些设置仅在创建时间被应用.
drawLocal: any = {
draw: {
toolbar: {
buttons: {
polygon: 'Draw an awesome polygon!'
}
}
}
};
绘制事件
这个散页画插件会曝光 L.Draw.Events 发现于 传单绘图文档。 。 。 .
举例来说,看看演示.
提供了下列活动:
(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指令内创建时,此输出会释放一次 . 该事件只有在控制器存在并且可以被操纵时才会开火.
<div leaflet
leafletDraw
[leafletOptions]="options"
[leafletDrawOptions]="drawOptions"
(leafletDrawReady)="onDrawReady($event)">
</div>
onDrawReady(drawControl: Draw.Control) {
// Do stuff with map
}
如果你在自己的组件内使用Leaflet指令,这种获取绘图控制的方法最有意义 只需要添加一些有限的功能或者注册一些事件处理器.
插入叶片DrawDirective 到您的组件
在Angular.io中,指令的注入方式与Services相同.
这意味着您可以创建自己的组件或指令并注入 LeafletDrawDirective 进入它.
只有当您的自定义组件/方向存在于相同的 DOM 元素上,并在被注入的 LeafletDrawDirective 后命令使用,或者在孩子的 DOM 元素上命令使用,此操作才会有效 .
<!-- On the same DOM element -->
<div leaflet leafletDraw myCustomDirective>
</div>
<!-- On a child DOM element -->
<div leaflet leafletDraw>
<div myCustomDirective></div>
</div>
@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
}
}
}
这个方法的好处是,如果你有兴趣在现有的活页绘图指令中添加一些可重复使用的能力,那就有点干净了.
显示并隐藏绘图控制
如果要切换抽取控件打开和关闭,可以使用以下方法:
<button (click)="shown = !shown">Show/Hide Control</button>
<div leaflet style="height: 400px;"
[leafletOptions]="options">
<div *ngIf="shown"
leafletDraw
[leafletDrawOptions]="drawOptions"></div>
</div>
您可以将传单Draw指令放置在子元素上, 然后使用 *ng 如果从地图上添加/删除绘图控制 . Ng 如果评价为虚假,则从地图上去掉孩子元素,从而破坏控制. 当它评价为真实时,会将孩子元素添加到地图中,重新创建控制.
关于标记的说明
如果您正在使用 Angular CLI 或 Webpack 来包装您的工程, 您需要配置标记图标, 如 leafletDrawOptions 上文的例子.
这个问题与Leaflet如何处理图标图像加载有关.
关于如何设置的更详细情况,请参考来自 @asymmetrik/ngx-leaflet (英语)。 。 。 .
贡献
公关接受。 如果你是Asymmetrik的一部分, 请在功能分支上贡献 develop 树枝.
如果你在Asymmetrik之外, 请叉我们的回购 做出贡献和提交PR反对 develop。 。 。 .
许可证
详情见LICENSE.