openlayers之渲染事件运行顺序实战案例

1.事件中文介绍ol/render/Event~RenderEvent

postcompose

图层组合后触发。地图调度时，事件对象不会有集合context。图层调度时，事件对象会有集合context。目前只有 WebGL 图层会调度此事件。

postrender

图层渲染完成后触发。

precompose

在图层组合前触发。地图调度时，事件对象不会有集合context。图层调度时，事件对象会有集合context。目前只有 WebGL 图层会调度此事件。

prerender

在渲染图层之前触发。

rendercomplete

渲染完成时触发，即所有源和图块均已为当前视口完成加载，并且所有图块均已淡入。事件对象不会有集合context。

官网api地址：https://openlayers.org/en/latest/apidoc/module-ol_render_Event-RenderEvent.html

2.测试案例

代码中监听事件的顺序：

  map.once('postcompose',(event)=>{
      console.log("2、图层组合后触发")
    })
    map.once('postrender',(event)=>{
      console.log("4、图层渲染完成后触发")
    })
    map.once('precompose',(event)=>{
      console.log("1、在图层组合前触发")
    })
    map.once('prerender',(event)=>{
      console.log("3、在渲染图层之前触发")
    })
    map.once('rendercomplete',(event)=>{
      console.log("5、渲染完成时触发")
    })

运行结果：（在代码顺序不定的情况下，事件监听运行顺序是一致的），至于prerender（3在渲染图层之前触发）为什么没有监听运行，还未可知！