Динамически изменить круг OpenLayers размер

Question

Я пытаюсь динамически увеличивать размер круга забор с помощью:

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

Я первоначально создал круг, используя этот код:

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); 

Когда я нажимаю типа радиус, событие нажатия клавиши запускается, но форма круга не изменяется по размеру.

Answer 1

Вы изменяете свои свойства, но не свойства своих ol.geom.geometry или ol.style.Style. Я полагаю, что ваша геометрия ol.geom.Circle.

Затем вы можете использовать вместо этого:

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

Answer 2

Хотя this PR не сливались использование функции стиль, как:

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' 
     }) 
     }) 
    }) 
    ]; 
}; 

Тогда:

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