openlayer地图裁切

openlayer地图裁剪

在使用openlayer开发地图应用时，可能会要求根据只显示某个范围内的底图或数据，这个功能写起来还是比较简单的。只需要用到一点canvas的知识就可以。

创建图层

不管是Tile图层还是Vector图层，按照官方示例创建并添加数据就可以了。重点在下一步。

layer = new Tile(...);

创建裁切feature

需要根据范围创建一个裁切范围的polygon feature。

import Feature from 'ol/Feature';
import Polygon from "ol/geom/Polygon"
let clipFeature = new Feature({
    geometry: new Polygon(coords),
})

给图层增加监听

需要增加的监听有两个，prerender和postrender。
prerender是渲染前触发，在这一步需要保存原来的渲染状态，再对渲染范围进行裁剪。
postrender是渲染后触发，在这一步要调用方法还原渲染状态。

import { getVectorContext } from 'ol/render';
layer.on("prerender",event=>{
    let vectorContext = getVectorContext(event);
    event.context.globalCompositeOperation = 'source-over';
    let ctx = event.context;
    ctx.save();
    vectorContext.drawFeature(clipFeature, new style(...));// 可以对边界设置一个样式
    ctx.clip();
})
layer.on("postrender", (event) => {
    let ctx = event.context;
    ctx.restore();
})

但这样写了之后发现当视野范围看不到裁切范围时，地图又会重新显示出来。因此需要改进一下。

改进

给layer添加一个显示范围，这样范围之外的内容就不会显示，范围内的内容就会被裁切。

layer.setExtent(clipFeature.getGeometry().getExtent())

最终效果