概述

本文主要介绍 Openlayers 中,两个(或多个)多边形的高级交互,包括: 并集,交集和差集运算.

概念理解

• 并集(Union): 并集指的是将两个几何对象的所有区域合并在一起。即，结果是包含了两个对象所有区域的集合。如果两个几何形状有重叠部分，合并时不会重复这些部分。

  • 几何意义：并集是两个图形合并后的结果，包含了两个图形的所有区域，重叠部分只算一次。

• 交集(Intersection): 交集指的是两个几何对象重叠部分的集合。在几何学中，两个几何形状的交集是它们的公共部分。如果两个形状没有交集，则交集为空。

  • 几何意义：交集是两个图形相重叠或相交的区域。

• 差集(Difference): 差集指的是从一个几何对象中去除另一个几何对象所占据的部分。也就是说，差集结果是第一个几何对象的区域，减去与第二个几何对象重叠的区域。

  • 几何意义: 差集是一个几何对象减去另一个几何对象的重叠部分。结果是只保留第一个几何对象的非重叠部分。

代码实践

Openlayers 实际上是不包括这些空间几何运算的接口,但是可以借助第三方库进行计算,比如turf.js. 在进行这些几何运算之前,需要保证两个多边形是相交的,不然讨论没有意义.

• 并集

  • 效果
  • 代码

  const { p1, p2 } = getPolygons();
  const union = turf.union(turf.featureCollection([p1, p2]));
  if (union) {
    resetFeature();
    feature = new Feature({
      geometry: new Polygon(union?.geometry?.coordinates),
      zIndex: 9,
    });
  
    feature.setStyle(afterStyle);
  
    vectoryLayer.getSource()?.addFeature(feature);
  }
  

• 交集

  • 效果
  • 代码

  const { p1, p2 } = getPolygons();
  const intersection = turf.intersect(turf.featureCollection([p1, p2]));
  if (intersection) {
    resetFeature();
    feature = new Feature({
      geometry: new Polygon(intersection?.geometry?.coordinates),
      zIndex: 9,
    });
  
    feature.setStyle(afterStyle);
  
    vectoryLayer.getSource()?.addFeature(feature);
  }
  

• 差集

  • 效果
  • 代码

  const { p1, p2 } = getPolygons();
  const difference = turf.difference(turf.featureCollection([p1, p2]));
  if (difference) {
    resetFeature();
    feature = new Feature({
      geometry: new Polygon(difference?.geometry?.coordinates),
      zIndex: 9,
    });
  
    feature.setStyle(afterStyle);
  
    vectoryLayer.getSource()?.addFeature(feature);
  }
  

代码分析

上述运算分别用到turf.js的turf.union(),turf.intersect()和turf.difference()方法, 例子中只传了两个多边形,实际上可以为多个. 这三个方法接受的参数为一个FeatureCollection类型的集合,FeatureCollection对象需要符合标准的GeoJSON数据格式.

因为例子中通过ol/interaction的Draw类画圆获取的feature几何对象不是GeoJSON格式的,因此需要一层转换.转换如下:

turf.polygon(feature.getGeometry()?.getCoordinates());