openlayers - 如何在 OpenLayers 5.3.0 中裁剪和显示裁剪的矢量几何图形

Question

我必须根据主/限制矢量图层裁剪矢量图层。绘制时，如果绘制的部分图层为限制层外，则裁剪限制层外的区域。

示例 1。我们可以看到，底部边框的一部分在限制之外(紫色层)

我想知道是否可以将特征添加到限制层外的剪辑区域

示例 2. 移除限制层外的区域(绿色)

我尝试使用 ( Turf.js) 库中的 bboxPolygon 函数计算几何。甚至尝试使用 booleanWithin 来检测绘制的多边形是否在限制层之外，但无济于事。

现在，我想知道是否可以在 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);
})

更新:

我能够使用 http://turfjs.org/docs/#intersect 仅提取限制层内的多边形但现在我在渲染相交层时遇到了问题。

最初，我想删除图层源，然后在获得相交多边形坐标后我想添加新的相交多边形几何体(没有外部区域)但我无法渲染任何东西(似乎我遗漏了什么)

这是代码片段:

  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);
  }

这是测试应用程序的链接(更新): https://stackblitz.com/edit/js-vpdnbf

Answer 1

如果您的目标是在多边形内渲染要素，您可以在图层上使用裁剪过滤器。看这个例子https://viglino.github.io/ol-ext/examples/filter/map.filter.crop.html