Angular httpClient 使用 Longitude Latitude Haversine

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班级中。

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

 //Latitude and longitude of London

  LONDON_LAT = 51.509865;

  LONDON_LONG = -0.118092;

  miles;

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

Answer 1

Angular SPA 通常在客户端生成。所以所有的数学计算（单个除法运算都有很大的开销，更不用说所有的三角函数）在处理大型数组集时都会重载。您应该考虑在服务器端进行。您正在检索一个数组。所以你需要遍历它们中的每一个来调用函数。getUsers() {&nbsp; this.httpClient.get('/assets/users.json').pipe(&nbsp; &nbsp; map(data => data as Array<Users>)&nbsp; ).subscribe(result => {&nbsp;&nbsp; &nbsp; console.log(result);&nbsp; &nbsp; result.forEach(item => {&nbsp; &nbsp; &nbsp; const distance = this.apiService.getDistanceFromLatLon(item['latitude'], item['longitude'], this.LONDON_LAT, this.LONDON_LONG);&nbsp; &nbsp; &nbsp; if (distance <= this.miles) {&nbsp; &nbsp; &nbsp; &nbsp; this.UsersByRadius.push({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; id: item['id'],&nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; first_name: item['first_name'],&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; last_name: item['last_name'],&nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; latitude: item['latitude'],&nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; longitude: item['longitute'],&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; city: 'London'&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });&nbsp; });}