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())