如何将 Leaflet 集成到 Angular 5 中答案

【问题标题】：How to integrate Leaflet into Angular 5如何将 Leaflet 集成到 Angular 5 中
【发布时间】：2018-03-16 03:24:17
【问题描述】：

我有标准的 Angular 5 构建，我正在尝试包含一个 Leaflet 地图。当我遵循它时，文档给了我一个错误。我正在尝试通过 NPM 导入 Leaflet 并包含它，但我找不到文档。

我知道我需要 CSS、ID 标签和导入...

我已将“传单”下载到我的“node_modules 文件夹”中。

现在呢？我需要放入“app.module.ts”文件的 Leaflet 模块的导入代码是什么？

【问题讨论】：

标签： leaflet angular5

【解决方案1】：

首先，为了更好的开发，通过 npm @types/leaflet 安装以获取应用程序中的传单类型。之后，您需要创建具有Map 属性的组件（从leaflet 导入）并使用工厂函数map（也从leaflet 导入）。大多数示例显示使用id 进行配置，但您可以传递HTMLElement。

constructor(private element: ElementRef) {}

ngAfterViewInit() {
  this.map = map(this.element.nativeElement, {...options})
}

此时，我使用组件开发库以将传单与 Angular 5 集成。第一个稳定版将在下周发布，但我在 npm here 上发布了第一个 beta 版。

【讨论】：

这对在我的 app.module.ts 文件中使用有很大帮助： import { Map} from 'leaflet 我还需要了解我的 compenent.ts 文件的以下内容： import * as L from '传单';谢谢。
在您的 component.ts 中，您也可以通过 import {} from Leaflet 导入您想要的内容，而不是 import all as L。