如何在大型光栅图像上将 Leaflet FlyTo() 与 unproject() 和 GeoJSON 数据结合使用？

我正在使用 Leaflet 构建故事地图，使用切片为图块的大图像而不是“真实世界”地图数据。我正在使用这个插件：https://commenthol.github.io/leaflet-rastercoords/ https://commenthol.github.io/leaflet-rastercoords/和这个回购协议：https://github.com/jackdougherty/leaflet-storymap https://github.com/jackdougherty/leaflet-storymap

加载我的 GeoJSON 数据并取消投影坐标，将它们正确地绘制在我的图像地图上：

$.getJSON('map.geojson', function(data) {
  var geojson = L.geoJson(data, {
  // correctly map the geojson coordinates on the image
    coordsToLatLng: function (coords) {
      return rc.unproject(coords)
  },

但是当我到达 onEachFeature 时，我用 map.flyTo() 碰壁了，它从我的 JSON 文件中调用 Geometry.coordinates，但没有取消投影它们，因此 FlyTo() 将它们解释为远离地图的地理空间坐标：

map.flyTo([feature.geometry.coordinates[1], feature.geometry.coordinates[0] ], feature.properties['zoom']);

我尝试将未投影的坐标传递给变量，然后传递给 map.flyTo() 以及嵌套函数的变体，例如 map.flyTo.unproject(...，但没有运气。

如何将光栅坐标传递给flyTo()？

我不仅是 Leaflet 的新手，也是 JavaScript 的新手。我已经破解了到目前为止，但我被难住了。我确信解决方案是显而易见的。任何帮助是极大的赞赏。

在你的情况下，你可能只需要使用rc.unproject将您的坐标转换为可以传递给的 LatLngflyTo:

map.flyTo(
  rc.unproject(feature.geometry.coordinates),
  feature.properties['zoom']
);

话虽这么说，我必须承认我并不完全明白使用 leaflet-rastercoords 插件的意义，因为您可以通过遵循 Leaflet 教程轻松地执行相同的操作“非地理地图” http://leafletjs.com/examples/crs-simple/crs-simple.html.

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);
};

有了这个，每当你想将你的“光栅”坐标转换为Leaflet可用的东西时，你只需使用xy(x, y) with x是你的横向价值，并且y你的垂直的。

额外的好处是许多其他东西将变得容易兼容。

由于您使用图块而不是单个图像（用ImageOverlay在教程中为了适应坐标），您应该修改 CRS 转换，以便在缩放 0 时，您的图块0/0/0适合您的整个坐标。也可以看看图像上的传单自定义坐标 https://stackoverflow.com/questions/34638887/leaflet-custom-coordinates-on-image

IE。以传单栅格坐标为例：

• 原始光栅图像尺寸：3831 px 宽 x 3101 px 高
• 瓷砖尺寸：256 x 256 像素
• 垂直“光栅”坐标在下降时增加（而在 Leaflet 教程中，它们在上升时增加，就像纬度一样）。
• Tile 0/0/0实际上涵盖了more比原始图像大，就好像后者是 4096 x 4096 px（其余部分填充白色）

新CRS的确定：

• 图块 0/0/0 应覆盖从左上角 [0, 0] 到右下角 [4096, 4096] 的坐标（即 256 * 2^4 = 256 * 16 = 4096）=>转型 http://leafletjs.com/reference-1.0.3.html#transformation系数a and c应该1/16
• 不需要偏移 => 偏移b and d are 0
• 没有恢复y纵坐标=>c是积极的

因此，要使用的新 CRS 为：

L.CRS.MySimple = L.extend({}, L.CRS.Simple, {
  //                      coefficients: a      b    c     d
  transformation: new L.Transformation(1 / 16, 0, 1 / 16, 0)
});

现在你的flyTo非常相似，但许多其他东西也兼容：

map.flyTo(
  xy(feature.geometry.coordinates),
  feature.properties['zoom']
);

演示改编自 leaflet-rastercoords 示例，并使用额外的插件来演示兼容性：https://plnkr.co/edit/Gvei5I0S9yEo6fCYXPuy?p=preview https://plnkr.co/edit/Gvei5I0S9yEo6fCYXPuy?p=preview