Openlayers 动态视口宽度和高度分配答案

【问题标题】：Openlayers dynamic viewport width and height assignmentOpenlayers 动态视口宽度和高度分配
【发布时间】：2014-12-03 14:32:45
【问题描述】：

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

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

在哪里

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

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

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件意想不到的事情：

只需将样式附加到文档即可更改地图划分的类；
地图分割仍使用“旧”边界（缩放时未正确居中）；

谁能推荐一种更有效的策略来在 openlayers 中动态定义视口？

【问题讨论】：

可能this 是你所追求的吗？尝试点击全屏按钮并调整窗口大小。
你能不能只设置mapdiv.style.width=newWidth（高度也一样）。显然，您必须从 clientHeight/Width 减去地图之外的任何其他固定宽度 div 来解决这个问题。如果它都是动态的，那么您可以使用 $('#divid').height() 使其他 div 变暗，然后将剩下的部分提供给地图 div。
@JohnBarça 实际上，我清理了我的 HTML 和 css 并消除了一些混乱，如果我能解决缩放问题，我非常接近使这种方法工作。但我一定会试一试您的建议，因为它可能会减少宝贵的处理时间。
对不起，我误解了这个问题，我以为你在谈论地图 div 本身，而不是其中的映射范围。但是，无论如何你都会得到一个答案，而且很简单。

标签： javascript css openlayers gis

【解决方案1】：

容器大小更改后，您必须更新地图大小并重新计算边界：

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

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

【讨论】：