如何在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

- Svinjica

Answer 1

如果您的目标是在多边形内呈现要素，则可以在图层上使用裁剪过滤器。请参见此示例https://viglino.github.io/ol-ext/examples/filter/map.filter.crop.html。

- Viglino Jean-Marc

---

这个也适用于矢量图层吗？除了剪切，我还需要剪切后的要素几何。不过还是非常感谢您的时间和努力，但不幸的是我认为这个答案并不能解决我的问题 :) - Svinjica

Answer 2

好的，我已经理解了。使用intersect函数，通过将转换后的GeoJSON对象传递到函数中，我得到了相交的要素对象。

示例：

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'）。

let transformedPoly = polygon.clone().transform('EPSG:4326', 'EPSG:3857').getCoordinates();

最后将新获取的坐标设置到事件要素中。

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

这是一个固定的解决方案：

如果有人有更好的剪切和提取坐标的想法，请随时发布答案，我一定会点赞 :) 希望对某些人有所帮助 :) 更新的应用程序链接在这里： https://stackblitz.com/edit/js-vpdnbf

- Svinjica