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