Question

构建我的第一个有角度的应用程序，并想使用mapbox-gl显示矢量地图。应用程序将在此地图顶部显示跟踪信息，以及来自gps设备的数据。我当时打算将地图作为自己的组件，然后创建服务，以绘制来自地图上选定设备的跟踪数据。但是，我正在努力显示地图。我正在尝试将地图中心从map.component.ts初始化（最终将来自首选项）传递给map.component.html，但它不起作用。据我经过几个小时的搜索和尝试其他操作后的判断，我正确地传递了值，但未显示任何地图。这是map.component.ts文件：

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

import { LngLat, Map } from 'mapbox-gl';
import { LCONTAINER_LENGTH } from '@angular/core/src/render3/interfaces/container';

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

export class MapComponent implements OnInit, OnChanges {

  _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);

  }

  onDragZoom(e) {
    var thisMap;
    if (!this._mapRef) {
      console.warn("getFlow was called but no map is set");
      return;
    } else {
      thisMap = this._mapRef;
    }
    if(this.index === 0) {
      this._center = thisMap.getCenter();
      this.zoom = thisMap.getZoom();
    }
  }

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

  }
}

这是map.component.html文件：

<p>below should be the map</p>
<div class="container" style="border: 1px ">
    <mgl-map
    [style]="'mapbox://styles/mapbox/streets-v9'"
    [zoom]="[9]"
    [center]="_center"
    (load)="map = $event">
    </mgl-map>
</div>
<p>map should be above</p>

出于很好的考虑，app.module.ts和app.module.html：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { MapComponent } from './map/map.component';

@NgModule({
  declarations: [
    AppComponent,
    MapComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    NgxMapboxGLModule.withConfig({
      accessToken: '<token>', 
    }),

  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN.......==">
</div>
<app-map></app-map>
<router-outlet></router-outlet>

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

我确定我确实缺少一些基本的简单概念，但是现在我已经将头撞墙了几个小时了。谁能指出我正确的方向？

谢谢！

Answer 1

尝试在CSS中设置地图样式

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

Answer 2

花了几天时间，但终于弄明白了。我的地图容器的高度为0px，所以什么也没看到。需要设置容器的高度，现在我看到了地图。粉笔再体验一个。

Answer 3

请确保完成此步骤

在CSS中添加样式

mgl-map { 高度：100％; 宽度：100％; }
在地图中添加加载事件

Answer 4

是模板：

<mgl-map [zoom]="[15]" [apiKey]="apiKey" [center]="[51.3729563, 35.697074]">
</mgl-map>

并定义apiKey字符串变量，然后将apiKey设置为变量（apiKey）

无法在Angle 7应用中显示mapbox-gl地图

4 个答案: