如何在Mapbox.js中在两个坐标之间的直线上移动标记

Question

以下是我找到的移动标记的代码，但我想在两个坐标之间沿直线路径移动标记，有人可以帮忙吗？这些是坐标：

[90.40237426757811,23.75015391301012],[88.34930419921875,22.573438264572406] 

我需要一条线段连接这两个点的坐标。代码如下：

var marker = L.marker([0, 0], {

  icon: L.mapbox.marker.icon({
    type: 'Feature',
    geometry: {
        type: 'Point',
        coordinates: [-77, 37.9]
    },
    properties: { }
  })
});

var t = 0;
window.setInterval(function() {

  // making a lissajous curve here just for fun. this isn't necessary
  // Reassign the features
  marker.setLatLng(L.latLng(
    Math.cos(t * 0.5) * 50,
    Math.sin(t) * 50));
  t += 0.1;
}, 50);

marker.addTo(map);

- Pushpender

---

你有没有成功解决它的问题？ - mireille raad

是的，我在下面回答了这个问题。谢谢你的提问 :) - Pushpender

Answer 1

你需要多准确的代码行？试着从这里开始：

var start = {lat:90.40237426757811, lng:23.75015391301012}
var end = {lat:88.34930419921875, lng:22.573438264572406}
var n = 100; // the number of coordinates you want

coordinates = []
for(var i = n - 1; i > 0; i--){
    coordinates.push( {lat: start.lat*i/n + end.lat*(n-i)/n,
                       lng: start.lng*i/n + end.lng*(n-i)/n}); 
}

这并不准确，因为世界不是平的，在长距离上会出现偏差。

在投影的地球上绘制直线的完整数学更加困难，但这里有一个很好的解释: http://www.movable-type.co.uk/scripts/latlong.html 页面往下滑一点，有一个公式可以计算两个给定点的中点。

使用该公式，然后将找到的中点与每个端点一起使用以找到另外两个点，然后使用这些点，以此类推，直到拥有足够光滑的线条。

- Daniel

---

@Kerndog73 谢谢你们的回答 :) 我知道我很晚了。 - Pushpender

Answer 2

这可能有所帮助。它在二维平面上绘制两点之间的直线。 fromXy 和 toXy 是包含坐标的数组。 pref.canvas.size 是包含画布宽度和高度的数组。 pref.color 是要打印的像素颜色。 setPx() 根据 x 和 y 坐标以及颜色设置像素。

function line(toXy,fromXy) {
  var y;
  var m = (toXy[1] - fromXy[1]) / (fromXy[0] - toXy[0]);
  var b = (m * toXy[0]) + toXy[1];
  if (Math.abs(fromXy[0] - toXy[0]) >= Math.abs(fromXy[1] - toXy[1])) {
    if (fromXy[0] < toXy[0]) {
      for (var x = fromXy[0]; x <= toXy[0]; x++) {
        y = m * x - b;
        setPx(x,Math.abs(Math.round(y)),pref.color,);
      }
    } else {
      for (var x = fromXy[0]; x >= toXy[0]; x--) {
        y = m * x - b;
        setPx(x,Math.abs(Math.round(y)),pref.color)
      }
    }
  } else {
    if (fromXy[1] <= toXy[1]) {
      for (y = fromXy[1]; y <= toXy[1]; y++) {
        x = (y / -(m)) + Math.abs(b / -(m));
        if (x.toString() == 'Infinity' || x.toString() == 'NaN') {
          x = fromXy[0];
        }
        if (x > pref.canvas.size[0] - 1) {
          continue;
        }
        setPx(Math.abs(Math.round(x)),y,pref.color);
      }
    } else {
      for (y = fromXy[1]; y >= toXy[1]; y--) {
        x = (y / -(m)) + Math.abs(b / -(m));
        if (x.toString() == 'Infinity' || x.toString() == 'NaN') {
          x = fromXy[0];
        }
        if (x > pref.canvas.size[0] - 1) {
          continue;
        }
        setPx(Math.abs(Math.round(x)),y,pref.color);
      }
    }
  }
}

该代码基本上是将两个坐标构建成线性方程，然后绘制该线性方程的图形。

您应该能够轻松地编辑代码，以使其符合您的需求。

- Indiana Kernick

Answer 3

感谢大家提供的有用答案 :) 我使用了以下代码来解决我的问题，虽然它不完全正确且有很多硬编码，但对我来说它起作用了。 这是我使用此代码开发的模拟应用程序链接 http://nandinibhotika.com/compass/discover.htm 这是项目描述链接 http://nandinibhotika.com/portfolio/compass-exploring-stories/

var geojson = {

type: 'LineString',

coordinates: []

},

start = [90.4010009765625, 23.74763991365265];

geojson.coordinates.push(start.slice());

动量 = [.025, .01429];

for (var i = 0; i < 557; i++) {

if (start[0] > 88.36878921508789 && start[1] > 22.571377617836507) {

    start[0] -= momentum[0];

    start[1] -= momentum[1];

} else {

    momentum = [.00899, .0231];

    start[0] += momentum[0];

    start[1] -= momentum[1];

}

geojson.coordinates.push(start.slice());

}

- Pushpender