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是半径，θ是角。

要在您需要知道的电子会话中有一个点（或小点）可拖动，GUI元素的中心（这将是您的Xc，Yc），GUI元素的半径（这将是您的R）以及GUI元素中心与鼠标指针当前位置之间的角度（这将是你的theta）。

要计算出当前鼠标指针位置与Xc，Yc之间的角度，您可以评估角度的切线，然后使用arctan函数恢复角度。为此，您需要评估（currentMouseY - Yc）/（currentMouseX - Xc）的arctan。

然后，您可以获得将标记放在圆周上所需的所有数据。

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

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

希望这有帮助。

<强>更新

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

更新2：

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

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

设置一个单张窗口，在某个默认位置显示图表
为适当的鼠标事件设置侦听器（向左按下按钮，向左按住按钮并移动）
在鼠标侦听器中，检索鼠标指针所在的WORLD和WINDOW坐标。也许this example很有帮助。
如果您想使用传单的地理要素选项绘制圆圈，请使用WORLD坐标和类似于所呈现的代码here。绘制圆圈，其外围标记以及如何随用户输入移动的想法不会改变，只有坐标系会发生变化。
如果你要使用其他一些库或一组函数，要在包含地图本身的DIV中绘制，那么你所要做的就是使用WINDOW坐标。

希望这有帮助。

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

1 个答案: