Openlayers добавляют индикатор загрузки, используя события prerender и postrender

Question

Это про VectorImage: https://openlayers.org/en/latest/apidoc/module-ol_layer_VectorImage-VectorImageLayer.html

Я не могу заставить его работать должным образом. В целях тестирования я добавляю полноэкранный div в верхней части моей карты в событии prerender и удаляю этот div в событии postrender. В конце я хочу добавить вращающуюся загрузочную анимацию в середине моего взаимодействия с картой div и картой, если идет процесс рендеринга.

У меня есть два div, один для карты и один для загрузкииндикатор:

<div id="map" class="map">
<div id="test" class="overlay"></div>

Мои стили CSS:

.map {
        height: 100%;
        width: 100%;
     }

html, body {margin:0;padding:0;height:100%}
div {width:100px;height:100%;}

.overlay {  
            position:absolute;
            top:0;
            left:0;
            width:100%;
            height:100%;
            z-index:1000;
            background-color:red;
          }

Глобальная ссылка

var myDiv = document.getElementById("test");

И события

vectorLayer.on('postrender', function(event) {
    myDiv.remove();
    console.log('post');
});

vectorLayer.on('prerender', function(e) {
    document.getElementsByTagName('body')[0].appendChild(myDiv);
    console.log('pre');
});

С этим кодомЯ вижу мой div в начале. Когда моя карта готова, div удаляется. Но при любом другом взаимодействии мой div никогда не добавлялся, даже если я четко вижу логи в консоли, что события запускаются.

Answer 1

Вы можете попробовать использовать стили вместо удаления и добавления элемента, что-то вроде этого:

<div id="test" class="overlay hidden"></div>

с CSS:

.hidden {  
  display: none;
}

Затем удалите класс на prerender идобавьте его в postrender.

В противном случае вы можете попробовать протоколирование консоли document.getElementsByTagName('body')[0] и myDiv, чтобы проверить, добавляется ли правильный элемент к правильному родительскому элементу.