Question

我正在使用ol.interaction.Draw绘制一个圆圈。

this.draw = new ol.interaction.Draw({
    source: this.vectorSource,
    type: 'Circle'
});

this.draw.on('drawend', function( evt ){
    // evt.feature have no geometry !!!
}

但是如何获得圆形几何或任何告诉我如何再次绘制相同圆圈的东西？

OL3.0你可以创建/编辑功能，但不能创建/编辑圈子...... http://openlayers.org/en/v3.0.0/examples/draw-and-modify-features.html

OL3.5您可以创建圈子，但无法编辑.... http://openlayers.org/en/v3.5.0/examples/draw-features.html

OL_Latest你也无法编辑圈子：http://openlayers.org/en/latest/examples/draw-and-modify-features.html

如果我以后可以重现同一个圈子，我会很高兴。

Answer 1

要获得绘制圆形特征的中心和半径，请使用以下代码

this.draw.on('drawend', function( evt ){
    var geometry = evt.feature.getGeometry();
    var radius = geometry.getRadius();
    var center = geometry.getCenter();
    // .... your code
});

由于绘制了圆，因此几何类型的类型为ol.geom.Circle。使用此Geometry对象，您可以使用getRadius()和getCenter()方法获取半径和中心。有关ol.geom.Circle的详细信息，请浏览此链接。

http://openlayers.org/en/latest/apidoc/ol.geom.Circle.html

Answer 2

几乎就在那里！

我现在可以通过向绘图缩进添加几何函数来重现“圆”。

var geometryFunction = ol.interaction.Draw.createRegularPolygon(90);

    this.draw = new ol.interaction.Draw({
        source: this.vectorSource,
        type: 'Circle',
        geometryFunction: geometryFunction,
    });

这将生成特征的几何形状，因此我可以存储它并稍后再次加载它，但它不是一个真正的圆形，它只是由一个90磅的多边形组成。所以我不能把它编辑成一个圆圈。

想要获得这个几何的半径吗？

{"type":"Feature","geometry":{"type":"Polygon","coordinates":[[[-4804935.286197088,-2605909.2147242804],[-4804836.58537814,-2605831.0293000625],[-4804743.578928918,-2605746.149310523],[-4804656.719967494,-2605654.988282439],[-4804576.431661996,-2605557.9903431754],[-4804503.105168979,-2605455.6280569425],[-4804437.097727745,-2605348.4001225093],[-4804378.730919913,-2605236.8289435934],[-4804328.289102704,-2605121.458083764],[-4804286.018023582,-2605002.849618253],[-4804252.123622994,-2604881.581395582],[-4804226.771031053,-2604758.244222341],[-4804210.083763039,-2604633.4389848416],[-4804202.143117644,-2604507.773721655],[-4804202.987780893,-2604381.8606613115],[-4804212.613637674,-2604256.3132395847],[-4804230.973791778,-2604131.7431108924],[-4804257.978794381,-2604008.757168381],[-4804293.497079825,-2603887.954587199],[-4804337.355606593,-2603769.923905379],[-4804389.340700352,-2603655.2401565393],[-4804449.199094949,-2603544.462068375],[-4804516.639166305,-2603438.1293405974],[-4804591.332353169,-2603336.7600155673],[-4804672.914757844,-2603240.8479544464],[-4804760.988919055,-2603150.860431155],[-4804855.125748342,-2603067.2358558625],[-4804954.866620535,-2602990.3816390927],[-4805059.72560813,-2602920.672206864],[-4805169.19184868,-2602858.4471765244],[-4805282.732033666,-2602804.009702166],[-4805399.793006718,-2602757.6249976917],[-4805519.804458544,-2602719.5190447196],[-4805642.1817054115,-2602689.8774916218],[-4805766.328537677,-2602668.8447490656],[-4805891.640124453,-2602656.5232864586],[-4806017.505960285,-2602652.973132728],[-4806143.312839472,-2602658.211583866],[-4806268.447843544,-2602672.213118665],[-4806392.301327342,-2602694.909523055],[-4806514.269889141,-2602726.1902224356],[-4806633.759310369,-2602765.902820383],[-4806750.187450577,-2602813.8538411125],[-4806862.987083566,-2602869.809672071],[-4806971.608660867,-2602933.4977020747],[-4807075.522989073,-2603004.607649443],[-4807174.22380802,-2603082.793073661],[-4807267.230257243,-2603167.6730632004],[-4807354.089218667,-2603258.834091285],[-4807434.3775241645,-2603355.8320305482],[-4807507.704017182,-2603458.194316781],[-4807573.711458416,-2603565.4222512143],[-4807632.078266247,-2603676.99343013],[-4807682.520083456,-2603792.3642899594],[-4807724.791162578,-2603910.972755471],[-4807758.685563167,-2604032.240978142],[-4807784.038155108,-2604155.5781513825],[-4807800.725423122,-2604280.383388882],[-4807808.666068517,-2604406.0486520687],[-4807807.821405267,-2604531.961712412],[-4807798.195548487,-2604657.509134139],[-4807779.8353943825,-2604782.0792628312],[-4807752.83039178,-2604905.0652053426],[-4807717.312106336,-2605025.867786525],[-4807673.453579567,-2605143.8984683445],[-4807621.468485809,-2605258.5822171844],[-4807561.610091211,-2605369.3603053484],[-4807494.170019856,-2605475.693033126],[-4807419.4768329915,-2605577.0623581563],[-4807337.8944283165,-2605672.974419277],[-4807249.8202671055,-2605762.9619425684],[-4807155.683437819,-2605846.586517861],[-4807055.9425656255,-2605923.440734631],[-4806951.083578031,-2605993.1501668594],[-4806841.61733748,-2606055.375197199],[-4806728.077152494,-2606109.8126715575],[-4806611.016179442,-2606156.197376032],[-4806491.004727617,-2606194.303329004],[-4806368.627480749,-2606223.944882102],[-4806244.480648483,-2606244.977624658],[-4806119.169061707,-2606257.299087265],[-4805993.303225876,-2606260.8492409955],[-4805867.496346689,-2606255.610789858],[-4805742.361342616,-2606241.6092550587],[-4805618.507858818,-2606218.9128506687],[-4805496.539297019,-2606187.632151288],[-4805377.049875791,-2606147.9195533404],[-4805260.621735584,-2606099.968532611],[-4805147.822102594,-2606044.0127016525],[-4805039.200525293,-2605980.324671649],[-4804935.286197088,-2605909.2147242804]]]},"properties": null}

Polygon的质心可以是我认为的圆心......这个质心到边界中任何一点的距离都可以是半径....我不知道如何使用JS来获得这个。

以中心为中心：

this.draw.on('drawend', function( evt ){
    var aa = evt.feature.getGeometry().getExtent();
    var oo = ol.extent.getCenter(aa);
    console.log( oo );
});

现在我必须找到一种方法来获取半径。

使用ol.interaction.Draw时，我可以获得Circle几何图形吗？

2 个答案: