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

Question

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

我无法让它正常工作。出于测试目的，我在预渲染事件中的地图顶部添加了一个全屏 div，并在渲染后事件中删除了这个 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 上的 class 并在 postrender 上添加它。

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

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

Openlayers add loading indicator using prerender and postrender events

javascript

dom

openlayers