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

Question

我正在尝试在Angular项目中使用leatflet软件包，但无法正常工作。

我用npm install leatflet --save安装了leatflet，然后在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的部分。

我所看到的是这样的：

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

我们将不胜感激。 ：）

Answer 1

安装以下内容以获得Angular的传单：

npm install leaflet
npm install @asymmetrik/ngx-leaflet

还有typings：

npm install --save-dev @types/leaflet

在Angualr CLI中添加以下内容：

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

导入传单模块：

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);
}