Question

我有一个网站，其中设置了一个容器div，以使其适合浏览器窗口。这是通过css样式的“ zoom”属性完成的。

在此容器div中，我有openlayers地图的div。现在的问题是容器div的这种缩放破坏了openlayers地图的大小。它未使用map.updatesize（）完成，因为div的实际大小不会随不同的窗口大小而变化。因此，地图的div大小正确。但是显示的地图似乎比其显示所在的div大。最后，地图看起来很模糊，并且在地图上放大和缩小的操作并不是鼠标位置，而是一点到另一边。

那么，有什么想法可以解决这个问题？仅供参考，我尝试使用ol3和ol5。没什么。

谢谢。

Answer 1

您必须通过CSS位置和宽度/高度（而不是缩放）来解决此问题。试试这个：

html, body, #divContainer, #map {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}

Answer 2

好吧，我明白了。

首先，我将反转的缩放因子添加为画布div的缩放。

然后在加载地图后，我将地图的大小更改为缩放比例，以使其位置和所有位置都适合在旧位置。

        var OldWidth = parseInt(MapElement.style.width);
        MapElement.style.width = ZoomFactor*OldWidth+"px";

        var OldHeight = parseInt(MapElement.style.height);
        MapElement.style.height = ZoomFactor*OldHeight+"px";

        var OldLeft = parseInt(MapElement.style.left);
        MapElement.style.left = ZoomFactor*OldLeft+"px";

        var OldTop = parseInt(MapElement.style.top);
        MapElement.style.top = ZoomFactor*OldTop+"px";`

完成。：-）

div中的Openlayers具有缩放样式属性

2 个答案: