Openlayers 使用预渲染和渲染后事件添加加载指示器

Question

这是关于 VectorImage 的： https ://openlayers.org/en/latest/apidoc/module-ol_layer_VectorImage-VectorImageLayer.html

我无法让它正常工作。 出于测试目的，我在 prerender 事件中的地图顶部添加了一个全屏 div，并在 postrender 事件中删除了这个 div。 最后，如果渲染过程正在进行，我想在我的 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以查看是否将正确的元素附加到正确的父级。