OpenLayers: Как я могу перерисовать карту после сворачивания боковой панели?

Question

OpenLayers: Как я могу перерисовать карту после сворачивания боковой панели?

1

Я использую OpenLayers для отображения карты и AdminLte для интерфейса.

Моя проблема: при сворачивании основной левой боковой панели на заданной странице все поля и то, что они содержат, меняют размер (я действительно не знаю, как это сделать), поэтому карты становятся больше. Проблема в том, что когда это происходит, все функции, отображаемые на картах, по-видимому, меняют положение и не там, где они должны быть больше.

Что бы я хотел: Чтобы перерисовать карту после сбоя боковой панели.

Любое предложение?

Я старался:

$('.navbar-collapse').on('shown.bs.collapse', function() {
    map.updateSize();
});

а также:

$('.sidebar').on('shown.bs.collapse', function() {
   map.updateSize();
});

но безрезультатно...

EDIT: Мой вопрос похож на этот: OpenLayers: как переориентировать координаты мыши и векторные слои после рендеринга css-рендеринга map div, но его решение не работает для меня :)

РЕДАКТИРОВАНИЕ 2: просто для того, чтобы уточнить: я думаю, что решение моей проблемы - вызвать метод map.updateSize(), когда боковая панель закончит свертывание. Проблема в том, что я не знаю, как поймать момент, когда боковая панель закончила рушиться/расширяться!

Raphaël 27 июль 2017, в 17:03

Источник

Теги:

javascript

css

gis

openlayers

adminlte

2 ответа

0

Если вы пытаетесь перерисовать карту после сбоя боковой панели, измените обработчик событий на следующее:

$('.sidebar').on('hidden.bs.collapse', function() {
   map.updateSize();
});

В соответствии со списком обработчиков событий здесь событие hidden.bs.collapse запускается, когда элемент hidden.bs.collapse скрыт от пользователя.

G.Hunt 27 июль 2017, в 11:38

0

Извините, я довольно новичок в OpenLayers :) Но какой будет ваша карта переменных? Объект ol.Map?
Raphaël 27 июль 2017, в 14:19
0

Ваша переменная будет тем, что вы использовали для создания экземпляра вашей карты (будь то в том же файле или в другом месте). Где-то в вашем коде вы должны иметь немного кода, похожего на var map = new OpenLayers.Map('map'); ?
G.Hunt 27 июль 2017, в 14:25
0

Я делаю! :) Но когда я попытался сделать map.getSource (). Change (); У меня было: Uncaught TypeError: map.getSource не является функцией. Поэтому я посмотрел на API и, очевидно, у объекта ol.Map нет метода .getSource ().
Raphaël 27 июль 2017, в 14:28
0

Хорошо, как насчет map.updateSize(); ?
G.Hunt 27 июль 2017, в 14:39
0

Этот полностью работает, и это метод, который я хотел использовать в первую очередь. (см. две строки, которые я уже пробовал) Моя проблема в том, что я не знаю, когда вызывать этот метод, так как я не знаю, как поймать момент, когда боковая панель закончила свертывание / растяжение :)
Raphaël 27 июль 2017, в 14:42
0

Ах, хорошо, неправильно истолковал ваш вопрос. Обновлю ответ.
G.Hunt 27 июль 2017, в 14:50
0

И у меня вопрос!
Raphaël 27 июль 2017, в 14:53
0

Ваше новое решение не работает. По какой-то причине эта функция никогда не срабатывает!
Raphaël 28 июль 2017, в 07:19

Показать ещё 6 комментариев

Ещё вопросы

Извините, я довольно новичок в OpenLayers :) Но какой будет ваша карта переменных? Объект ol.Map?
Ваша переменная будет тем, что вы использовали для создания экземпляра вашей карты (будь то в том же файле или в другом месте). Где-то в вашем коде вы должны иметь немного кода, похожего на var map = new OpenLayers.Map('map'); ?
Я делаю! :) Но когда я попытался сделать map.getSource (). Change (); У меня было: Uncaught TypeError: map.getSource не является функцией. Поэтому я посмотрел на API и, очевидно, у объекта ol.Map нет метода .getSource ().
Этот полностью работает, и это метод, который я хотел использовать в первую очередь. (см. две строки, которые я уже пробовал) Моя проблема в том, что я не знаю, когда вызывать этот метод, так как я не знаю, как поймать момент, когда боковая панель закончила свертывание / растяжение :)
Ах, хорошо, неправильно истолковал ваш вопрос. Обновлю ответ.
Ваше новое решение не работает. По какой-то причине эта функция никогда не срабатывает!

Raphaël · Accepted Answer · 2017-07-28T04-56-00.000Z

Временное решение, которое я нашел, это запустить тайм-аут, когда кнопка, запускающая боковую панель, сбрасывается, а затем вызывает метод map.updateSize():

  $('.sidebar-toggle').click(function(){
      setTimeout(function(){ map.updateSize(); }, 500);             
  });

Это работает... но это своего рода meh:/