如何在大光柵圖像上使用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數據？

回答

相關問題