openlayers支持卷动效果

首先展示官网所呈现的实际应用效果：官网

实现的大概思路：

• 对位于最上层图层的对象进行事件监听
  • 所监听的事件类别为RenderEvent渲染事件；该类事件包含多种类型：其中应用了prerender与postrender两种
  • 通过input标签实现对卷帘功能的操控，该标签的type属性被设置为range，从而形成滑块交互效果。实际上，input标签具备多种属性类型，具体可参见：类型
  • 将input标签与input事件进行绑定，用以监测数值的变化，并据此触发地图的重新渲染过程。

以下是代码，使用vue框架

只需在mainjs文件中引用ol.css文件即可

    <template>
      <div class="container">
    <div id="map"></div>
    <input type="range" ref="swipe" style="width: 100%" @input="handleInput" />
      </div>
    </temp