Openlayers 无法修改绘制的要素

Question

我想借此机会修改我在 OpenLayers 中的功能。 到目前为止，我只能将它们拖过 map，但在绘制时我根本无法改变它们的形状。

在上图中，您可以看到蓝点，它只是沿着形状边界移动但无法修改它。

我试图通过使用这个例子来修改我的代码：

https://openlayers.org/en/latest/examples/draw-and-modify-geodesic.html

我的一段代码是这样的：

var modifyInteraction = new ol.interaction.Modify({
 features: selectInteraction.getFeatures({
   if (modifyPoint[0] === center[0] && modifyPoint[1] === center[1]) {
    first = transform(polygon[0], projection, 'EPSG:4326');
    last = transform(
      polygon[(polygon.length - 1) / 2],
      projection,
      'EPSG:4326'
    );
     radius = getDistance(first, last) / 2;
   } else {
     first = transform(center, projection, 'EPSG:4326');
     last = transform(modifyPoint, projection, 'EPSG:4326');
     radius = getDistance(first, last);
   }
   const circle = circular(
    transform(center, projection, 'EPSG:4326'),
    radius,
    128
   );
   circle.transform('EPSG:4326', projection);
   geometries[0].setCoordinates(circle.getCoordinates());
   // save changes to be applied at the end of the interaction
   modifyGeometry.setGeometries(geometries);
  ),
});
var translateInteraction = new ol.interaction.Translate({
 features: selectInteraction.getFeatures()
});

var setActiveEditing = function(active) {
    selectInteraction.getFeatures().clear();
    selectInteraction.setActive(active);
    modifyInteraction.setActive(active);
    translateInteraction.setActive(active);
};
setActiveEditing(true);

完整的小提琴可以在这里找到：

https://jsfiddle.net/2yj1ae04/

在 OpenLayers Map 中绘制这些功能后，如何使它们可编辑？

更新：

https://jsfiddle.net/bsqzc31j/

这是我最近用的代码，效果一模一样但是没有报错：

https://jsfiddle.net/bsqzc31j/

var modifyInteraction = new ol.interaction.Modify({
  features: selectInteraction.getFeatures()
});

完整情况：

http://test.mkrgeo-blog.com/

更新：

我最近尝试了这段代码：

    var modifyInteraction = new ol.interaction.Modify({
    features: selectInteraction.getFeatures(),
    deleteCondition: function(event) {
    return ol.events.condition.shiftKeyOnly(event) &&
    ol.events.condition.singleClick(event);
    }
   });

适用于此 map：

http://www.scgis.net/api/ol/v3.6.0/examples/draw-and-modify-features.html

但在我的情况下仍然是一样的。

它确实有效，当我完全删除/关闭新的ol.interaction.Translate({但是在这种情况下我无法拖动我的功能。

更新三：

应用答案 1 中的代码后，我遇到了这样的情况：该功能仍然无法修改，所以我的 ol.interaction.Modify() 中定义的代码不起作用：

 var modifyInteraction = new ol.interaction.Modify({
 features: selectInteraction.getFeatures(),
 deleteCondition: function(event) {
 return ol.events.condition.shiftKeyOnly(event) &&
    ol.events.condition.singleClick(event);
 }

});
 map.addInteraction(modifyInteraction);

我在其中定义了通过按住Shift按钮添加新节点和删除现有节点。

在这种情况下，当我定义了ol.interaction.Translate时：

 var translateInteraction = new ol.interaction.Translate({
   condition: function (event) {
   return (
    ol.events.condition.primaryAction(event) &&
    ol.events.condition.platformModifierKeyOnly(event)
   );
   },
 features: selectInteraction.getFeatures(),

}); map.addInteraction(translateInteraction);

我的功能的版本只是被阻止了。 我可以拖动它们，但不能编辑它们。 由于按住 Alt 键，我可以将蓝点拖离 object，但没有任何反应。 有什么办法可以将ol.interaction.Modify({和new ol.interaction.Translate({结合在一起，使下面列出的所有这些选项都有效>

• 拖动 object
• 创建一个新节点
• 删除现有节点

我试图通过按住 Shift 按钮来做到这一点：

 var dragFeature = function(evt){
   if(evt.keyCode == 16){
    var translateInteraction = new ol.interaction.Translate({
     features: selectInteraction.getFeatures(),
    });
  };

但我收到一个错误：

未捕获的 ReferenceError：未定义 translateInteraction

这意味着 translateInteraction 变量不再是全局变量，因为它是在另一个变量中创建的。

Answer 1

在http://test.mkrgeo-blog.com/中，修改和翻译交互之间存在冲突，因为它们使用相同的默认条件。 您可以区分它们，因此翻译仅在按下Ctrl键时接受鼠标操作

  new ol.interaction.Translate({
    condition: function (event) {
      return (
        ol.events.condition.primaryAction(event) &&
        ol.events.condition.platformModifierKeyOnly(event)
      );
    },
    ...

按下Ctrl时修改不起作用（但仍允许Alt删除顶点）

  new ol.interaction.Modify({
    condition: function (event) {
      return (
        ol.events.condition.primaryAction(event) &&
        !ol.events.condition.platformModifierKeyOnly(event)
      );
    },
    ...

Answer 2

我想可能有两件事。 1. 当您尝试修改时，您没有针对正确的来源，并且 2. 没有向 map 添加修改交互。请参见下面的示例。

const style // just an array of style objects 
const source = new VectorSource();
const vector = new VectorLayer({
    map:///map object
    source: source,
    style: style
})

const modify = new Modify({source: source});
map.addInteraction(modify);

//another way to get the selected item
const select = new Select({
    style:style,
    layers:vector,
})
select.on('select', (event)=> {
   this.selected = event.target.getFeatures().item(0);//global variable
})

//add this 
const translate = new Translate({
  features: select.getFeatures(),
});
map.addInteraction(translate);