Question

我想要理想地显示几个边缘到边缘的长（4096x20k）图像，但是之间的一些填充也不会受到影响。。。

如果图像看起来像[]，则所需的输出将类似于：[] [] [] []，并且仍然适当地平铺。。。

我知道有几种hackey方式可以做到这一点，但我理想的是： L.tileLayer（'blah {x} blah {y} blah {z}'，{shiftTilesBy：[xOffset，yOffset]}）;

我甚至无法弄清楚传单是如何计算出平铺图像的范围的。它只是继续请求每个轴上的瓷砖，直到它的404？我希望将图像保持在不同的层中，因为我经常更新它们中的一个或多个，因此将图像预先融合成一个大图像从缓存等角度来看真的没有吸引力。

如果这不作为插件存在或者其他一些我会写并贡献它。所以，作为一个后续问题，我是否应该在源头开始寻找创建它的地方？

感谢。

Answer 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;
}

现在整个shebang，这里是a jsFiddle。

这是结果： Leaflet 4-column example

在leaflet.js中移位TileLayer

1 个答案: