Shifted TileLayer in leaflet.js

Question

I want to display several longish (4096x20k) images edge-to-edge ideally, but some padding between wouldn't hurt either. . .

The if an image looks like [], the desired output would be something like: [][][][], and still tile appropriately. . .

I know a couple hackey ways that I can do this, but what I was ideally looking for was something like: L.tileLayer('blah{x}blah{y}blah{z}', {shiftTilesBy: [xOffset, yOffset]});

I can't even seem to really figure out how leaflet figures out the extents of a tiled image. Do it just keep requesting tiles in each axis until it 404's? I am hoping to keep the images in different layers, as I am updating one or more of them often, and hence pre-fusing the images into one big one is really unattractive from a caching etc. standpoint.

If this dosen't exist as a plugin or some such I will write and contribute it. So, as a followup question, are there any places I should start looking in the source to create this?

Thanks.

Answer 1

Instead of having 4 separate maps, could you use one map and use an overlay to break the map into 4 tiles?

Here's the HTML:

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

And the 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;
}

And now the whole shebang, here is a jsFiddle .

And here's the result: 单张4列示例

Shifted TileLayer in leaflet.js

Question

1 answers

solution1
1 2013-03-03 22:57:36

Shifted TileLayer in leaflet.js

Question

1 answers

solution1 1 2013-03-03 22:57:36

solution1
1 2013-03-03 22:57:36