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

Question

我正在使用Leaflet使用切片成大块的大图像而不是“现实世界”地图数据来构建故事地图。 我正在使用这个插件： https : //commenthol.github.io/leaflet-rastercoords/和这个仓库： 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的新手。 我到目前为止已经破解了自己的方法，但是我很沮丧。 我确定解决方案是显而易见的。 任何帮助是极大的赞赏。

Answer 1

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

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

话虽这么说，我必须承认我并没有完全明白使用leaflet-rastercoords插件的意义，因为您可以按照Leaflet教程“非地理地图”轻松地进行操作。

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垂直值。

额外的好处是，许多其他内容将变得易于兼容。

由于您使用图块而不是单个图像（在本教程中使用ImageOverlay进行了拉伸以适合坐标），因此您应该修改CRS转换，以便在缩放0时，图块0/0/0适合您的整个坐标。 另请参阅图像上的传单自定义坐标

即以小叶-栅格坐标示例为例：

• 原始栅格图像尺寸：3831像素宽x 3101像素高
• 瓦片尺寸：256 x 256像素
• 垂直的“栅格”坐标在下降时会增加（而在Leaflet教程中，它们在上升时会像纬度一样在上升）。
• 瓦片0/0/0实际上涵盖比原始图像更 ，因为，如果后者是4096×4096像素（其余部分被填充有白色）

确定新的CRS：

• 瓦片0/0/0应该覆盖从左上角[0，0]到右下角[4096，4096]的坐标（即256 * 2 ^ 4 = 256 * 16 = 4096）=> 变换系数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']
);

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