@bluehalo/ngx-leaflet-draw(英语:
Leaflet Draw 扩展到 Angular.io 的 @ bluehalo/ngx-leaflet 包 提供Leaflet Draw集成于Angular.io项目. 与 Leaflet v1.x 和 Leaflet Draw 1.x 兼容
目录
安装
通过 npm(或纱线) 安装软件包及其对等依赖性 :
npm install leaflet
npm install [email protected]
npm install @bluehalo/ngx-leaflet
npm install @bluehalo/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 (英语)。 。 。 .
使用量
这些步骤一般是:
- 安装和配置 @bluehalo/ngx-leaflet(英语:
- 安装此库并安装 Leaflet- draw 打字(见上文) .
- 导入叶片和叶片绘制样式表
- 导入
LeafletModule财务报告和审定财务报表LeafletDraw输入您的角工程 - 创建和配置地图(见下文和/或演示文件)
导入叶片样式表
要使用传单,请将传单样式表加载到您的应用程序中.
如果你通过npm安装, 你需要加载两者 ./node_modules/leaflet/dist/leaflet.css 财务报告和审定财务报表 ./node_modules/leaflet-draw/dist/leaflet.draw.css。 。 。 .
如何包含样式表将取决于您的特定设置 。 例子请参见: @bluehalo/ngx-leaflet(英语: 读取.
如果您正在使用 Angular CLI, 您需要将 CSS 文件添加到包含在其中的样式数组中 angular.json数字 :
{
...
"styles": [
"styles.css",
"./node_modules/leaflet/dist/leaflet.css",
"./node_modules/leaflet-draw/dist/leaflet.draw.css"
],
...
}
导入叶片模块和叶片Draw模块
在可以使用您 Angular.io app中的Leaflet 组件之前,您需要在应用程序中导入. 根据您是否使用独立模式, 您将导入您的模块和/ 或组件 .
import { LeafletDirective, LeafletLayerDirective } from '@bluehalo/ngx-leaflet';
import { LeafletDrawDirective } from '@bluehalo/ngx-leaflet-draw';
@Component({
imports: [
//...
LeafletDirective,
LeafletLayerDirective,
LeafletDrawDirective
]
})
创建和配置带有绘图控件的地图
要创建地图,请使用 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。 。 。 .
此外,您还需要在功能组合中添加层,因为此功能将不再自动发生.
这两种变化都是新的 @bluehalo/ngx-leaflet-draw@6,用于匹配默认的Leaflet Draw行为.
import { DrawEvents, FeatureGroup, featureGroup, icon } from 'leaflet';
drawnItems: FeatureGroup = featureGroup();
drawOptions = {
draw: {
marker: {
icon: icon({
iconSize: [ 25, 41 ],
iconAnchor: [ 13, 41 ],
iconUrl: 'assets/leaflet/marker-icon.png',
iconRetinaUrl: 'assets/leaflet/marker-icon-2x.png',
shadowUrl: 'assets/leaflet/marker-shadow.png'
})
}
},
edit: {
featureGroup: this.drawnItems
}
};
public onDrawCreated(e: any) {
this.drawnItems.addLayer((e as DrawEvents.Created).layer);
}
关于标记的说明
如果您正在使用 Angular CLI 或 Webpack 来包装您的工程, 您需要配置标记图标, 如 drawOptions 上文的例子.
这个问题与Leaflet如何处理图标图像加载有关.
有关如何设置的更详细情况,请参考 标记设置 在 @bluehalo/ngx-leaflet 烹饪簿中提供指南.
API 密码
完整的 API 文档在 文件/API.md它涵盖:
- 指令投入:
leafletDraw, (中文(简体) ),leafletDrawOptions, (中文(简体) ),leafletDrawLocal - 绘制事件——全部 16
L.Draw.Event输出绑定 - 通过
leafletDrawReady或者说LeafletDrawDirective注射
烹饪本
共同模式和实例 文件/教科书.md,包括:
贡献
公关接受。 请对功能分支投稿 并打开一个吸引请求反对 master。 。 。 .
许可证
见 自由主义 详细情况.