@ bluehalo/ngx-leaflet-marker 分组

扩展为 Angular.io 的 @ bluehalo/ngx-leaflet 包 为Angular.io项目提供传单。 与Leaflet v1.x和传单相兼容. marker cluster v1.x 支持Angular v17和Ivy,并在基于Angular-CLI的项目中使用

目录

• 安装
• 使用量
• 贡献
• 许可证

安装

通过 npm 安装软件包及其对等依赖性 :

npm install leaflet @bluehalo/ngx-leaflet
npm install leaflet.markercluster @bluehalo/ngx-leaflet-markercluster

如果您打算在打字计划中使用此库( 使用打字), 您还需要通过 npm 安装传单打字:

npm install @types/leaflet @types/leaflet.markercluster

使用量

此插件用于此 Angular.io 叶片插件。 。 。 .

第一步是遵循指示. 接下来,遵循类似的进程安装和配置此插件. 这些步骤一般是:

• 安装此软件包及其依赖性(见上文).
• 导入传单. marker 集群样式表(即 , node_modules/leaflet.markercluster/dist/MarkerCluster.Default.css 财务报告和审定财务报表 .../MarkerCluster.css )).
  • 遵循与文件记录相同的程序 @bluehalo/ngx-leaflet。 。 。 .
• 导入 LeafletMarkerClusterModule 输入您的角应用模块和本地模块(如果适用).
• 创建和配置地图(见下文和/或演示文件)

要创建地图,请使用 leaflet 属性指令。 此指令必须先出. 您必须通过 leafletOptions 或通过约束 leafletZoom, (中文(简体) ), leafletCenter,以及 leafletLayers。 。 。 .

<div style="height: 400px;"
     leaflet
     [leafletOptions]="options"
     [leafletMarkerCluster]="markerClusterData"
     [leafletMarkerClusterOptions]="markerClusterOptions">
</div>

最后,要初始化并配置传单标记集群插件,使用以下属性指令: 1

小册子《Marker分类》

此属性是启动标记集群插件并绑定标记数据的属性指令.

小册子MarkerCluster 选项

对创建时直接传递到标记集群插件的选项输入绑定. 这些选项目前仅在创建时处理.

选项对象传递到传单.marker集群对象. 因此,你可以参考 他们的文档 用于帮助配置此插件.

获取标记图层的引用

有一个可选的输出事件发送器将曝光名为插件使用的标记集群组 leafletMarkerClusterReady。 。 。 . 见以下例子:

<div style="height: 400px;"
     leaflet
     [leafletOptions]="options"
     [leafletMarkerCluster]="markerClusterData"
     [leafletMarkerClusterOptions]="markerClusterOptions"
     (leafletMarkerClusterReady)="markerClusterReady($event)">
</div>

markerClusterReady(markerCluster: L.MarkerClusterGroup) {
    // Do stuff with group
}

贡献

公关接受。 如果你是BlueHalo的一部分,请在图上贡献 develop 树枝。 如果你在BlueHalo外,请 叉我们的回购做贡献.

许可证

详情见LICENSE.