javascript - Openlayers动态视口(viewport)宽度和高度分配

Question

我在 <div> 中显示了一个 openlayers map html页面中的标记。我使用 CSS 样式通过定义 map 划分的类来分配 map 尺寸。

<div id="map" class="largemap"></div>

在哪里

.largemap {
  width: 1200px;
  height: 600px;
  border: 1px solid #ccc;
}

我想根据用户的窗口大小动态更改 map 尺寸，因此我创建了一个样式元素并使用 javascript 将这个新类分配给 map 分区:

var mapElement = document.getElementById("map");
var sheet = document.createElement('style');
var newHeight = viewportheight-400; // previously acquired - working OK
var newWidth = viewportwidth-200; // previously acquired - working OK
var styleHTML = ".custommap {    width: "+newWidth+"px;    height: "+newHeight+"px;    border: 1px solid #ccc;}";
sheet.innerHTML = styleHTML;
document.body.appendChild(sheet);
mapElement.className = "custommap";

发生了 2 件意想不到的事情:

1. 只需将样式附加到文档即可更改 map 划分的类；

2. map 划分仍然使用“旧”边界(在缩放时未正确居中)；

谁能推荐一个更有效的策略来动态定义 openlayers 中的视口(viewport)？

Answer 1

更改容器大小后，您必须更新 map 大小并重新计算边界:

map.updateSize();
map.calculateBounds();

可以查看OL文档http://dev.openlayers.org/docs/files/OpenLayers/Map-js.html#OpenLayers.Map.updateSize