2

这就是我手动操作的方式...

我有这三个坐标：

var coordinateOne   = [-72.642883, 42.201343];
var coordinateTwo   = [-72.639532, 42.200784];
var coordinateThree = [-72.637823, 42.199687];

我有这张地图，它以第一个坐标为中心：

var map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/streets-v8',
  center: coordinateOne,
  zoom: 19
});

我可以手动设置方位角，以便下一个坐标（不完全正确，但对于这个例子来说足够接近）直接向前：

map.easeTo({ bearing:109, pitch:60, zoom:19 });

然后我可以直接飞到第二个坐标：

map.flyTo({ center:coordinateTwo, zoom: 19 });

然后我可以再次手动设置方位，将第三个坐标放在前面：

map.easeTo({ bearing:130, pitch:60, zoom:19 });

然后我可以直接飞到第三个坐标：

map.flyTo({ center:coordinateThree, zoom: 19 });

有没有一种方法可以自动计算每次的方位值，让每个flyTo人都一直往前走？

我发现了这个问题，它涵盖了 Java 中的这个想法。基于那里的代码，我想出了以下代码，它接近但与它有更多的垂直角度，而不是直接对齐下一个点。

function bearing(lat1, lon1, lat2, lon2) {
  var longDiff = lon2 - lon1;
  var y        = Math.sin(longDiff) * Math.cos(lat2);
  var x        = Math.cos(lat1) * Math.sin(lat2) - Math.sin(lat1) * Math.cos(lat2) * Math.cos(longDiff);

  return ( toDegrees( Math.atan2( y, x ) ) + 360 ) % 360;
}

function toDegrees (angle) {
  return angle * (180 / Math.PI);
}
4

1 回答 1

3

我发现TurfJS包含轴承测量，所以我正在使用它。

我把这个函数放在一起来返回两点之间的方位：

function bearingBetween(coordinate1, coordinate2) {
  var point1 = {
    "type": "Feature",
    "geometry": {
      "type": "Point",
      "coordinates": [coordinate1[0], coordinate1[1]]
    }
  };
  var point2 = {
    "type": "Feature",
    "geometry": {
      "type": "Point",
      "coordinates": [coordinate2[0], coordinate2[1]]
    }
  };
  return turf.bearing(point1, point2);
}

我在我的easeTo行中使用它：

map.easeTo({ bearing: bearingBetween(coordinateOne, coordinateTwo), pitch: 60, zoom: 19 });

TurfJS 用来计算这个的代码在它的packages/turf-bearing/index.js文件中。

于 2016-03-19T17:10:22.527 回答