Openlayers中绘制的圆未正确更改

Question

我有一个JS文件，它允许我在Openlayers 4.6.5制作的交互式界面上画一个圆圈。我目前遇到的问题是，一旦绘制了圆，我就无法再使用setRadius函数正确地更改它的大小。圆圈在地图上的视觉变化，但坐标保持不变。

这是因为drawCircle函数将圆解析为多边形。这是我使用的ETL程序(FME(所需要的，以便能够将其用作搜索区域。

// Uses the functionalities of the NL Maps and Open Layers to create an interactive map.
var nlMapsHolder = document.getElementById('nlmaps-holder');
nlMapsHolder.style.height = '100%';

var opts = {
style: 'standaard',
target: 'nlmaps-holder',
center: {
longitude: 6.552349082194269,
latitude: 53.223153959705804
},
overlay: 'percelen',
marker: false,
zoom: 11,
search: true
};
var myMap = nlmaps.createMap(opts);

var source = new ol.source.Vector()
var vector_layer = new ol.layer.Vector({
name: 'my_vectorlayer',
source: source,
format: new ol.format.WKT(),
style: new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(255, 255, 255, 0.2)'
}),
stroke: new ol.style.Stroke({
color: '#ffcc33',
width: 2
}),
image: new ol.style.Circle({
radius: 7,
fill: new ol.style.Fill({
color: '#ffcc33'
})
})
})
});

// Links this JS file with an Html file that contains the buttons on the interactive map
document.getElementById( "drawC" ).setAttribute( "onclick", "drawCircle();" );
// document.getElementById( "editC" ).setAttribute( "onclick", "editCircle();" );
document.getElementById( "reset" ).setAttribute( "onclick", "removeCircle();" );
myMap.addLayer(vector_layer);
var modify = new ol.interaction.Modify({source: source });
myMap.addInteraction(modify);

//Draws a circle by clicking once and then dragging until a suitable size has been attained. The second click creates the circle.
function drawCircle(){
source.getFeatures().forEach(function(feature){
vector_layer.getSource().removeFeature(feature);
});

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

draw.on('drawend', function(event) {    


geometry = event.feature.getGeometry();
var radius = geometry.getRadius();
var center = geometry.getCenter();
$('#radius').val(radius);

// The lines of code below change the geometry type from circle to polygon. This is for an ETL program (FME) to be able use it as an area to search in. 
// By inluding this piece of code, changing the radius of the circle no longer has an effect on the search area.
var polygon = new ol.geom.Polygon.fromCircle(event.feature.getGeometry());

let parser = new ol.format.GeoJSON();
let area = parser.writeGeometry(polygon);
var geom = JSON.stringify(area);//.replace(/"/g,'\"');
$('#geom').attr('value', geom);
$('#geom').change();
myMap.removeInteraction(draw);

});    
}

// This function works by retrieving the radius values from an html file which makes a text bar with a submit button that feeds its value into this function
function setRadius(){

var radius = geometry.getRadius();
var center = geometry.getCenter();


geometry.setRadius( parseFloat($('#radius').val()));
console.log(geometry.getRadius());

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



}
// This is an earlier test to try and increase the size of the existing circle
// function editCircle() {
//  source.getFeatures().forEach(function(feature){
//      vector_layer.getSource(feature);
//  })
//  var test = 'test 123';
//  console.log(test);
//  //$('#geom').radius = $('#geom').radius + 20)
//  }
function removeCircle(){

source.getFeatures().forEach(function(feature){
vector_layer.getSource().removeFeature(feature);
});         
}

我希望有一个解决方案，可以调整圆的大小，但仍然可以在setRadius函数的末尾解析为多边形。

库包括JQuery、Openlayers、NL Maps。

欢迎任何帮助。

Answer 1

通过向drawCircle函数添加以下代码，问题已经得到解决

modify = new ol.interaction.Modify({source: source, type: 'Circle' });
myMap.addInteraction(modify);
modify.on('modifyend',function(event){
geometry = event.features.getArray()[0].getGeometry();
var radius = geometry.getRadius();
console.log(radius / 2);
var polygon = new ol.geom.Polygon.fromCircle(geometry);

let parser = new ol.format.GeoJSON();
let area = parser.writeGeometry(polygon);
var geom = JSON.stringify(area);//.replace(/"/g,'\"');
$('#geom').attr('value', geom);
$('#geom').change();

});

此外，我还在editCircle函数中添加了这段代码：

var polygon = new ol.geom.Polygon.fromCircle(geometry);

let parser = new ol.format.GeoJSON();
let area = parser.writeGeometry(polygon);
var geom = JSON.stringify(area);//.replace(/"/g,'\"');
$('#geom').attr('value', geom);
$('#geom').change();
};

还应该注意的是，我在函数的各个部分添加了"/2"，以确保显示的是从中心开始的半径，而不是直径。