Javascript 如何将传单flyTo（）与unproject（）和GeoJSON数据一起用于大型光栅图像？

我正在用一张切片成瓷砖的大图像，而不是“真实世界”的地图数据，用传单构建一张故事地图。我正在使用这个插件：和这个repo:

加载我的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（）

---

我不仅不熟悉传单，也不熟悉JavaScript。我已经尝试了这么久，但我被难住了。我相信解决方案是显而易见的。非常感谢您的帮助。

在您的情况下，您可能只需要使用

rc.unproject

将坐标转换为LatLng，您可以传递到

flyTo

：

map.flyTo(
rc.取消投影（特征、几何、坐标），
feature.properties['zoom']
);

话虽如此，我必须承认我并不完全明白使用传单rastercoords插件的意义，因为您可以通过遵循传单教程轻松做到这一点

var yx=L.latLng；
var xy=函数（x，y）{
如果（L.Util.isArray（x））{//执行xy（[x，y]）；
返回yx（x[1]，x[0]）；
}
返回yx（y，x）；//执行xy（x，y）时；
};

这样，无论何时，只要您想将“光栅”坐标转换为传单上可用的坐标，您就可以使用

xy（x，y）

，其中

x

是您的水平值，

y

是您的垂直值

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

由于使用平铺而不是单个图像（在本教程中使用

ImageOverlay

拉伸以适应坐标），因此应修改CRS变换，以便在缩放0时，平铺

0/0/0

适合整个坐标。另请参阅

即，对于传单rastercoords示例：

• 原始光栅图像大小：3831像素宽x 3101像素高
• 瓷砖尺寸：256 x 256像素
• 垂直“光栅”坐标在下降时增加（而在传单教程中，它们在上升时增加，如纬度）
• 平铺

  0/0/0

  实际上覆盖了比原始图像更多的内容，就好像原始图像是4096 x 4096 px（其余部分用白色填充）

新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{
//系数：a b c d
转换：新的L.转换（1/16,0,1/16,0）
});

现在，您的

flyTo

非常相似，但许多其他功能也兼容：

map.flyTo(
xy（特征、几何、坐标），
feature.properties['zoom']
);

---

演示改编自rastercoords示例传单，并使用一个额外的插件演示兼容性：

感谢您提供了这个非常全面的答案。只需使用

map.flyTo（rc.unproject（feature.geometry.coordinates）、feature.properties['zoom']）

解决了我的问题。但我现在看到，我让它变得比使用rastercoords插件更难了。