如何在OpenLayers 5.3.0中裁剪和显示裁剪的矢量几何图形 [英] How to clip and show clipped vector geometry in OpenLayers 5.3.0

问题描述

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

示例1。 如我们所见，底部边框的一部分是外部限制(紫色层)

我想知道是否可以在将要素添加到限制层外的裁剪区域时

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

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

现在，我想知道是否可以裁剪区域，然后在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

推荐答案

好的，我已经弄清楚了。使用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);

以下是固定解决方案：

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

APP的更新链接在此处： https://stackblitz.com/edit/js-vpdnbf

这篇关于如何在OpenLayers 5.3.0中裁剪和显示裁剪的矢量几何图形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！