openlayers 卷帘

注意 卷帘元素为map子集  

  <div id="map" ref="map" style="width: 100%;height:100%;background: transparent;">

      <div id="swipeContainer" v-show="openSwipe">

        <img class="handle" draggable="false"  src="../../assets//hldsj_img/grass/silder.png" alt="">

      </div>

    </div>

-------------------------------------------------

打开需要展示卷帘页面是时初始化的代码

   setTimeout(() => {

          var swipe = document.getElementById("swipeContainer");

          var obj = {};

          swipe.onmousedown = function (event) {

            var e = event || window.event;

            // 鼠标点击元素那一刻相对于元素左侧边框的距离=点击时的位置相对于浏览器最左边的距离-物体左边框相对于浏览器最左边的距离

            obj.diffX = e.clientX - this.offsetLeft;

            document.onmousemove = function (event) {

              var e = event || window.event;

              var moveX = e.clientX - obj.diffX;

              if (moveX < 0) {

                moveX = 0

              } else if (moveX > window.innerWidth - swipe.offsetWidth) {

                moveX = window.innerWidth - swipe.offsetWidth

              }

              swipe.style.left = moveX + 'px';

              //重新渲染图层

              that.mapObject.render();

            };

            document.onmouseup = function () {

              this.onmousemove = null;

              this.onmouseup = null;

            }

          };

        }, 100)

----------------------------------------------------------

设置为卷帘图层（覆盖层layer），也就是右侧拉过来的图层

  let that = this

      layer.on('prerender', function (event) {

        var swipe = document.getElementById("swipeContainer");

        var ctx = event.context;

        //计算图层在canvas画布上需要显示的范围

        var mapSize = that.mapObject.getSize();

        var height = event.context.canvas.height;

        var width = event.context.canvas.width;

        var swipeWidth = swipe.offsetLeft * width / mapSize[0];

        var tl = [swipeWidth, 0];

        var tr = [width, 0];

        var bl = [swipeWidth, height];

        var br = [width, height];

        ctx.save();

        //绘制裁剪路径

        ctx.beginPath();

        ctx.moveTo(tl[0], tl[1]);

        ctx.lineTo(bl[0], bl[1]);

        ctx.lineTo(br[0], br[1]);

        ctx.lineTo(tr[0], tr[1]);

        ctx.closePath();

        //裁剪，裁剪路径以外的部分不会绘制在canvas上下文中

        ctx.clip();

      });

      layer.on('postrender', function (event) {

        const ctx = event.context;

        ctx.restore();

      });

------------------------

关闭卷帘图层只能通过删除操作

mapObject.removeLayer(layer);

样式：根据情况修改

#swipeContainer {

  position: absolute;

  opacity: 0.8;

  height: 100%;

  width: .25rem;

  top: 0;

  left: 50%;

  cursor: col-resize;

  z-index: 2;

  background: rgba(0, 255, 54, 1);

  border-width: 0px 0.5px 0px 0.5px;

  border-style: solid;

  border-color: rgba(255, 255, 255, 1);

  box-shadow: 0px 2px 4px rgba(255, 255, 255, 1);

  .handle {

    margin-top: -0.9rem;

    margin-left: -0.9rem;

    top: 50%;

    left: 0;

    position: absolute;

    z-index: 30;

  }

}

#swipeContainer:hover {

  opacity: 0.6;

}