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

我正在用Leaflet制作一个故事地图，使用切成瓷砖的大图像而不是“真实世界”地图数据。我使用这个插件：https://commenthol.github.io/leaflet-rastercoords/这种回购：https://github.com/jackdougherty/leaflet-storymap 如何在大光栅图像上使用Leaflet flyTo（）和unproject（）和GeoJSON数据？

我加载数据以GeoJSON和unprojecting坐标正确绘制他们对我的形象图：

$.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([feature.geometry.coordinates[1], feature.geometry.coordinates[0] ], feature.properties['zoom']);

我试图传递unproject：地理空间坐标的方式从地图上墙map.flyTo（），这是从我的JSON文件调用geometry.coordinates，但不unprojecting他们这么一个FlyTo（）被他们解释ed坐标变量，然后map.flyTo（）和嵌套函数的变化，如map.flyTo.unproject（...，但没有运气。

如何将我的栅格坐标传递给flyTo（）？

我不仅是Leaflet的新手，还是JavaScript的新手。我砍了这么远，但我很难过。我相信解决方案是显而易见的。任何帮助是极大的赞赏。

来源

2017-05-18 Jared Nielsen

你的情况，你可能只需要使用rc.unproject你的坐标转换成经纬度，你可以传递给flyTo转换：

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

话虽这么说，我必须承认我完全不看点使用leaflet-rastercoords插件，因为您可以轻松地按照传单教程"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); 
};

有了这个，只要你想转换你的“光栅”坐标成单张可用的东西，你只想用xy(x, y)与x是你的水平值，y您的垂直之一。

附加的好处是，许多其他的事情将变得容易兼容。

由于您使用的瓷砖，而不是单个图像（即拉伸与教程ImageOverlay为了适应坐标），你应该修改CRS改造，使缩放0，你的瓷砖0/0/0适合你的整个坐标。又见Leaflet custom coordinates on image

即，在小叶-rastercoords例子的情况下：

原始光栅图像尺寸：3831像素宽×3101像素高度
瓷砖尺寸：256×256像素
垂直“光栅”坐标而下降增加（而在Leaflet教程中，它们会像纬度一样增加）。
瓷砖0/0/0实际上涵盖比原始图像更，仿佛后者是4096×4096像素（其余部分用白色填充）

确定新的CRS的：

磁砖0/0/0应涵盖从坐标左上角[0,0]到右下[4096，4096]（即256 * 2^4 = 256 * 16 = 4096）=>transformation coeffi cients 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非常相似，但许多其他英格斯同时也兼容：改编自瓣叶rastercoords例如

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

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

来源

2017-05-19 06:40:50 ghybs

感谢您对这个非常完整的答案。只需使用 'map.flyTo（ rc.unproject（feature.geometry.coordinates）， feature.properties ['zoom'] ）;' 解决了我的问题。但是我现在看到，我比使用rastercoords插件要难得多。 –

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

回答

相关问题