Mapbox-gl 只显示一半的容器

Question

我试图让 ngx-mapbox-gl 在 angular 应用程序中显示地图，但地图只显示了 div 的一半。玩过多种设置和 html 调整，但无法显示超过一半的地图。这是 map.component.html 文件：

    <div class="map" ng-view flex layout-fill style="height: 100%;border: solid 1px">
      <mgl-map
           [style]="'mapbox://styles/mapbox/streets-v9'"
           [zoom]="9"
           [center]="_center"
           (load)="loadMap($event)"
       >
       </mgl-map> 
     </div>

和 map.component.scss:

     @import 'mapbox-gl/dist/mapbox-gl.css';

     .mapboxgl-canvas {
       position: fixed !important;
       height: 100% !important;
}

map.component.ts:

 import { Component, OnInit, Input, Output, EventEmitter, OnChanges } from      '@angular/core';

 import { LngLat, Map } from 'mapbox-gl';

 @Component({
   selector: 'app-map',
   templateUrl: './map.component.html',
   styleUrls: ['./map.component.scss'],
 })

 export class DisplayMapComponent implements OnInit, OnChanges {
   map: Map;

   _center: LngLat;

   //refs
   _mapRef: Map;

   @Output()
   centerChange: EventEmitter<LngLat> =  new EventEmitter;

   @Input()
   set zoom(z: number) {
     this._zoom = z;
     if(this.index === 0) {
       this.zoomChange.emit(this._zoom);
     }
   }
   @Output()
   zoomChange : EventEmitter<number> = new EventEmitter;
   _zoom: number;

   @Input()
   index: number;

   constructor() { }

   ngOnInit() {
     this.zoom = 11;
     this._center = new LngLat( -121.31209, 37.449904  );
     console.log('this._center: ', this._center);
   }

   ngOnChanges(changes) {
     console.log('changes: ', changes);
     if (!changes) {
       return;
     }

   }

   loadMap( map: Map) {
     console.log("Initializing map, _center: ", this._center);
     console.log("map: ", map);
     this._mapRef = map;
     console.log("Loading map data");
     this._center = map.getCenter();
     console.log('this._center from map: ', this._center);
   }

 }

app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { LocalStorageService } from './services/local-storage.service';
import { MatToolbarModule, MatMenuModule, MatIconModule, MatListModule, MatGridListModule, MatButtonModule, MatCardModule } from '@angular/material'; 
import { MatSidenavModule } from '@angular/material/sidenav';
import { FlexLayoutModule } from '@angular/flex-layout';
import { StorageServiceModule } from 'angular-webstorage-service';

//mapbox imports
import { NgxMapboxGLModule } from 'ngx-mapbox-gl';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HeaderComponent } from './components/header/header.component';
import { DisplayMapComponent } from './components/map/map.component';
import { NavbarComponent } from './components/navbar/navbar.component';
import { LayoutModule } from '@angular/cdk/layout';
import { SettingsContainerComponent } from './components/settings-    container/settings-container.component';

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    DisplayMapComponent,
    NavbarComponent,
    SettingsContainerComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MatToolbarModule,
    MatSidenavModule,
    MatMenuModule,
    MatButtonModule,
    MatIconModule,
    FlexLayoutModule,
    LayoutModule,
    MatListModule,
    StorageServiceModule,
    NgxMapboxGLModule.withConfig({
      accessToken: '<token>', 
    }),
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

这是我所看到的屏幕截图：

如果我删除地图，div 的边界会照原样占据整个 window。但是我无法让地图用完整个 window。是css还是html还是ts我做错了？

谢谢....

Answer 1

您可以按照 ngx-mapbox-gl documentation sample 中所示的方式进行操作。有一个入门部分详细解释了所有内容。这里也总结了您需要做的事情。

无需使用 .mapboxgl-canvas 样式覆盖，您只需在 map.component.scss 文件中指定此样式：

 mgl-map {
      height: 100%;
      width: 100%;
    }

将 mapbox css 文件 @import 'mapbox-gl/dist/mapbox-gl.css'; 的导入放在应用程序的主 styles.scss 文件中，而不是放在组件文件中。然后它应该可以正常工作。

还有一个提示。由于您使用的是 @angular/flex-layout 库，因此您可以在 div 上使用 fxFlexFill 指令使其填充所有内容，而不是关闭您那里的所有内容。那么你的组件 html 就干净多了。

<div fxFlexFill style="border: solid 1px">
  <mgl-map
      [style]="'mapbox://styles/mapbox/streets-v9'"
      [zoom]="9"
      [center]="_center"
      (load)="loadMap($event)"
  >
  </mgl-map> 
</div>

我还创建了一个 StackBlitz 示例，您可以在其中看到它的工作原理。如果您想查看地图，您需要编辑示例并在 app.module.ts.

中添加您的标记

Answer 2

我按照文档进行了操作，但仍然没有用。 @cpeddie issue on Github 为我做了：

html-

<mgl-map (load)="onMapLoad($event)"></mgl-map>

ts-

export class NgMapComponent implements OnInit, OnDestroy {
  // map box
  map: mapBox.Map;
...

  onMapLoad(mapinstance) {
    this.map = mapinstance;
    this.map.resize();
    console.log('resize');
  }

Answer 3

我已经在地图加载事件中调整了地图的大小，它对我有用

loadMap( map: Map) {
 console.log("Initializing map, _center: ", this._center);
 console.log("map: ", map);
 this._mapRef = map;
 console.log("Loading map data");
 this._center = map.getCenter();
 console.log('this._center from map: ', this._center);
 // i added
 map.resize()}

Mapbox-gl 只显示一半的容器

Mapbox-gl only displaying half the container

angular

mapbox-gl