经纬志
首页 / OpenLayers / 使用示例

矢量图层裁剪

用画布路径保住一块区域,其余部分在绘制时被裁掉。

OpenLayers 10.3.1 · 更新 2026-10-28
源码与运行效果
运行效果

说明

图层级裁剪靠绘制上下文:在 prerender 里按多边形像素路径 clip(),在 postrender 里 restore()。

官方示例用同一手法把矢量层裁成自定义形状。示例里虚线多边形是裁剪边界,蓝点与红线是原始内容,取消勾选即可看到被裁掉的部分。

要点

  • 像素路径由 map.getPixelFromCoordinate 得到,必须 closePath()。
  • save 与 restore 要成对,否则后续图层也会被裁。
  • 裁剪只影响绘制,要素数据完整保留。

边界随视图变化,裁剪路径要在每次 prerender 重新计算,不能缓存。