傳單maxBounds自定義投影

我做了簡單的傳單example。它呈現每個位置和縮放都顯示的程序性貼圖。投影和CRS配置爲將lat和lng直接映射到x和y，而在zoom = 20時不進行任何轉換。您可以通過點擊地圖並查看帶有座標的彈出框來輕鬆檢查。傳單maxBounds自定義投影

var naturalZoom = 20; 

L.Projection.Direct = { 
    project: function (latlng) { 
     return new L.Point(latlng.lat, -latlng.lng); 
    }, 

    unproject: function (point) { 
     return new L.LatLng(point.x, -point.y); 
    } 
}; 

L.CRS.Wall = L.extend({}, L.CRS, { 
    projection: L.Projection.Direct, 
    transformation: new L.Transformation(1, 0, -1, 0), 

    scale: function (zoom) { 
     return Math.pow(2, zoom-naturalZoom); 
    } 
}); 

var map = L.map('map', { 
    crs: L.CRS.Wall, 
    maxBounds: new L.LatLngBounds([0,0], [4096, 4096]) 
}); 
map.setView([0,0], naturalZoom);

我試圖限制地圖的邊界（取消註釋行＃中的jsfiddle示例中的代碼的26），但是這破壞了整個層的拖動。有沒有人有自定義crs和maxBounds類似的問題？這可能是傳單庫中的一個錯誤嗎？

謝謝你的幫助。

來源

2013-02-05 Viktor Nikolaiev

傳單動畫拖動，當你放開鼠標時，它仍然會進一步移動。你設置的界限非常緊密。因此，拖動時你會撞到牆上。我沒有看到任何其他不尋常的事情。你能解釋一下你說拖延休息的原因嗎？ – flup

界限並不嚴密，它們設置爲矩形（0,0,4096,4096）。請看看http://jsfiddle.net/cMjZa/4/ 示例只需嘗試拖動和縮放，看看我在說什麼。啊哈！ –

啊！是的，現在我明白了！不過，我認爲一個屏幕像素是一個地圖像素嗎？然後它有點緊。 – flup

我認爲問題是您的project/unproject壞了？無論如何，你不必手工做任何的這個，Leaflet.js提供了對CRS和PX之間的轉換經緯度信息，設置你的地圖像這樣：

var map = L.map('map', { 
    maxZoom: 20, 
    minZoom: 20, 
    crs: L.CRS.Simple 
}).setView([0, 0], 20);

，然後設置地圖邊界（在我的形象是1024x6145）：我們正在使用map.unproject從PX去經緯度

var m = { 
    x: 102, // px coordinates on full sized image 
    y: 404 
} 
var marker = L.marker(map.unproject([m.x, m.y], map.getMaxZoom())).addTo(map);

注：

var southWest = map.unproject([0, 6145], map.getMaxZoom()); 
var northEast = map.unproject([1024, 0], map.getMaxZoom()); 
map.setMaxBounds(new L.LatLngBounds(southWest, northEast));

然後，您可以添加標記。

我寫了how to do this in more detail, including how to split up your image但上面給出了基本的要點。

來源

2013-03-02 04:39:56 Soup

謝謝你的迴應。我的例子是使用簡單的crs。我想要實現的是在zoom = 20時使lat和lng與像素相同。例如，latlng（100,200）在該縮放處將具有層座標（200,100）。由於lat從底部到頂部增長，y座標從頂部到底部增長，因此我使用以下變換x = lng，y = -lat。一切工作正常，除了地圖的界限。當我使用簡單的轉換（x = lng，y = lat）界限工作的很好。但我必須做很多計算，否則可以通過傳單自動處理。 –

請看更新小提琴http://jsfiddle.net/cMjZa/2/ 它有兩個預測。 L.Projection.Direct1可以和邊界一起工作，但是lat從底部到頂部（我不想）。 L.Projection.Direct2：拉特從頂部到底部增長，但邊界不起作用 –

（我只能看到那個小提琴上的一個投影。）啊，對不起，我誤解了，我不知道沃爾只是一個克隆L .CRS.Simple。 Direct也是Leaflet的一個克隆？請注意，在我的示例中，我使用'map.unproject'將像素轉換爲latlng座標，然後使用它來設置邊界。傳單將始終在內部AFAIK使用latlng，但不能傳遞像素座標。請參閱http://jsfiddle.net/cMjZa/9/第29-32行。拖動仍然看起來有點不可思議，但我認爲這正在走向你想要的東西？ – Soup

傳單maxBounds自定義投影

回答

相關問題