如何在openlayers中以交互方式绘制圆-3

Question

我对一种功能性很感兴趣，它出现在openlayers-2中，但目前还没有出现在第三部分-交互式圆圈绘制中。

正如您在下面的示例中所看到的：http://openlayers.org/en/v3.0.0/examples/draw-and-modify-features.html

Circle没有可用的选项。尽管评论说，@type {ol.geom.GeometryType}应该都是可用的，但是circle dowsen不起作用。我自己用这段代码试过了：

function addInteraction(type) {
    draw = new ol.interaction.Draw({
        features: featureOverlay.getFeatures(),
        type: /** @type {ol.geom.GeometryType} */ 'Circle'
    });
    map.addInteraction(draw);
}

是否存在任何本机\patch\hack解决方案？

Answer 1

此功能现已在版本3.5.0中添加，示例如下：http://openlayers.org/en/v3.5.0/examples/draw-features.html

​

​

它的工作原理与您的猜测完全相同，即

draw = new ol.interaction.Draw({
    features: featureOverlay.getFeatures(),
    type: 'Circle'
});
map.addInteraction(draw);

Answer 2

我几乎也遇到了同样的问题。问题是，如果你只是想添加一个圆作为样式的原因，或者你需要它作为一个多边形？当你尝试实现一个多边形时，你可以很容易地使用Poylgon.based循环函数。正如您在下面的源代码中所看到的，您只需要球体。例如ol.sphere.WGS84。圆心和半径。可选输入定义点数。它们用来定义圆。

ol.geom.Polygon.circular = function(sphere, center, radius, opt_n) {
var n = goog.isDef(opt_n) ? opt_n : 32;
   /** @type {Array.<number>} */
  var flatCoordinates = [];
  var i;
  for (i = 0; i < n; ++i) {
   goog.array.extend(
        flatCoordinates, sphere.offset(center, radius, 2 * Math.PI * i / n));
  }
  flatCoordinates.push(flatCoordinates[0], flatCoordinates[1]);
  var polygon = new ol.geom.Polygon(null);
  polygon.setFlatCoordinates(
      ol.geom.GeometryLayout.XY, flatCoordinates, [flatCoordinates.length]);
  return polygon;
};

它甚至是Api稳定的，所以你可以从外部访问它。在我的例子中，我创建了一个自己的控件，它扩展了绘图功能。希望我能帮到你。