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

Question

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

我无法让它正常工作。出于测试目的，我在预渲染事件中在 map 顶部添加了一个全屏 div，并在后渲染事件中删除了该 div。最后，如果渲染过程正在进行，我想在 div 和 block 图交互的中间添加一个旋转加载动画。

我有两个 div，一个用于 map ，一个用于加载指示器:

<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。当我的 map 准备好后，div 就会被删除。但对于任何其他交互，我的 div 从未被添加，即使我可以清楚地看到控制台中的日志，事件被触发。

Answer 1

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

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

使用 CSS:

.hidden {  
  display: none;
}

然后删除 prerender 上的类并将其添加到 postrender 上。

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