Angular httpClient 使用 Longitude Latitude Haversine 公式从 JSON 的数组中获取用户

Question

我在 JSON 文件中有用户列表

[
  {
      "id": 1,
      "first_name": "Maurise",
      "last_name": "Shieldon",
      "latitude": 34.003135,
      "longitude": -117.7228641
  },
  {
      "id": 2,
      "first_name": "Bendix",
      "last_name": "Halgarth",
      "latitude": -2.9623869,
      "longitude": 104.7399789
  },
  {
      "id": 3,
      "first_name": "Meghan",
      "last_name": "Southall",
      "latitude": "15.45033",
      "longitude": "44.12768"
  },
  {
      "id": 4,
      "first_name": "Sidnee",
      "last_name": "Silwood",
      "latitude": -26.94087,
      "longitude": 29.24905
  },
  {
      "id": 5,
      "first_name": "Rosita",
      "last_name": "Ferrulli",
      "latitude": 33.5719791,
      "longitude": -84.3396421
  }]

我正在使用 Haversine 公式来计算距离，因此我只能获得某些 LAT 和 LONG 值的用户，此方法在我的 api.service.ts class 中。

   getDistanceFromLatLon(lat1: number, lon1: number, lat2: number, lon2: number): number {
    var deg2Rad = deg => {
      return deg * Math.PI / 180;
    }
    var r = 3959; // Radius of the earth in miles
    var dLat = deg2Rad(lat2 - lat1);
    var dLon = deg2Rad(lon2 - lon1);
    var a =
      Math.sin(dLat / 2) * Math.sin(dLat / 2) +
      Math.cos(deg2Rad(lat1)) * Math.cos(deg2Rad(lat2)) *
      Math.sin(dLon / 2) * Math.sin(dLon / 2);
    var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
    var d = r * c; // Distance in miles
    return d;
  }

然后在我的 app.component.ts 文件中，我可以调用 JSON 数组，它会从上面的用户列表中为我提供 data.json 文件中所有用户的列表。

getUsers() {
this.httpClient.get('/assets/users.json').pipe(map(data => data as Array<Users>))
      .subscribe(result => { console.log(result)}

在我从我的 JSON 文件中收到所有用户的列表之后。我正在尝试通过 getDistanceFromLatLon 方法运行 JSON result 数组，以便只有具有 LONDON_LAT 和 LONDON_LONG 的用户才能显示


 //Latitude and longitude of London
  LONDON_LAT = 51.509865;
  LONDON_LONG = -0.118092;
  miles;

const distance = this.apiService.getDistanceFromLatLon(result['latitude'], result['longitude'], 
this.LONDON_LAT, this.LONDON_LONG);
        if (distance <= this.miles) {
          this.UsersByRadius = result;
        }
      });
}

通过 .getDistanceFromLatLon 编译后，我的 this.UsersByRadius = result 是空的，我没有获得任何用户。我基本上是想在我的 angular 应用程序中复制这个 PHP application。任何帮助都感激不尽。

Answer 1

Angular SPA通常在客户端生成。所以所有的数学计算（单个除法运算都有很大的开销，更不用说所有的三角函数）在处理大型数组集时都会重载。您应该考虑在服务器端进行。
您正在检索数组。所以你需要循环遍历它们中的每一个来调用函数。

getUsers() {
  this.httpClient.get('/assets/users.json').pipe(
    map(data => data as Array<Users>)
  ).subscribe(result => { 
    console.log(result);
    result.forEach(item => {
      const distance = this.apiService.getDistanceFromLatLon(item['latitude'], item['longitude'], this.LONDON_LAT, this.LONDON_LONG);
      if (distance <= this.miles) {
        this.UsersByRadius.push({
          id: item['id'],   
          first_name: item['first_name'],
          last_name: item['last_name'],   
          latitude: item['latitude'],   
          longitude: item['longitute'],
          city: 'London'
        });
      }
    });
  });
}

Angular httpClient 使用 Longitude Latitude Haversine 公式从 JSON 的数组中获取用户

Angular httpClient get users from an Array of JSON using Longitude Latitude Haversine formula

php

json

httpclient

typescript

angular