如何确保 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()));
}

返回 undefined - 你应该做的是

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