angular - Mapbox-gl 只显示一半的容器
问题描述
我试图让 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 文档示例中显示的相同的操作。有一个入门部分详细解释了所有内容。这里也总结了您需要做的事情。
.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
.
推荐阅读
- netsuite - 如何在套件表单(API 2.0)的选择字段中仅获取父项?
- python - 如果可选属性无效,JSON Schema 会抛出验证错误
- thymeleaf - Thymeleaf - 从选择列表中选择多个选项
- visual-studio-code - Visual Studio 代码烦人的自动启动
- android - 奇怪的绑定适配器点击监听行为kotlin android
- javascript - React webpack config:是否可以仅替换数组中一个插件的配置,而无需重置插件数组?
- mysql - mysql 选择加入第二行
- elasticsearch - ElasticSearch - 使用一个查询的结果作为另一个查询的过滤器
- c# - Directory.GetDirectories 顺序与 Directory.GetFiles 顺序
- mysql - 如何防止json数据输出按字母顺序排序并存储在mysql工作中?