JavaScriptで基準点からの距離が近い順に座標点の配列をソートする方法

問題の概要

x座標とy座標という2つのプロパティを持つオブジェクト(点)の配列があるとします。ここで、この配列と基準となる点の座標(x, y)を受け取り、配列内の各点を基準点からの距離が近い順(昇順)に並べ替える関数を作成します。

例えば、地図上の複数のスポットの中から「現在地に最も近い場所」を順番に表示したい場合など、実務でもよく使われる処理です。

距離の計算式(ユークリッド距離)

2次元平面上の2点 (x1, y1) と (x2, y2) の間の最短距離は、次の数学的な式で求められます。

$S=\sqrt{((x2-x1)^2+(y2-y1)^2)}$

この式を使って各点と基準点との距離を計算し、その値に基づいて配列をソートします。

コード例

const coordinates =
[{x:2,y:6},{x:14,y:10},{x:7,y:10},{x:11,y:6},{x:6,y:2}];

// 2点間の距離を計算する関数
const distance = (coor1, coor2) => {
    const x = coor2.x - coor1.x;
    const y = coor2.y - coor1.y;
    return Math.sqrt((x*x) + (y*y));
};

// 距離が近い順にソートする関数
const sortByDistance = (coordinates, point) => {
    const sorter = (a, b) => distance(a, point) - distance(b, point);
    coordinates.sort(sorter);
};

sortByDistance(coordinates, {x: 5, y: 4});
console.log(coordinates);

コードの解説

• distance 関数:ユークリッド距離の式を実装し、2点間の直線距離を返します。
• sortByDistance 関数:Array.prototype.sort() の比較関数として、「a までの距離 − b までの距離」を返すことで昇順ソートを実現しています。

実行結果

コンソールには次のように出力されます。

[
    { x: 6, y: 2 },
    { x: 2, y: 6 },
    { x: 7, y: 10 },
    { x: 11, y: 6 },
    { x: 14, y: 10 }
]

(5, 4) を基準点とした場合、(6, 2) が最も近く、続いて (2, 6)、(7, 10)、(11, 6)、(14, 10) の順になっており、正しく距離の近い順に並べ替えられていることがわかります。

まとめ

このように、Math.sqrt() を使った距離計算と sort() の比較関数を組み合わせるだけで、座標データを任意の基準点からの距離順に簡単にソートできます。なお、距離の大小比較だけが目的であれば、平方根の計算(Math.sqrt)を省略して二乗和のまま比較しても結果は同じになるため、パフォーマンスを少し向上させることができます。