五十三、openlayers官网示例Layer Spy解析——跟随鼠标透视望远镜效果、图层剪裁

官网demo地址：

Layer Spy

 这篇实现了鼠标跟随望远镜效果，鼠标移动时绘制一个圆形的剪裁区剪裁上层图层。

container.addEventListener("mousemove", function (event) {
      mousePosition = map.getEventPixel(event);
      map.render();
    });

    container.addEventListener("mouseout", function () {
      mousePosition = null;
      map.render();
    });

通过map.render()触发prerender，postrender两个函数来完成裁剪，其原理和上篇的卷帘效果一样。

上篇地址： 

 完整代码：

<template>
  <div class="box">
    <h1>Layer Spy</h1>
    <div id="map" class="map"></div>
  </div>
</template>

<script>
import StadiaMaps from "ol/source/Stad