如何確保正確加載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());
}