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

动态更改圆形大小的openlayers

2 个答案: