如何在 crs.simple 中测量距离？

Question

我有一张非地理地图，也就是平面图像，使用 CRS.Simple 通过自定义转换扩展。到目前为止一切正常，但现在我想添加一个距离测量按钮。我有信心自己可以实现两个标记之间的距离测量，但是动态画线和测量仍然有点超出我的技能，所以我希望我能使用一个插件。 None 我发现的，确实提供了这个。在查看传单的插件页面后，我尝试了这个分支 https://github.com/aprilandjan/leaflet.measure of leaflet.measure originally by https://github.com/jtreml/leaflet.measure，因为它似乎提供了添加自定义单位的能力——在我的例子中是像素。

我添加了这个：

L.control.measure({
    //  distance formatter, output mile instead of km
    formatDistance: function (val) {
      return Math.round(1000 * val / scaleFactor) / 1000 + 'mapUnits';
    }
  }).addTo(map)

不幸的是，与地图的像素大小 (4096x4096) 相比，结果是一个太大的数字。 distance() returns 预期的 1414.213562373095 在点 1000,1000 和点 2000,2000 之间。而是计算 distanctTo returns 8009572.105082839。我在我的文件开头使用这个

var yx = L.latLng;
var xy = function(x, y) {
  if (L.Util.isArray(x)) { // When doing xy([x, y]);
    return yx(x[1], x[0]);
  }
  return yx(y, x); // When doing xy(x, y);
};

如果我将 val 登录到控制台，我会得到如下信息：

20411385.176805027
7118674.47741132
20409736.502863288
7117025.8034695815
20409186.004645467
20409736.502863288

这可能是函数在没有适当参考系统的情况下尝试计算经纬度的问题。任何人都知道如何解决这个问题？感觉应该不会太难，但是又不知道从何下手。

Answer 1

我找到了一种方法，尽管感觉有点'hacky'：我替换了行

var distance = e.latlng.distanceTo(this._lastPoint)

在 _mouseMove 和 leaflet.measure 的 _mouseClick 事件中

  var currentPoint = e.latlng;                                                      
  var lastPoint = this._lastPoint;
  var distance = map.distance(currentPoint, lastPoint);

作为 map returns 米的 distance() 方法，或者在平面图像的情况下，像素值。那些我们可以在我们的平面图像中以我们想要的任何单位翻译。

如果有人有更优雅的方法，我洗耳恭听！

如何在 crs.simple 中测量距离？

How to measure distance in crs.simple?

measure

leaflet