Angular语言 - leaf .js -没有显示/渲染错误

Question

我知道这已经出现过几次了，但我无法让这些答案为我工作。

首先，leaf .css的导入很奇怪…angular.json

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

@import "path/to/leaflet.css"

可以了- map.component.ts

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

为什么只有通过组件导入css时才会实际导入?在前两种情况下，它并没有抱怨路径错误或其他问题。

现在，即使leaf .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/

Answer 1

实际情况是，你的前两次尝试加载传单CSS实际上工作。

第三次尝试(在组件styleUrls中)实际上不起作用。但看起来情况可能比之前的情况好，因为现在你可以看到一些瓷砖……由于缺少CSS，它们实际上在整个页面上都是混乱的。

在前两种情况下，你看不到你的地图(使它看起来不工作，或者像CSS导入失败)，因为你已经将地图容器的高度设置为100%;但这意味着它的父结点高度的100%，如果没有明确定义，父结点高度为0。在地图容器上绘制边界可以使问题更加明显。并设置高度固定(例如400px)，使您的传单地图正确显示。