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);

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 在页面的不远处有一个公式来计算两个给定点的中点。

使用该公式，然后使用您在每个终点找到的中点找到两个点然后使用这些点，依此类推，直到您有足够的平滑线。

Answer 2

这可能会有所帮助。它在2d平面上的两点之间画一条线。

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);
      }
    }
  }
}

代码基本上从两个坐标中建立一个线性方程，然后绘制线性方程。

您应该能够编辑代码，以便轻松满足您的需求。

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＆lt; 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());

}

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

3 个答案: