如何将传单导入角度项目？

Question

我正在尝试在我的 Angular 项目中使用 leatflet 包，但我无法让它工作。

我安装了 leatfletnpm install leatflet --save然后我在angular.json文件中包含了依赖项：

"styles": [
            "node_modules/leaflet/dist/leaflet.css",
],
"scripts": [
            "node_modules/leaflet/dist/leaflet.js"
],

我的app.component.ts文件：

import { Component, OnInit } from '@angular/core';
import * as L from 'leaflet';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{


  constructor() {}

  ngOnInit() {
    const myMap = L.map('map').setView([51.505, -0.09], 13);
  }

  onAdressSubmit(form) {
    console.log(form.value.adress);
  }
}

在里面app.component.html我有一个id为map的部分。

我看到的只有这个：

有人知道问题出在哪里以及如何解决吗？

帮助将不胜感激。:)

Answer 1

安装以下内容以获得用于 Angular 的 Leaflet：

npm install leaflet
npm install @asymmetrik/ngx-leaflet

并且typings：

npm install --save-dev @types/leaflet

在 Angular CLI .json 中添加以下内容：

• 对于 Angular 5 及以下版本：angular-cli.json
• 对于 Angular 6 及更高版本：angular.json

    {
        ...
        "styles": [
            "styles.css",
            **"./node_modules/leaflet/dist/leaflet.css"**
        ],
        ...
    }

在 app.module.ts 中导入 Leaflet 模块：

import { LeafletModule } from '@asymmetrik/ngx-leaflet';

imports: [
    LeafletModule.forRoot()
]

并创建一个地图：

<div style="height: 300px;"
     leaflet 
     [leafletOptions]="options">
</div>

并配置您的选项：

options = {
    layers: [
        tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 18, attribution: '...' })
    ],
    zoom: 5,
    center: latLng(46.879966, -121.726909)
};

参考：@asymmetrik/ngx-leaflet

编辑：

如果您不想使用上述软件包，请使用以下方法解决您的问题：

ngOnInit() {
    const myMap = L.map('map').setView([51.505, -0.09], 13);
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(myMap);
}