在 ngOnInit() 内部使用 ngOnInit() 之外的函数

Question

我正在使用法国政府提供的 OpenLayers (4.6.5) in Angular (6). I use also a french API 编写地图以创建请求和 return GeoJSON 文件。

我已经用静态 GeoJSON 文件编写了地图，如下所示：

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

this.vectorLayer_parking = new VectorLayer({
  source: this.parkingLayer
});

现在我想使用这个 API 并动态创建请求！我创建了一个 StackBlitz 来说明我的问题。

我的问题是我在 ngOnInit() 之外创建了一个 getLocation() 函数（这是强制性的），现在我想在 this.locationLayer 中使用 const url = 'https://api-adresse.data.gouv.fr/reverse/?lon=${Longitude}&lat=${Latitude}' ！我怎样才能做到这一点？目标是将点放在地图上（根据生成的 GeoJSON 文件）

Answer 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 之后，一旦获取服务器信息，就在源上添加几何图形

在 ngOnInit() 内部使用 ngOnInit() 之外的函数

Use a function outside ngOnInit() inside ngOnInit()

javascript

api

openlayers

angular