javascript - 如何在大型光栅图像上将 Leaflet flyTo() 与 unproject() 和 GeoJSON 数据一起使用？

Question

我正在使用 Leaflet 构建故事 map ，使用的是切片成图 block 的大图像而不是“真实世界” map 数据。我正在使用这个插件:https://commenthol.github.io/leaflet-rastercoords/这个 repo 协议(protocol):https://github.com/jackdougherty/leaflet-storymap

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

$.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 的地理空间坐标:

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

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

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

我不仅是 Leaflet 的新手，也是 JavaScript 的新手。到目前为止，我一直在砍我的路，但我很难过。我相信解决方案是显而易见的。任何帮助是极大的赞赏。

Answer 1

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

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

话虽如此，我必须承认我并不完全明白使用 leaflet-rastercoords 插件的意义，因为您可以按照 Leaflet 教程 "Non-geographical maps" 轻松地做到这一点。 .

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) 和 x 是你的水平值，y 垂直值。

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

由于您使用的是图 block 而不是单个图像(在教程中使用 ImageOverlay 拉伸(stretch)以适合坐标)，您应该修改 CRS 转换，以便在缩放 0 时，您的tile 0/0/0 适合您的整个坐标。另见 Leaflet custom coordinates on image

即在 leaflet-rastercoords 示例的情况下:

• 原始光栅图像尺寸:3831 像素宽 x 3101 像素高
• 图 block 大小:256 x 256 像素
• 垂直“光栅”坐标在下降时增加(而在 Leaflet 教程中，它们在上升时增加，如纬度)。
• 平铺 0/0/0 实际上覆盖了比原始图像更多，就好像后者是 4096 x 4096 像素(其余部分用白色填充)<

新CRS的确定:

• Tile 0/0/0 应覆盖从左上角 [0, 0] 到右下角 [4096, 4096] 的坐标(即 256 * 2^4 = 256 * 16 = 4096)=> transformation系数 a 和 c 应该是 1/16
• 不需要偏移量 => 偏移量 b 和 d 是 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']
);

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