初始加载后如何显示方向数据？

Question

我有一张地图，希望在上面显示方向数据。

模板

<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>

组件

如果我将数据硬编码为可变路由，则可以使用以上代码：

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

但是，我想在服务返回时动态设置坐标：

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

但是，执行上述操作不起作用，没有显示错误并且没有显示坐标吗？

我想念什么吗？

参考：

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

谢谢。

Answer 1

在route初始化*ngIf之前，请不要渲染组件：

模板：

<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将为true，并且将使用您从this.mapService.getDirections加载的数据来渲染地图。

Answer 2

根据https://github.com/Wykks/ngx-mapbox-gl/wiki/API-Documentation#ngx-mgl-feature-inside-mgl-geojson-source-only，所有mgl-feature的属性都是“仅初始化”。我建议改用来源的data属性：

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

然后确保您的route变量具有正确的形状（在这种情况下为GeoJSON.Feature）：

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