如何以openlayers-3交互式绘制圆形

Question

我在openlayers-2中出现了一个功能，但是在第三部分中没有 - 交互式圆形绘图。

正如您在此处的示例中所见：http://openlayers.org/en/v3.0.0/examples/draw-and-modify-features.html

Circle没有可用的选项。尽管注释说明@type {ol.geom.GeometryType}应该全部可用，但是圆圈不起作用。用这段代码自己试了一下：

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 Stable，所以你可以从外面访问它。在我的情况下，我创建了一个自己的控件，扩展了绘图功能。希望我能帮到你。