在div中使用缩放样式属性打开图层

Question

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

在这个容器 div 中，我有用于 openlayers 地图的 div。 现在的问题是容器 div 的缩放破坏了 openlayers 贴图的大小。 它不是用map.updatesize() 完成的，因为div 的实际大小不会随着不同的窗口大小而改变。所以地图的 div 大小是正确的。 但显示的地图似乎比它显示的 div 大。 最后，地图看起来很模糊，并且地图的放大和缩小不是针对鼠标位置进行的，而是稍微向侧面进行。

那么，我有什么办法可以解决这个问题吗？ 仅供参考，我尝试过 ol3 和 ol5。没有区别。

提前致谢。

Answer 1

首先，我添加了反向缩放系数作为画布 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";`

Answer 2

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

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