openlayers+extent 不同图形裁剪地图

效果展示

图形绘制

详细代码和逻辑 见openlayers Draw 理解、特殊图形创建

裁剪逻辑

mounted:{
  gaodeMapLayer.on("prerender", (ev) => {
      this.getParameters(ev, map);
    });
}
methods:{
    getParameters(evt, map) {
      this.evt = evt;
    },
    //点击裁剪按钮
     tailor_() {
      let Features = source && source.getFeatures(),
        len = Features ? Features.length : 0;
      if (len <= 0) {
        return;
      }
      if (Features.length > 1) {
        this.$message({
          message: "最多绘制一个图形",
          type: "warning",
          showClose: true,
        });
        return;
      }

      let highlight = Features[0],
        { evt, map } = this;
      var ctx = evt.context;
      var vecCtx = getVectorContext(evt);
      ctx.fillStyle = "rgba(0,0,0,.5)";
      ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
      ctx.save();
      vecCtx.drawGeometry(highlight.getGeometry());
      ctx.lineWidth = 0;
      ctx.stroke();
      ctx.clip();
      source = null;
      vector.setSource(source);
      let extent = highlight.getGeometry().getExtent()；
      gaodeMapLayer.setExtent(extent);
      vector.setExtent(extent);
    },
}