使用草皮绘制带孔的 openlayers 3 多边形

Question

我正在尝试使用 DrawInteraction 和 turf 绘制一个带孔（线性环）的多边形（圆），但它没有绘制预期的内容和预期的位置，而是在 [0 , 0].请参阅 example 这甚至没有将线性环添加到多边形 -- 它是在 [0, 0] 处绘制的外部多边形，线性环目前已被注释掉。

    geometryFunction: function (coordinates, geometry) {
      if (!geometry) { geometry = new ol.geom.Polygon(null); }
      var center = coordinates[0];
      var last = coordinates[1];

      var radius = turf.distance(center, last, { units: 'degrees' });
      var outer = turf.circle(center, radius === 0 ? 0.00000001: radius, { units: 'degrees', steps: 100 });
      var inner = turf.circle(center, radius === 0 ? 0.000000005: radius, { units: 'degrees', steps: 20 });  
      geometry.setCoordinates([outer.geometry.coordinates[0]]);
 /* geometry.appendLinearRing([[outer.geometry.coordinates[0]]]);  */
      return geometry;

}

我修改了 this 示例以确保由 turf 生成的坐标没问题。

谁能帮我弄清楚我在多边形及其线性环上做错了什么？

Answer 1

您不需要 Turf 来完成这项工作。我也没有选择使用geometryFunction。我只用过 drawend 事件

drawInteraction.on('drawend', evt => {
  console.log(evt.feature);
})

我已经 a complete sample 来说明当你画一个圆时，如何创建一个洞，从你的样本中分叉出来

使用草皮绘制带孔的 openlayers 3 多边形

drawing openlayers 3 polygon with hole using turf

openlayers

turfjs