openlayers实现图层裁剪，只展示关心区域，抹掉无关区域，“抠”地图

先给大家看一下效果：

很久没有用ol了，今天突发奇想，想完成一下在ol中如何实现图层裁剪，抹掉消除非关心区域的地图的操作。过去写了有关于遮罩和掩膜的教程，现在看来好像有点低级，不足以满足需求，于是我们重新来做一下。

首先要知道ol官方是支持canvas参数传递的，就是说我们在写到比较核心的部分需要用到canvas的时候可以直接调用到context对象的。我们顺着这个思路，只需要使用ctx.clip( )这个关键的方法即可完成需求。

通常我们需要裁剪的图层都是栅格图层，比如说最经常用到的天地图。

在这里我们就以天地图为例子来演示一下如何实现裁剪。

首先第一步还是添加天地图：

  const token = "你的天地图token";
  let rasterLayer = new TileLayer({
    source: new XYZ({
      url:
        "https://t0.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l