Openlayers в div со свойством zoom zoom

Question

У меня есть веб-сайт, на котором контейнер div настроен так, чтобы он соответствовал окну браузера.Это делается с помощью атрибута "zoom" в стиле css.

Внутри этого контейнера div у меня есть div для карты открытых слоев.Теперь проблема в том, что этот масштаб контейнера div разрушает размер карты openlayers.Это не сделано с map.updatesize (), потому что фактический размер div не изменяется с различными размерами окна.Таким образом, div карты имеет правильный размер.Но отображаемая карта, кажется, больше, чем div, в котором она отображается. В конце карта выглядит размытой, а увеличение и уменьшение масштаба на карте выполняется не в месте расположения мыши, а немного в стороне.

Итак, есть идеи, как я могу это исправить?Fyi я пробовал с 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;
}