Обозначение ширины и высоты динамического представления окна Openlayers

Question

У меня есть карта открытых слоев, отображаемая в теге <div> на странице html. Я использую стили 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 незапланированные вещи:

1. просто добавление стиля к документу изменяет класс деления карты;

2. Отделение карты по-прежнему использует «старые» границы (не центрируется правильно при масштабировании);

Может ли кто-нибудь рекомендовать более эффективную стратегию для динамического определения области просмотра в openlayers?

Answer 1

После того, как размер контейнера изменяется вам необходимо обновить размер карты и пересчитывать границы:

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

Вы можете проверить в документации по OL http://dev.openlayers.org/docs/files/OpenLayers/Map-js.html#OpenLayers.Map.updateSize