如何确保正确加载 geojson 文件

Question

我有一个 angular 2 应用程序，我在其中集成了谷歌地图。我有两个从服务器获取的 geojson 文件，需要在地图上显示。这些文件包括每个功能的属性颜色。

我在获取文件后动态包含颜色。

在我的地图组件中，我有以下内容：

ngOnInit() {
        this.subscription = this.service.loadGeoJson().subscribe(() => this.geoJsonInit());
    }
    ngOnDestroy() { this.subscription.unsubscribe(); }
    private geoJsonInit() {
        Promise.resolve(dashboardMapService.getAllGeoJsonData().then(geoData => this.geoJsonData.push(...geoData))).then(() => dashboardMapService.loadAPI().then(res => this.onMapsReady()));
    } 

在地图服务中，我有以下内容：

    const GEO_JSON: Array<Object> = [];
    let GeoJsonPromise            = Promise.resolve(GEO_JSON);
//rest of service
static getAllGeoJsonData() {
        return GeoJsonPromise;
    }
    loadGeoJson(): Observable<any> {
        if ( GEO_JSON && GEO_JSON.length > 0 ) return Observable.of(GEO_JSON);
        else
            return Observable.forkJoin([ this.loadDistrictsGeoJson(), this.loadSubDistrictsGeoJson() ]).switchMap(d => this.GeoJsonInit(d));
    }

我面临的问题是，在初始加载时，多边形显示在地图上，但没有颜色。但是如果我切换路线并返回地图路线，则会显示颜色。

在控制台中。 feature.getProperty（'color'） 最初显示未定义，但是，在从地图路线来回切换后，它们被定义了。

所以我假设传递的 geojsons 文件最初不包含颜色。

如何确保在将 geojson 加载到地图之前正确获取地理？

Answer 1

private geoJsonInit() {
    Promise.resolve(dashboardMapService.getAllGeoJsonData().then(geoData => this.geoJsonData.push(...geoData))).then(() => dashboardMapService.loadAPI().then(res => this.onMapsReady()));
}

返回未定义 - 你应该做的是

private geoJsonInit() {
    return dashboardMapService.getAllGeoJsonData()
        .then(geoData => this.geoJsonData.push(...geoData))
        .then(() => dashboardMapService.loadAPI())
        .then(res => this.onMapsReady());
}