Как отобразить данные о направлении после начальной загрузки?

Question

У меня есть карта, на которой я хочу показать данные о направлении.

template

<mgl-map class="map" [style]="style" [zoom]="zoom" [center]="center">
    <mgl-geojson-source id="geojson-route">
        <mgl-feature [geometry]="route"></mgl-feature>
    </mgl-geojson-source>
    <mgl-layer id="route" type="line" source="geojson-route" [layout]="layout" [paint]="paint">
    </mgl-layer>
</mgl-map>

component

Если я жестко закодирую данные в переменный маршрут, то он работает с приведенным выше кодом:

route = {"type":"LineString","coordinates": coords}

Тем не менее, я хочу динамически установить координаты, когда мой сервис возвращается следующим образом:

this.mapService.getDirections(profile, coordinates).subscribe(
            data => {
                this.route = data;
            });

Однако выполнение выше не работает ошибки не отображаются и координаты не отображаются?

Я что-то упустил?

ref:

• https://github.com/Wykks/ngx-mapbox-gl
• https://docs.mapbox.com/mapbox-gl-js/overview/

Спасибо.

Answer 1

Попробуйте не визуализировать компонент, пока route не будет инициализирован с *ngIf:

template :

<div *ngIf="route">
  <mgl-map class="map" [style]="style" [zoom]="zoom" [center]="center">
    <mgl-geojson-source id="geojson-route">
        <mgl-feature [geometry]="route"></mgl-feature>
    </mgl-geojson-source>
    <mgl-layer id="route" type="line" source="geojson-route" [layout]="layout" [paint]="paint">
    </mgl-layer>
  </mgl-map>
</div>

Затем после подписки:

this.mapService.getDirections(profile, coordinates).subscribe(
            data => {
                this.route = data;
            });

завершено, *ngIf будет истинным, и ваша карта будет отображена с данными, загруженными из this.mapService.getDirections.