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

Openlayer使用prerender和postrender事件添加加载指示器

1 个答案: