我试图让NGX-mapbox-GL显示在角应用的地图,但地图只有一半的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的边框它以整个窗口,因为它应该。但我不能让地图使用了整个窗口。难道是CSS或HTML或TS我做错了吗?
谢谢....
你可以做同样的,因为它是在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
添加您的令牌。