动态改变圆圈大小 openlayers

Question

I am trying to dynamically increase the circle fence size using :

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

I initially created the circle using this 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);

When I press type the radius, the keypress event is triggered but the circle shape does not change in size.

Answer 1

You are changing your feature properties but not the properties of your ol.geom.geometry or ol.style.Style . I suppose your geometry is ol.geom.Circle .

Then you can use this instead:

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

Answer 2

While this PR is not merged use a style function like:

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

Then:

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