javascript - 将传单标记放置在圆周上的参数方程不精确？

Question

我正在开发一个有圆心和半径的应用程序，我正在 Leaflet 的帮助下绘制圆。

我在圆周的最北端放置了一个标记，并使其可拖动。

var circle = L.circle(coords, radius).addTo(map);

convertRadiusToLatitude = parseInt(response.radius)/111111;

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

现在，这会将标记添加到圆周上，现在我希望它只能在我使用参数方程的圆周上拖动。

参数方程

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

拖动代码

markerOnRadius.on('drag', function(e){

    bearing = marker.getLatLng().bearingTo(markerOnRadius.getLatLng());

    var markerOnRadiusX = parseFloat(response.lat)  + ((0.000009 * parseFloat(response.radius)) * Math.cos( toRad(bearing) ));
    var markerOnRadiusY = parseFloat(response.long) + ((0.000009 * parseFloat(response.radius)) * Math.sin( toRad(bearing) ));

    markerOnRadius.setLatLng([markerOnRadiusX, markerOnRadiusY]);
});

bearingTo 方法:

L.LatLng.prototype.bearingTo = function(other) {
    var d2r  = L.LatLng.DEG_TO_RAD;
    var r2d  = L.LatLng.RAD_TO_DEG;
    var lat1 = this.lat * d2r;
    var lat2 = other.lat * d2r;
    var dLon = (other.lng-this.lng) * d2r;
    var y    = Math.sin(dLon) * Math.cos(lat2);
    var x    = Math.cos(lat1)*Math.sin(lat2) - Math.sin(lat1)*Math.cos(lat2)*Math.cos(dLon);
    var brng = Math.atan2(y, x);
    brng = parseInt( brng * r2d );
    brng = (brng + 360) % 360;
    return brng;
};

问题

当我开始拖动标记时，此代码运行良好，并将其带回标记被拖动到的方位 Angular 处的圆周。但是有一个问题，圆周上的坐标在经度方面略有偏差。当方位 Angular 为 0(北)时，坐标完美，但当方位 Angular 为 90(东)时，经度略小于标记在圆周上应有的位置。

再次在 180(南)处，坐标完美，但在 270(西)处，计算的经度略小，标记再次趋向于半径。

所以基本上，如果您想象被拖动的标记，它从北端完美开始，并开始进入圆内，随着方位略微增加，直到达到 90，然后再次开始向圆周移动，直到 180，当它再次完美时.

如果你理解了它的要点，它更像一个椭圆。

谁能告诉我为什么经度有点偏离以及为什么标记沿椭圆路径移动。跟世界坐标和窗口坐标有关系吗。还是我的方程式在某处略有偏差？

Answer 1

它确实看起来像一个投影问题。在你的拖动代码中，你基本上是在做

 lat = a + r cos(baring)
 long = b + r sin(baring)

在 Lat-Long 坐标中给出一个圆。如果您在墨卡托投影的赤道上，这会很好用。当您进一步接近民意测验时，您会得到更多的扭曲。

假设您使用的是 Leaflet 的默认值 reference doc你有 EPSG3857 Web Mercator坐标。

如果你想确保你有一个精确的圆，最好使用屏幕坐标。您可以使用 ICRS 上的方法获取这些信息对象。首先获取坐标系 L.CRS.EPSG3857 并使用 latLngToPoint 和 pointToLatLng 方法。

var crs = L.CRS.EPSG3857;
var zoom = ...; // how you calculate your zoom factor

markerOnRadius.on('drag', function(e){

    var markerLL = marker.getLatLng()
    var morLL    = markerOnRadius.getLatLng();
    var markerP  = crs.latLngToPoint(markerLL,zoom);
    var morP     = crs.latLngToPoint(morLL,zoom);
    // get the distance between the two points
    var dist = markerP.distanceTo(morP);
    // Get the vector from center to point
    var A = morP.subtract(markerP);
    // scale so its of the desired length
    var B = A. multiplyBy( factor / dist);
    // Add on the center
    var C = markerP.add(B);
    // Convert back to LatLong
    var D = crs.pointToLatLng(C,zoom);
    markerOnRadius.setLatLong(D);
});