在 ngx-mapboxgl 地图顶部显示 div

Question

我第一次尝试在 angular 7 应用程序中使用 ngx-mapbox-gl，我遇到了一些奇怪的地图问题。我想在地图顶部显示一些文本和一个按钮。我已经按照我在网上找到的信件做了一个例子，但是 div 没有显示。如果我注释掉地图，div 会和按钮一起出现。附地图：

当地图被注释掉时：

这里是组件 html:

<mat-card style="height:100vh;border 1px solid;margin 5px;padding: 5px">
  <mat-card-content style="height:100%;border 1px solid;margin 5px;padding: 5px">

<mgl-map
  [style]="mapStyle"
  [zoom]="_zoom"
  [center]="_center"
  (load)="loadMap($event)"
  (zoomEnd)="onZoom($event)"
>
  <mgl-control
      mglScale
      unit="imperial"
      position="top-right">
  </mgl-control>
  <p>some text</p>
</mgl-map>
<div style="border: 1px solid;background-color: white;height: 100px;width:100px">
  <p>this is some text to display</p>
  <button mat-button class="layers-button">Button</button>
</div>

</mat-card-content>
</mat-card>

和 ts:

import { Component, OnInit, Input, Output, EventEmitter, OnChanges } from '@angular/core';
import { Subscription } from 'rxjs';
import { AppSettings } from '../../shared/app-settings'
import { AppSettingsService } from '../../services/app-settings.service';

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

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit, OnChanges {
  private className: string;
  appSettings: AppSettings;
  appSettingsSub: Subscription;
  map: Map;
  mapStyle: string;
  _zoom: number;
  _center: LngLat;

  //refs
  _mapRef: Map;

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

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

  @Input()
  index: number;

  constructor(public appSettingsService: AppSettingsService) { }

  ngOnInit() {
    this.className = this.constructor.toString().match(/\w+/g)[1];
    this._zoom = 6;

    this.appSettingsSub =     this.appSettingsService.behaviorSubject.asObservable().subscribe(value => {
      this.appSettings = value;
      if ( this.appSettings.norCalMapCenter == true ) {
        this._center = new LngLat( -121.31209, 37.449904  );
      }
      else {
        this._center = new LngLat(  -116.363804, 33.749757  );
      }
      if (this.appSettings.theme === 'tracs-dark-theme') {
        this.mapStyle = 'mapbox://styles/mapbox/dark-v9';
      }
      else {
        this.mapStyle = 'mapbox://styles/mapbox/outdoors-v9';
      }
    });

  }
  ngOnChanges(changes) {
    if (!changes) {
      return;
    }
  }
  loadMap( map: Map) {
    this._mapRef = map;
    this._center = map.getCenter();
  }

  onZoom(e) {
    this._zoom = Math.round(this._mapRef.getZoom());
    console.log('zoom event zoom:', this._zoom);
  };
}

和css:

mgl-map {
  height : calc(100% - 64px);
  width: 100%;
  margin: 0;
  padding: 0;
}
.mapboxgl-canvas {
  margin: 0;
  padding: 0;
}
.mat-card {
  margin: 0;
  padding: 0;
}

是否需要对图层或 z 级别执行某些操作才能在地图顶部显示某些内容？

Answer 1

我认为元素留在地图后面，所以你所要做的就是使用position: absolute并向叠加元素添加更高的z-index。

这是 css 代码：

.mgl-map-overlay {
   position: absolute;
   top: 10px;
   left: 10px;
   z-index: 1;
}

我还在 Stackblitz 上创建了一个简单的演示：

https://stackblitz.com/edit/angular-z5hv4g

在 ngx-mapboxgl 地图顶部显示 div

display div on top of ngx-mapboxgl map

angular

angular-material

mapbox-gl