leaflet地图使用leaflet-rotate.js插件旋转之后，拖拽marker点获取到的经纬度有偏差

leaflet地图使用leaflet-rotate.js插件旋转之后，拖拽marker点获取到的经纬度有偏差，有人遇到过这种问题吗？最后怎么解决的？

这篇博客有讲你这个问题的，你看看：https://blog.csdn.net/liufeng0209/article/details/41896935/

leaflet-rotate.js应该有回调函数来处理Marker的拖拽事件，这样可以确保在拖拽时获取到正确的经纬度

这篇文章可以参考下：

leaflet加载leaflet-canvas-marker图层时出现偏移问题解决_cwr888的博客-CSDN博客问题背景: 用leaflet加载高德地图，对地图进行操作(如:放大、缩小或移动)后，再动态加载leaflet-canvas-marker图层，图层第一次(初始)叠加在地图上有偏移，对地图进行操作(如:放大、缩小或移动)后，偏移消失。[特别注意要先对地图进行操作，再加载leaflet-canvas-marker图层，否则问题不能重现]。如下图: 第一次(初始)叠加位置：对地图进行操作后位置：初步判定为leaflet-canvas-marker的一个Bug。问题解决:动态加...

https://blog.csdn.net/cwr888/article/details/124411344

如果以上回答对您有所帮助，点击一下采纳该答案～谢谢

参考
https://stackoverflow.com/questions/48459095/leaflet-on-drag-updating-lat-lng-variables

可能是因为旋转插件对地图进行了旋转，但是标记点（marker）的坐标并没有相应地旋转。这就导致了当你拖动标记点时，它显示的经纬度有偏差。
解决这个问题的一种方法是，使用旋转插件旋转地图时，同时也对标记点进行旋转。可以监听地图的旋转事件，然后更新标记点的位置。

通过回调函数，校正旋转后的坐标

地图旋转后，取点坐标要相应的旋转纠正

1、确保将 leaflet-rotate.js 插件正确引入到您的项目中，并已经成功加载。
2、在旋转地图后，通过相应的方法或事件检测到地图旋转完成。例如，可能有一个回调函数可以告知您地图已完成旋转。
3、在这个回调函数中，获取所有标记点的当前位置（经纬度）并保存下来。
4、使用 Leaflet 提供的方法或事件监听器（如 dragend）捕获标记点拖动结束后的事件。
5、在该事件处理程序中更新标记点的位置，并使用之前保存下来的偏移量重新设置它们在新坐标系下的正确位置。

以下回答来自chatGPT 如果有帮忙希望给个采纳


根据您的描述，问题可能是由于旋转地图后，marker点的坐标系也随之旋转导致的。因此，获取marker点的经纬度时会出现偏差。

解决这个问题的方法是，在获取marker点的经纬度之前，将marker点的坐标系转回到原始状态。您可以使用 Leaflet-rotate.js 插件中的 `unrotate` 方法来实现此目的。该方法会将地图旋转角度的负值应用于marker点的坐标系，从而将其转回到原始状态。

以下是一个示例代码片段，演示如何在拖动marker点时应用unrotate方法来解决这个问题：

```javascript
var marker = L.marker([51.5, -0.09], {
  draggable: true
}).addTo(map);

marker.on('dragend', function () {
  var unrotatedLatLng = map.unrotate(marker.getLatLng());
  console.log('Unrotated LatLng:', unrotatedLatLng);
});

在上述代码中， map.unrotate 方法将应用地图的旋转角度的负值来转换marker点的坐标系。这将返回marker点的未旋转的经纬度坐标。

希望这可以帮助您解决问题。

```

参考gpt：
结合自己分析给你如下建议：
根据您的描述，您在使用leaflet-rotate.js插件旋转leaflet地图之后，拖拽marker点获取到的经纬度有偏差。这可能是由于以下原因：
您没有正确使用leaflet-rotate.js插件提供的rotatedMarker方法来创建和旋转marker点。
您没有正确将marker点的角度从弧度转换为度数。
您没有正确监听marker点的dragend事件来获取最新的经纬度。
为了解决这些问题，您可以尝试以下方法：
引入leaflet-rotate.js插件，并使用rotatedMarker方法来创建和旋转marker点，例如：

var marker = L.rotatedMarker ( [51.5, -0.09], {icon: myIcon, angle: 45}).addTo (map); // angle in degrees

将marker点的角度从弧度转换为度数，例如：
var angle = e [3] * 180 / Math.PI; // convert from radians to degrees

监听marker点的dragend事件来获取最新的经纬度，例如：
marker.on ('dragend', function (e) {
  var latlng = marker.getLatLng (); // get the current coordinates
  console.log (latlng.lat, latlng.lng); // print them to the console
});

处理偏移问题，一般有两个思路：

第一个是将真实的经纬度按照偏移算法（一般底图供应商会提供）偏移到加密的地图上，从而达到叠加效果。这样的问题是相当于将错就错，如果从地图上去采集经纬度就是偏移的，最后还得纠偏回去。而纠偏又是一个大问题，几乎所有的底图供应商都不提供纠偏算法，单单这个问题，都可以再写一篇文章。

第二个是改造地图组件，将底图进行反向偏移，这样GPS采集的经纬度可以无缝的叠加上，在地图上采集的经纬度都是无需纠偏的。进行底图偏移的前提是，需要知道偏移量offset，如果是线性偏移，这个offset就是个常量，如果不是线性偏移，则这个offset是依赖于视窗中心点的变量。

笔者查看Leaflet的源码，其中并没有对偏移的处理方法，在阅读源码并经过反复测试后，获得了以下的思路：

1.在获取切片的时候，计算切片X,Y值的时候增加上偏移量;

        var map = this._map,
            bounds = map.getPixelBounds(),
            sw = map.unproject(bounds.getBottomLeft()),<span style="font-family: Arial, Helvetica, sans-serif;">//获取左下角经纬度</span>
            ne = map.unproject(bounds.getTopRight()),<span style="font-family: Arial, Helvetica, sans-serif;">//获取右上角经纬度</span><span style="font-family: Arial, Helvetica, sans-serif;"> </span>

<span style="font-family: Arial, Helvetica, sans-serif;"><span style="white-space:pre">                </span>zoom = map.getZoom(),</span>
            tileSize = this._getTileSize();
 
        if (zoom > this.options.maxZoom || zoom < this.options.minZoom) {
            return;
        }
        
        var offsetX = this._offsetX;//经度偏移量
        var offsetY = this._offsetY;//纬度偏移量
        if(offsetX != null  && offsetY != null)
        {
            sw = new L.LatLng(sw.lat - parseFloat(offsetY),sw.lng - parseFloat(offsetX));//增加偏移量
            ne = new L.LatLng(ne.lat - parseFloat(offsetY),ne.lng - parseFloat(offsetX));
            
            var swPoint = map.project(sw);//将经纬度进行投影
            <span style="white-space:pre">    </span>var nePoint = map.project(ne);
            
            bounds = L.bounds(swPoint,nePoint);
        }

2.在显示图片的时候，图片位置减去偏移量；

<span style="white-space:pre">        </span>var offsetX = this._offsetX;
        var offsetY = this._offsetY;
        
        if(offsetX != null  && offsetY != null)
        {
            var latLng = this._map.layerPointToLatLng(tilePos);
            tilePos = this._map.latLngToLayerPoint(new L.LatLng(latLng.lat + parseFloat(offsetY),latLng.lng + parseFloat(offsetX)));
        }

当leaflet-rotate.js插件旋转地图上的标（marker）后，可能会导致标记的经纬度偏差。这是因为leaflet-rotate.js插件计算旋转后的标记位置时，没有同步更新标记的经纬度。

一种解决方法是，在旋转标记后，手动更新标记的经纬度。可以在标记拖拽结束（dragend）事件中获取旋转后的经纬度，并更新标记的位置坐标。

示例代码如下：

在代码中，使用了标记的拖拽结束事件（dragend）来获取旋转后的经纬度（newLatLng），然后调用自定义的函数（rotateLatLng）来根据旋转角度（rotationAngle）调整经纬度。最后，使用setLatLng()方法更新标记的位置。

请根据项目中使用的地图投影坐标系来修改 rotateLatLng() 函数来正确计算旋转后的经纬度。

参考GPT
使用leaflet-rotate.js插件旋转地图后，拖拽marker点获取到的经纬度可能会有偏差。这是因为leaflet-rotate.js插件在旋转地图时改变了地图的投影方式，导致经纬度计算出现偏差。

一种解决方法是使用leaflet-rotatedmarker插件，它是专门为旋转marker而设计的插件，并且与leaflet的投影方式兼容。你可以按照以下步骤来解决这个问题：

首先，删除leaflet-rotate.js插件，并确保你的地图回到原始状态。
下载并引入leaflet-rotatedmarker插件的脚本文件。你可以从GitHub上的插件仓库中获取脚本文件。
在你的代码中，使用leaflet-rotatedmarker插件来创建和旋转marker。以下是示例代码：
```
var marker = L.marker([lat, lng], { rotationAngle: angle }).addTo(map);
```
这样，你就可以在地图上创建一个旋转的marker，并且获取到的经纬度将是准确的。

通过使用leaflet-rotatedmarker插件，你可以解决旋转地图后获取经纬度偏差的问题。

在使用leaflet-rotate.js插件进行地图旋转时，marker点的位置会发生偏差，导致获取到的经纬度信息也会出现偏差。经过调查和研究，我们发现这是由于旋转操作导致地图坐标系的变化所致。

在地图旋转之前，地图的坐标系是基于正北方向的，经度从左往右递增，纬度从下往上递增。而在旋转之后，地图的坐标系会跟随旋转角度进行旋转，例如当地图逆时针旋转30度时，地图坐标系将逆时针旋转30度，此时北方向已经不再是地图的上方，经度纬度的递增方向也已经发生了改变。

这种坐标系的变化会导致marker点在地图上的位置发生偏移，因此获取到的经纬度信息也会出现偏差。例如，当marker点在旋转前的位置是经度为118.8，纬度为32.1时，当地图逆时针旋转30度后，marker点的实际位置已经发生了变化，此时获取到的经纬度信息可能变成了经度为118.5，纬度为32.3。

解决这个问题的方法是通过计算来将marker点的位置从旋转后的坐标系转换回旋转前的坐标系。具体的实现方式是通过leaflet-rotate.js提供的方法来获取地图旋转角度，然后使用数学计算将marker点的位置进行旋转和平移，最终将其转换回旋转前的坐标系。在转换回旋转前的坐标系之后，就可以正确地获取到marker点的经纬度信息了。

总之，当使用leaflet-rotate.js插件进行地图旋转时，要注意获取到的经纬度信息可能会出现偏差，需要通过计算来将marker点的位置从旋转后的坐标系转换回旋转前的坐标系，以获得正确的经纬度信息。