如何在OpenLayers 5.3.0中剪裁和显示剪裁的矢量几何体

我必须根据主/限制向量层剪裁向量层。绘制时，如果绘制图层的某些部分位于限制图层之外，请剪裁限制图层之外的区域

例1。 正如我们所看到的，底部边界的一部分在限制之外（紫色层）

我想知道在限制层之外的剪辑区域添加特征是否可能

例2。移除限制层外部的区域（绿色）

我尝试使用（）库中的bboxPolygon函数计算几何体。甚至尝试使用BooleanInside来检测绘制的多边形是否在限制层之外，但没有效果

现在，我想知道是否有可能在

addfeature

渲染限制层内的剪裁区域时剪裁区域（如示例2所示）

下面是我用来检测区域是否被剪裁或是否在限制层内的代码片段

// detect if drawn layers is outside restriction layer
vectorDrawLayer.getSource().on('addfeature', (evt) => {
  let feature = evt.feature;
  //let coordinatess = feature.getGeometry().clone().transform('EPSG:3857', 'EPSG:4326').getCoordinates();

  let geojsonFormat = new GeoJSON();

  let firstGeometryObject = {};
  let secondGeometryObject = {};

  if (vectorDrawLayer.getSource().getState() === 'ready') {
    let firstGeometry = vectorDrawLayer.getSource().getFeatures()[0];
    let secondGeometry = restrictionLayer.getSource().getFeatures()[0];

    firstGeometryObject = geojsonFormat.writeFeatureObject(firstGeometry, { dataProjection: 'EPSG:4326', featureProjection: 'EPSG:3857' });

    secondGeometryObject = geojsonFormat.writeFeatureObject(secondGeometry, { dataProjection: 'EPSG:4326', featureProjection: 'EPSG:3857' });
  }

  let isWithin = booleanWithin(firstGeometryObject, secondGeometryObject)
  let clipped = bBoxclip(firstGeometryObject, transformedExtent);

  //console.log(JSON.stringify(firstGeometryObject))
  console.log(clipped.geometry.coordinates);
  console.log(isWithin);
})

更新：

我能够使用提取限制层内的唯一多边形，但现在我在仅渲染相交层时遇到问题

最初，我想删除图层源，然后在获得相交多边形坐标后，我想添加新的相交多边形几何体（没有外部区域），但我无法渲染任何东西（似乎我缺少了一些东西）

下面是代码片段：

  let geojsonFormat = new GeoJSON();
  let firstGeometryObject = {};
  let secondGeometryObject = {};
  let feature;
  if (vectorDrawLayer.getSource().getState() === 'ready') {

    let firstGeometry = vectorDrawLayer.getSource().getFeatures()[0];
    let secondGeometry = restrictionLayer.getSource().getFeatures()[0];


    firstGeometryObject = geojsonFormat.writeFeatureObject(firstGeometry, { dataProjection: 'EPSG:4326', featureProjection: 'EPSG:3857' });

    secondGeometryObject = geojsonFormat.writeFeatureObject(secondGeometry, { dataProjection: 'EPSG:4326', featureProjection: 'EPSG:3857' });

    let intersectTest = intersect(firstGeometryObject, secondGeometryObject);

    let polygon = new Polygon(intersectTest.geometry.coordinates)

    feature = new Feature({
      geometry: polygon,
      name: 'test BlaBla'
    });
    console.log(feature)
    vectorDrawSource.removeFeature(firstGeometry);
    vectorDrawSource.addFeatures(feature);
  }

以下是测试应用程序（更新）的链接：

---

如果您的目标是渲染多边形内部的特征，则可以在图层上使用裁剪过滤器。看看这个例子，好的，我已经弄明白了。通过使用函数，我将转换后的GeoJSON对象传递到函数中，得到了相交的feature对象

例如：

let secondGeometryObject = secondGeometryObject = geojsonFormat.writeFeatureObject(secondGeometry, { dataProjection: 'EPSG:4326', featureProjection: 'EPSG:3857' });

然后使用相交要素对象的坐标创建新多边形

let intersectPolygon = intersect(firstGeometryObject, secondGeometryObject);

let polygon = new Polygon(intersectPolygon.geometry.coordinates)

然后，我变换多边形并获取变换后的坐标（'EPSG:4326'）

最后将新获取的坐标设置到事件特征中

evt.feature.getGeometry().setCoordinates(transformedPoly);

或者，我们可以使用类似的方法：

// transforming polygon to epsg:3857
let transformedPoly = polygon.clone().transform('EPSG:4326', 'EPSG:3857');
// set newly transformed polygon to feature
evt.feature.setGeometry(transformedPoly);

以下是固定的解决方案：

如果有人对如何剪辑和获取坐标有更好的想法，请随意发布答案，我一定会投票：） 希望对某人有所帮助：）

应用程序的更新链接位于此处：

---

这也适用于矢量层吗？除了剪裁，我还需要剪裁特征几何体。尽管如此，感谢您的时间和努力，但不幸的是，我相信这个答案并不能解决我的问题：）

// transforming polygon to epsg:3857
let transformedPoly = polygon.clone().transform('EPSG:4326', 'EPSG:3857');
// set newly transformed polygon to feature
evt.feature.setGeometry(transformedPoly);