在 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”，以确保显示距中心的半径而不是直径。

在 Openlayers 中绘制的圆圈未正确更改

Circle drawn in Openlayers not changing properly

javascript

jquery

openlayers