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以查看是否将正确的元素附加到正确的父对象上。)