如何沿圆圈移动 Leaflet 中的标记？

Question

我正在开发一个应用程序，其中有一个标记和一个圆圈。

现在我正在圆周上创建另一个可拖动的标记。但我只希望它可以在圆周上拖动。

var coords = [parseFloat(response.lat), parseFloat(response.long)];
terrainAnalysisMap.setView(coords, 18);
var marker = L.marker(coords).addTo(terrainAnalysisMap);
var circle = L.circle([parseFloat(response.lat), parseFloat(response.long)], parseFloat(response.radius)).addTo(terrainAnalysisMap);

convertRadiusToLatitude = parseInt(response.radius)/111111;

var coordsOnRadius = [parseFloat(response.lat) + convertRadiusToLatitude, parseFloat(response.long)];
var markerOnRadius = L.marker(coordsOnRadius, {draggable: true}).addTo(terrainAnalysisMap);

如何做到这一点？如何使 markerOnRadius 可拖动但只能在圆的边缘？

或

我可以引入一个小输入框，用户可以在其中输入度数，然后标记会移动到圆周上的那一点吗？

即使有人可以指出正确的算法并告诉我如何使用它，我也会自己做。我只是数学不太好，所以我想不通。

使用基于答案的代码进行编辑

$('#terrainAnalysisAngle').on('keyup', function(e){
    var markerOnRadiusX = parseFloat(response.lat) + (0.000009 * parseFloat(response.radius)) * Math.cos($(this).val());
    var markerOnRadiusY = parseFloat(response.long) + (0.000009 * parseFloat(response.radius)) * Math.sin($(this).val());
    console.log([markerOnRadiusX, markerOnRadiusY]);
    markerOnRadius.setLatLng([markerOnRadiusX, markerOnRadiusY]);
});

Answer 1

给出圆周上的点的参数方程由以下公式给出：

x = Xc + R * cos(theta)
y = Yc + R * sin(theta)

其中，x,y是圆周上的一点，Xc,Yc是圆心，R是半径，theta是角度。

要在圆周上拖动一个点（或小点），您需要知道 GUI 元素的中心（这将是您的 Xc、Yc）、GUI 元素的半径（这将是您的R) 以及 GUI 元素中心与鼠标指针当前位置之间的角度（这将是您的 theta）。

要计算出当前鼠标指针位置相对于Xc、Yc的夹角，可以求出夹角的正切值，然后用arctan函数求出夹角。为此，您需要计算 (currentMouseY - Yc) / (currentMouseX - Xc) 的反正切值。

然后您就拥有了在圆周上放置标记所需的所有数据。

输入字段的解决方案更加直接，因为您可以通过非常简单的线性关系将数量的范围（例如 0-100）与 theta 的范围（0-360）相关联，并将 theta 设置为正确的值直接。

有关详细信息，请参阅 this and this。

希望对您有所帮助。

更新：

我假设图形元素不会成为图表的一部分。换句话说，它不是必须绑定到特定地理位置的功能。在这种情况下，您不必使用 Leaflet 来绘制 GUI 元素的圆圈，您也可以通过附加到 mousemove event. You could also use Leaflet's Circle and Line feature drawing capabilities in this case, because you can move easily between World and Window coordinates. In this case, please see Leaflet's quickstart in combination with this response. Finally, you might find this mapbox example 说明的数据在世界（图表坐标）和 Window 坐标之间进行转换。

更新 2：

需要什么（我认为）： Leaflet 提供的简单图表视图。当用户单击图表上的某个点时，会出现一个圆形 GUI 元素，其圆周上带有一个标记。用户沿着圆周移动标记以输入一个值。 GUI 元素将在用户输入值后消失。 GUI 元素不是图表的功能。换句话说，它不必 "scroll" 与地图一起 "bound" 到特定的地理位置。

如何进行： 上面关于如何沿圆周移动标记的解释仍然有效。 "problem" 现在是如何在图表上定位元素。这里实际上有两个坐标系在起作用。一种是"World"坐标系，用经度和纬度表示。另一个是 "Window" 坐标系，它是相对于包含图表的 window 左上角的 x,y 坐标。因此：

设置一个传单window，在一些默认位置显示图表
为适当的鼠标事件设置监听器（左键按下、左键弹起和移动）
在鼠标侦听器中，检索鼠标指针所在位置的 WORLD 和 WINDOW 坐标。也许 this example 有帮助。
如果您想使用 leaflet 的地理特征选项绘制圆圈，请使用 WORLD 坐标和类似于所提供内容的代码 here。绘制圆的想法、它在圆周上的标记以及它如何随着用户输入而移动并没有改变，只是坐标系发生了变化。
如果您要使用其他一些库或函数集，在包含地图本身的 DIV 内绘制，那么您所要做的就是使用 WINDOW 坐标。

希望对您有所帮助。

如何沿圆圈移动 Leaflet 中的标记？

How to move marker in Leaflet along a circle?

javascript

algorithm

leaflet

mapbox