Как я могу импортировать листовку в угловой проект?

Question

Я пытаюсь использовать пакет leatflet в своем проекте Angular, но не могу заставить его работать.

Я установил leatflet с npm 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 У меня есть раздел с идентификатором карты.

Все, что я вижу, это:

Кто-нибудь знает, где проблема и как ее исправить?

Помощь будет высоко ценится. :)

Answer 1

Установите следующее, чтобы иметь Leaflet для 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);
}