时间戳

首页 > 解决方案 > 无法使用 XYZ 瓷砖居中地图

reactjs - 无法使用 XYZ 瓷砖居中地图

问题描述

我使用 gdal2tiles 命令行工具将图像切成 XYZ 切片。地图加载正常，所有预期的图块都处于工作状态，但是有两个问题（可能相关）：

  1. {z}/{x}/{y} 格式正在向不存在的图块发出一堆请求。
  2. 我似乎无法准确地将地图或其范围居中（这样我就可以防止从地图上平移）。

我试图首先使用 fit() 以便地图完全可见，然后 on('change:resolution') 更新范围以防止平移超出地图边缘（目前不工作）

代码大约有 200 行，所以我会在下面留下链接

我尝试设置一个 JSFiddle，但无法让它工作。或者，您可以查看现场演示或克隆 repo，这应该可以正常工作。

现场演示：https : //dndiaries.netlify.com/faerun 回购：https ://gitlab.com/heartofcode/swamptrek

没有错误消息，但“中心”不在渲染地图的中心

标签： reactjsopenlayersopenlayers-5

解决方案

您的地图设置为浏览器窗口的 100% 宽度和高度。您正在调用不存在的图块，因为它试图平铺整个地图并试图抓取您已删除的图块。尝试在图层上设置范围，而不是在地图上设置不调用您想要的位置之外的范围。您也无法将占据整个空间的地图居中。瓷砖被放置在它们应该去的地方，您可以调整地图的高度和宽度以适应它们，然后将其居中。或者在“更改：分辨率”上更改地图 div 大小而不是范围，您还可以更新缩放级别以确保地图在更改大小时没有空白。如果您不希望用户四处移动，您还可以关闭（设置为 false）交互和控件，例如拖动和缩放。

推荐阅读