Угловой - Leaflet.js - не отображается / отображается неправильно

#angular #leaflet #ngx-leaflet

Вопрос:

Я знаю, что это было здесь уже несколько раз, но я не мог заставить эти ответы работать на меня.

Во-первых, импорт leaflet.css странный… Это не работает — angular.json

     "styles": [
        "src/styles.css",
        "path/to/leaflet.css"
    ]

Это также не работает — src/styles.css

     @import "path/to/leaflet.css"

Это работает — map.component.ts

     styleUrls: ['./map.component.css', "path/to/leaflet.css"]

Почему только при импорте через компонент css фактически импортируется? В первых двух случаях он не жалуется на неправильный путь или что-то еще.

Теперь даже при успешном импорте leaflet.css карта отображает около половины плиток. Кто-то сказал, что изменение размера окна устраняет проблему. Но изменение размера окна делает карту серой…

Остальная часть кода:

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

    @NgModule({
      declarations: [
        AppComponent,
        MapComponent
      ],
      imports: [
        BrowserModule,
        LeafletModule
      ],
      providers: [],
      bootstrap: [AppComponent]
    })

    //...
    
    <div id="map" 
      leaflet 
      [leafletOptions]="options"
      [leafletLayersControl]="layers"
    ></div>

    //...

    layers = {
    baseLayers: {
      "OSM": tileLayer(MapConfig.layers.osm.url, {
        attribution: MapConfig.layers.osm.attribution
      }),
      "ArcGIS": tileLayer(MapConfig.layers.arcgis.url, {
          attribution: MapConfig.layers.arcgis.attribution
      }),
      //...
    },
    overlays: {}
    }

    options = {
      center: latLng(MapConfig.defaultLocation[0], MapConfig.defaultLocation[1]),
      zoom: MapConfig.zoom,
      layers: [this.layers.baseLayers["OSM"]]
    }

Вот полный пример кода:
https://3fjni.csb.app /

1. Привет, вероятно, было бы большим улучшением вашего вопроса, если бы вы могли предоставить пример воспроизведения в реальном времени, например, с использованием CodeSandbox или StackBlitz.

2. @ghybs спасибо за совет. Я обновил вопрос

Ответ №1:

Что происходит, так это то, что ваши 2 первые попытки загрузки CSS-листовки действительно работают.

3-я попытка (в компоненте styleUrls ) на самом деле не работает. Но может показаться, что ситуация лучше, чем в предыдущих случаях, потому что теперь вы можете видеть некоторые плитки… которые на самом деле скремблированы по всей вашей странице из-за отсутствия CSS.

В первых 2 случаях вы не видите свою карту (создавая впечатление, что она не работает или что импорт CSS не удался), потому что вы определили высоту контейнера карты как 100%; но это означает 100% от его родительской высоты, которая равна 0, если не определена явно. Рисование границы на контейнере карты делает проблему более заметной. И установка фиксированной высоты (например, 400 пикселей), чтобы ваша карта листовки отображалась правильно.