javascript - Openlayer使用prerender和postrender事件添加加载指示器(Openlayers add loading indicator using prerender and postrender events)

Question

It's about VectorImage: https://openlayers.org/en/latest/apidoc/module-ol_layer_VectorImage-VectorImageLayer.html

(关于VectorImage： https ://openlayers.org/en/latest/apidoc/module-ol_layer_VectorImage-VectorImageLayer.html)

I can't get it to work properly.

(我无法使其正常工作。)

For testing purposes, I add a fullscreen div on top of my map in the prerender event and remove this div in postrender event.

(为了进行测试，我在prerender事件中在地图顶部添加了全屏div，并在postrender事件中删除了该div。)

In the end, I want to add a spinning loading animation in the middle of my div and block map interaction, if rendering process is going on.

(最后，如果渲染过程正在进行中，我想在div和块图交互的中间添加一个旋转的加载动画。)

I have two divs, one for the map and one for the loading indicator:

(我有两个div，一个用于地图，另一个用于加载指标：)

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

My css styles:

(我的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;
          }

Global reference

(全球参考)

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

And the events

(和事件)

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

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

With that code I see my div at the beginning.

(使用该代码，我会在开始时看到div。)

When my map is ready, the div is being removed.

(当我的地图准备好时，将删除div。)

But with any other interaction my div never beeing added, even if I can clearly see the logs in the console, that the events are fired.

(但是，即使我可以在控制台中清楚地看到日志，也无法添加任何其他交互，即使我在控制台中看到日志，也不会触发事件。)

  ask by R. Kut translate from so

Answer 1

You could try using styles instead of removing and appending the element, something like this:

(您可以尝试使用样式，而不是删除和附加元素，如下所示：)

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

with CSS:

(使用CSS：)

.hidden {  
  display: none;
}

Then remove the class on prerender and add it on postrender .

(然后在prerender上删除该类，并在postrender上添加它。)

Otherwise, you could try console logging document.getElementsByTagName('body')[0] and myDiv to see if the correct element is being appended to the correct parent.

(否则，您可以尝试控制台记录document.getElementsByTagName('body')[0]和myDiv以查看是否将正确的元素附加到正确的父对象上。)