Openlayers 无法修改绘制的要素

Question

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

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

我尝试使用此示例修改我的代码：

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

完整的 fiddle 可在此处获得：

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

在这张地图上有效：

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

但我的情况还是一样。

它确实有效，当我完全remove/switch关闭新的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（翻译交互）；

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

拖动对象
创建新节点
删除现有节点

我尝试通过按住 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. 没有向地图添加修改交互。请参阅下面的示例。

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

Openlayers 无法修改绘制的要素

Openlayers can't modify drawn features

javascript

openlayers