如何在大型光栅图像上使用带有unproject（）和GeoJSON数据的Leaflet flyTo（）？

Question

我正在使用Leaflet建立一个故事地图，使用切成瓷砖的大图像而不是真实的世界＆＃39;地图数据。我使用此插件：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将您的坐标转换为可传递给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);
};

有了这个，每当你想转换你的＆＃34; raster＆＃34;如果坐标为Leaflet可用的内容，您只需使用xy(x, y)，x为水平值，y为垂直值。

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

由于你使用的是瓷砖而不是单个图像（在教程中用ImageOverlay拉伸以适应坐标），你应该修改CRS变换，这样在缩放0时，你的瓷砖{{ 1}}适合你的整个坐标。另请参阅Leaflet custom coordinates on image

即。在传单-rastercoords例子中：

• 原始光栅图像尺寸：3831像素宽x 3101像素高度
• 瓷砖尺寸：256 x 256像素
• 垂直＆＃34;光栅＆＃34;坐标在下降时会增加（而在传单教程中，它们会像纬度一样增加）。
• 平铺0/0/0实际上比原始图像覆盖更多，就像后者是4096 x 4096 px（其余部分用白色填充）

确定新的CRS：

• Tile 0/0/0应覆盖从左上角[0,0]到右下角[4096,4096]的坐标（即256 * 2 ^ 4 = 256 * 16 = 4096）=＆gt; transformation系数0/0/0和a应为c
• 无需抵消=＆gt;偏移1/16和b为d
• 没有0垂直坐标=＆gt;的回复y是积极的

因此，要使用的新CRS将是：

c

现在您的L.CRS.MySimple = L.extend({}, L.CRS.Simple, { // coefficients: a b c d transformation: new L.Transformation(1 / 16, 0, 1 / 16, 0) }); 非常相似，但许多其他内容也兼容：

flyTo

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