在leaflet.js中移动了TileLayer

Question

I want to display several longish (4096x20k) images edge-to-edge ideally, but some padding between wouldn't hurt either. 我希望在边缘到边缘显示几个较长的（4096x20k）图像，但是之间的一些填充也不会对它们造成伤害。 . 。 . 。

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]}); 我知道有几种方法可以实现此目的，但是我理想中的寻找对象是：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? 它是否一直要求每个轴上的图块直到404为止？ 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? 除了使用4张单独的地图，您还可以使用一张地图并使用叠加层将地图分成4个图块吗？

Here's the HTML: 这是HTML：

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

And the CSS: 和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 . 现在整个shebang，这是一个jsFiddle 。

And here's the result: 结果如下： 单张4列示例

在leaflet.js中移动了TileLayer

问题描述

1 个解决方案

解决方案1
1 2013-03-03 22:57:36

在leaflet.js中移动了TileLayer

问题描述

1 个解决方案

解决方案1 1 2013-03-03 22:57:36

解决方案1
1 2013-03-03 22:57:36