2013-03-01 49 views
0

我想在理想情況下邊對邊顯示幾個較長的(4096x20k)圖像,但是之間的一些填充也不會造成傷害。 。 。Shifting TileLayer in leaflet.js

如果圖像看起來像[],則所需的輸出將如下所示:[] [] [] [],並且仍然適當地平鋪。 。 。

我知道一些我可以做到這一點的方法,但我最想找的是這樣的: L.tileLayer('blah {x} blah {y} blah {z}',{shiftTilesBy: [xOffset,yOffset]});

我似乎甚至不能真正弄清楚傳單如何計算平鋪圖像的範圍。是否繼續在每個軸上請求平鋪,直到404?我希望能夠將圖像保存在不同的圖層中,因爲我經常更新其中的一個或多個圖像,因此將圖像預先融合成一個大圖像從緩存等角度來看確實沒有吸引力。

如果這個不存在作爲一個插件或一些這樣的我會寫和貢獻它。因此,作爲一個後續問題,我是否應該開始在源代碼中尋找來創建它的地方?

謝謝。

回答

1

而不是有4個單獨的地圖,你可以使用一個地圖,並使用覆蓋將地圖分成4個瓷磚?

這裏的HTML:

<body> 
    <div id="map"></div> 
    <div id="overlay"> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
    </div> 
</body> 

而CSS:

html { 
    overflow:hidden; 
} 

html, 
body, 
#map, 
#overlay { 
    width:100%; 
    height:100%; 
    position:absolute; 
} 

#overlay { 
    position:absolute; 
    top:0; 
    left:0; 
    /* Requred if you want the map to respond to pointer events */ 
    pointer-events:none; 
} 

#overlay div { 
    height:100%; 
    border-right:15px solid #FFFFFF; 
    width:23%; 
    float:left; 
} 

而且現在整個事情,這裏是a jsFiddle

而這裏的結果: Leaflet 4-column example

+0

Heheh。那麼這是一個很棒的演繹,但我實際上正在尋找能夠顯示4個(獨立)圖像而不是4個看起來像4的圖像。 – meawoppl 2013-03-04 04:31:34

+1

也許是一個快速模擬來幫助我們可視化你要找的東西。 – 2013-03-04 18:23:15