我有一个网站,其中设置了一个容器 div,以便它适合浏览器窗口。 这是通过 css 样式“zoom”属性完成的。
在这个容器 div 中,我有用于 openlayers 地图的 div。 现在的问题是容器 div 的缩放破坏了 openlayers 贴图的大小。 它不是用map.updatesize() 完成的,因为div 的实际大小不会随着不同的窗口大小而改变。所以地图的 div 大小是正确的。 但显示的地图似乎比它显示的 div 大。 最后,地图看起来很模糊,并且地图的放大和缩小不是针对鼠标位置进行的,而是稍微向侧面进行。
那么,我有什么办法可以解决这个问题吗? 仅供参考,我尝试过 ol3 和 ol5。没有区别。
提前致谢。
首先,我添加了反向缩放系数作为画布 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";`
你必须通过CSS位置和宽度/高度来解决这个问题,而不是缩放。试试这个:
html, body, #divContainer, #map {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}