javascript - 如何根据容器大小设置 maxResolution？

Question

我创建了一个 openlayers map ，其最小缩放级别应固定为 2 .

如果 <div> 则效果很好。 ，包含 map ，大小约为 1000 px x 750 px :

现在我们的容器尺寸变化很大。这样我们就有了一个容器 div，也就是说 700px x 300px ，结果是:

现在我希望拥有与第一张图片相同的 map View ，以及第二张较小的容器尺寸/视口(viewport)。

通常我会调整缩放级别，但如果设置了最小缩放，我必须禁用 map 的平移。

我希望缩放级别与容器大小无关，但事实并非如此，因此我需要找到一种方法来根据 maxResolution 限制显示的数据，并相应地限制平移。

现在我找不到合适的方法来做到这一点。任何人都可以为我提供一个关于如何计算 openlayers map ( View )的 maxResolution 属性的函数或公式，以便无论容器/目标(div)大小如何，显示的 map 范围始终相同？

Answer 1

您并不是在寻找某种方法来设置 maxResolution 或 minResolution

这就是你需要的http://openlayers.org/en/latest/apidoc/ol.View.html#fit

调整您的 map

minLongitude: -80
maxLongitude: 80
minLatitude: -180
maxLatitude: 180

示例:调整到您想要的 View 第一个数组 => [minx, miny, maxx, maxy]。我的坐标位于 EPSG:4326!

map.getView().fit([-80, -180, 80, 180], { padding: [0, 0, 0, 0], size: map.getSize() });

如果您需要示例或不明白，只需询问，这是一种方法