dynamisch ändern Kreisgröße Openlayers

Question

Ich versuche, dynamisch den Kreis Zaun Größe zu erhöhen mit:

$(document).on("keypress", "#radius", function() { 
    circleFeature.set("radius",parseInt($("#radius").val())); 
}); 

ich zunächst den Kreis erstellt mit diesem Code:

var circleFeature = new ol.Feature(circle); 
    circleFeature.set('fenceId', fenceId); 
    circleFeature.set('latitude', latitude); 
    circleFeature.set('longitude', longitude); 
    circleFeature.set('radius', givenRadius); 
    circleFeature.set('circleRadius', radius); 
    circleFeature.set('desc', desc); 
    circleFeature.set('isActive', isActive); 

Wenn ich den Radius drücken geben, Das Tastendruckereignis wird ausgelöst, aber die Kreisform ändert sich nicht in der Größe.

Answer 1

Sie ändern Ihre Merkmalseigenschaften, aber nicht die Eigenschaften Ihrer ol.geom.geometry oder ol.style.Style. Ich nehme an, Ihre Geometrie ist ol.geom.Circle.

Dann können Sie diese stattdessen verwenden:

$(document).on("keypress", "#radius", function() { 
    circleFeature.getGeometry().setRadius(parseInt($("#radius").val())); 
}); 

Answer 2

Während this PR nicht Gebrauch eine Art Funktion wie verschmolzen:

var styleFunction = function(feature) { 
    return [ 
    new ol.style.Style({ 
     image: new ol.style.Circle({ 
     radius: feature.get('radius'), 
     fill: new ol.style.Fill({ 
      color: 'green' 
     }) 
     }) 
    }) 
    ]; 
}; 

Dann:

$(document).on("keypress", "#radius", function() { 
    circleFeature.set("radius",parseInt($("#radius").val())); 
    circleFeature.setStyle(styleFunction); 
    circleFeature.changed(); 
});