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

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和this。

希望这会有所帮助。

更新：

我假设图形元素不会成为图表的一部分。换句话说，它不是必须绑定到特定地理位置的要素。在这种情况下，您不必使用 Leaflet 来绘制 GUI 元素的圆圈，您可以通过附加到 mousemove 事件的数据在 World（图表坐标）和 Window 坐标之间进行转换。在这种情况下，您还可以使用 Leaflet 的圆和线特征绘制功能，因为您可以在世界坐标和窗口坐标之间轻松移动。在这种情况下，请结合此回复查看Leaflet's quickstart。最后，您可能会发现 this mapbox example 也很有说明性。

更新 2：

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

如何进行：以上关于如何沿圆周移动标记的说明仍然有效。现在的“问题”是如何在图表上定位元素。这里实际上有两个坐标系在起作用。一种是“世界”坐标系，用经度和纬度表示。另一个是“窗口”坐标系，它是相对于包含图表的窗口左上角的 x、y 坐标。因此：

1. 设置在某个默认位置显示图表的传单窗口
2. 为适当的鼠标事件（左键按下、左键按下和移动）设置监听器
3. 在鼠标侦听器中，检索鼠标指针所在位置的 WORLD 和 WINDOW 坐标。也许this example 有帮助。
4. 如果您想使用传单的地理特征选项绘制圆圈，请使用类似于here 的世界坐标和代码。绘制圆的想法、其外围的标记以及随着用户输入移动的方式没有改变，只是坐标系发生了变化。
5. 如果您要使用其他库或函数集在包含地图本身的 DIV 中进行绘制，那么您所要做的就是使用 WINDOW 坐标。

希望这会有所帮助。