Angular Leaflet - Карта не отображается должным образом

Question

Независимо от того, каким образом я пробую в Angular 7, моя карта листовки не загружается должным образом.Я получаю головоломку с блоком, у которого половина экрана серого цвета, а другая половина - в случайных разрозненных блоках карты (см. Рис.).

Карта блоков головоломки:

My HTML has been either:

или

<div id="map" class="map"></div>

Мой компонент:

import * as L from "leaflet";
...
@Component( {
  styleUrls:  [ "../../../../node_modules/leaflet/dist/leaflet.css" ],
  templateUrl:  "./map.html"
} )
...
export class Map implements OnInit {

  map: any;

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

  async ngOnInit() {

    this.map =  L.map('map').setView( [37.8, -96], 4 );
    var osmUrl    = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
    var osmAttrib = 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors';
    var osm       = new L.TileLayer( osmUrl, { minZoom: 1, maxZoom: 7, attribution: osmAttrib } );      
    this.map.addLayer( osm ); // */

  }

} 

Мой app-module.ts имеет «LeafletModule.forRoot () "добавлен в импорт.invalidateSize () не работал для меня, хотя, возможно, я использовал его неправильно.Я сделал это с помощью setTimeout, а не при вызове метода.

Я что-то упустил?Нужно ли мне добавлять скрипт в INDEX.HTML как этот или что-то в этом роде?

<script src="http://cdn.leafletjs.com/leaflet-0.4/leaflet.js"></script>

Я искал много постов и следовал инструкциям, но ничто не дает мне загруженную хорошую карту.

Кто-нибудь может помочь?

Спасибо, Моа

Answer 1

Вот шаги, которые вы должны выполнить:

1.установите листовку и импортируйте листовки в стиле css на angular.json

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

2. импортируйте листовку в свой ts:

import * as L from "leaflet";

3.инициализировать вашу карту внутри ngOnInit:

map;
ngOnInit() {
    this.map = L.map("map").setView([46.879966, -121.726909], 7);

    L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
          attribution:
            '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(this.map);
}

Демо

Вам не нужно использовать скрипт& cdns, поскольку вы импортируете файлы непосредственно из локальной папки.Кроме того, вы пытались использовать листовку 0.4, которая является действительно устаревшей версией