五十二、openlayers官网示例Layer Swipe解析——绘制卷帘效果地图、动态裁剪图层

官网demo地址：

Layer Swipe

这篇示例讲了卷帘效果。

所谓的卷帘效果实际上是在地图上添加了两个不同的图层，通过滑块滑动实时剪裁上层图层的图像，漏出下层图层。方便观察对比两个图层的不同。

首先先初始化地图，并加载底层图层

  initMap() {
      this.map = new Map({
        target: "map",
        view: new View({
          center: [0, 0],
          zoom: 2,
          projection: "EPSG:4326",
        }),
      });
    },
    addUnderLayer() {
      let underLayer = new TileLayer({
        source: new StadiaMaps({
          layer: "outdoors",
        }),
      });
      this.map.addLayer(underLayer);
    },

 然后加载上层图层

 const layer = new TileLayer({
        source: new StadiaMaps({
          layer: "stamen_terrain_background",
        }),
 });
 this.map.addLayer(layer);

 上层图层的裁剪效果主要依靠滑块滑动时调用this.map.render()触发两个事件prerender（图层渲染前）和postrender（图层渲染后）来实现的。

swipeChange() {
      this.map.render();
},
layer.on("prerender", (event) => {
        const ctx = event.context;
        const mapSize = this.map.getSize();
        const width = mapSize[0] * (this.swipeVal / 100);
        const tl = getRenderPixel(event, [width, 0]);
        const tr = getRenderPixel(event, [mapSize[0], 0]);
        const bl = getRenderPixel(event, [width, mapSize[1]]);
        const br = getRenderPixel(event, mapSize);
        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();
        ctx.clip();
      });

 layer.on("postrender", function (event) {
        const ctx = event.context;
        ctx.restore();
 });

 代码看着不多，但要真正理解为啥要这么写我们不妨先来看一个小示例

使用canvas加载一张图片，并在其上层绘制一个圆形，裁剪下方的图片。

 window.onload = function () {
            const canvas = document.getElementById('canvas');
            const ctx = canvas.getContext('2d');

            const image = new Image();
            image.src = 'https://t7.baidu.com/it/u=2604797219,1573897854&fm=193&f=GIF';  // 替换为您的图