bugfix> javascript > 投稿

私は地図をプログラミングしていますOpenLayers (4.6.5)in角度 (6)。私もフランス語を使いますAPI フランス政府がリクエストを作成し、GeoJSONファイルを返すために提供します。

このような静的GeoJSONファイルを使用してマップを既にプログラミングしました。

this.parkingLayer = new VectorSource({
  url: '.../file.geojson',
  format: new GeoJSON()
});
this.vectorLayer_parking = new VectorLayer({
  source: this.parkingLayer
});

そして今、私はこのAPIを使用して、リクエストを動的に作成したいです! 私が作成しましたStackBlitz 私の質問を説明するために。

私の問題は、ngOnInit()の外にgetLocation()関数を作成した(それが必須だった)ので、 const url = 'https://api-adresse.data.gouv.fr/reverse/?lon=${Longitude}&lat=${Latitude}' を使用したいで this.locationLayer !どうやってやるの ?目標は、マップ上にポイントを配置することです(生成されたGeoJSONファイルに従って)

回答 1 件
  • Angular HttpClientでhttpリクエストを処理できます。

    最初にapp.moduleにHttpClientModuleをインポートします

    import { HttpClientModule} from '@angular/common/http';
    @NgModule({
      imports: [
        ...,
        HttpClientModule
      ],
       ...
    })
    
    

    app.componentで、サーバーから情報を取得します

    import { HttpClient } from '@angular/common/http';
    constructor(private http: HttpClient) {this.getLocation();}
    getLocation(): void{
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition((position)=>{
                const longitude = position.coords.longitude;
                const latitude = position.coords.latitude;
                this.callApi(longitude, latitude).subscribe(n => {
                    console.log(n);
                    //here you can add the geometry to a vector source
                });
            });
        } else {
            console.log("No support for geolocation")
        }
    }
    callApi(Longitude: number, Latitude: number): Observable<any> {
        const url = `https://api-adresse.data.gouv.fr/reverse/?lon=${Longitude}&lat=${Latitude}`;    
        return this.http.get(url)
    }
    
    

    openlayersを使用してVectorSourceを作成し、サーバー情報を取得したら、ソースにジオメトリを追加します

あなたの答え