Используйте функцию вне ngOnInit () внутри ngOnInit () - PullRequest
Новая
       8

Используйте функцию вне ngOnInit () внутри ngOnInit ()

0 голосов
/ 25 мая 2018

Я программирую карту с помощью OpenLayers (4.6.5) в Angular (6).Я также использую французский API , предоставленный французским правительством, для создания запросов и возврата файлов GeoJSON.

Я уже запрограммировал карту со статическими файлами GeoJSON, например: 

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

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

А теперь я хочу использовать этот API и динамически создавать запросы!Я создал StackBlitz , чтобы проиллюстрировать мой вопрос.

Моя проблема в том, что я создал функцию getLocation () вне ngOnInit () (это было обязательно), и теперь я хочу использоватьconst url = 'https://api-adresse.data.gouv.fr/reverse/?lon=${Longitude}&lat=${Latitude}' в this.locationLayer!Как я могу это сделать ?Целью является размещение точек на карте (согласно сгенерированному файлу GeoJSON)

1 Ответ

0 голосов
/ 26 мая 2018

Вы можете обработать запрос http с помощью Angular HttpClient.

  1. Первый импорт HttpClientModule в вашем app.module 

    import { HttpClientModule} from '@angular/common/http';

@NgModule({
  imports: [
    ...,
    HttpClientModule
  ],
   ...
})

  2. В вашем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)
}

  3. После использования openlayers для создания VectorSource и после получения информации о сервере добавьте геометрию в источник

...