Openlayers 4 - 在同一座標下修改交互和多個特徵

我在具有多個特徵的矢量圖層上啓用了修改交互。將功能移到新位置可以很好地工作。但是，如果在同一個座標上有更多的特徵，那麼所有的特徵都會同時移動。 See example on codepen。Openlayers 4 - 在同一座標下修改交互和多個特徵

var raster = new ol.layer.Tile({ 
    source: new ol.source.OSM() 
    }); 

var data = new ol.Collection(); 

    data.push(new ol.Feature({ 
    geometry: new ol.geom.Point([0, 0]) 
    })); 

    var f = new ol.Feature({ 
    geometry: new ol.geom.Point([0, 0]) 
    }); 
    f.setStyle(new ol.style.Style({ 
       image: new ol.style.Circle({ 
        radius: 10, 
        fill: new ol.style.Fill({ 
         color: [255, 255, 255, 0.5] 
        }), 
        zIndex: Infinity 
       }), 
      })); 

    data.push(f); 

    var vector = new ol.layer.Vector({ 
    source: new ol.source.Vector({ 
     features: data 
    }) 
    }); 


    var modify = new ol.interaction.Modify({ 
    features: data 
    }); 

    var map = new ol.Map({ 
    interactions: ol.interaction.defaults().extend([modify]), 
    layers: [raster, vector], 
    target: 'map', 
    view: new ol.View({ 
     center: [0, 0], 
     zoom: 12 
    }) 
    });

有沒有辦法避免這種情況？我發現的唯一的解決方案是：

我有一個選擇互爲作用，選擇功能
使用翻譯互動移動的特點之一

或

在指針移動事件並檢測一個或多個特徵是否在座標上，然後選擇其中一個
添加所選功能以修改要素圖層並移動它

還有其他方法嗎？

Regrads RM

來源

2017-08-23 user7064696

您已有2種解決方案。您尋找其他解決方案的原因有哪些？ –

第一個解決方案需要額外的點擊（選擇點擊），我想避免。當從一層到另一層移動特徵時，secound需要進行bookeping，這使得代碼更加複雜，我希望我能保持代碼簡單。這就是我尋找其他解決方案的原因。 – user7064696

還有另一種方式。您可以在地圖上註冊一個'pointermove'處理程序，在該處理程序中獲取最上面的功能，並將其設置爲修改交互所在源的唯一功能。完整示例請參見https://codepen.io/ahocevar/pen/YxjyRd。

除了在代碼中，您將修改交互連接到源代替集合，並且該源（modifySource）與矢量圖層的源分離並且最初爲空。在pointermove處理程序中，添加只是一個單一的功能，將這些資料來源：

function pointermove(e) { 
    if (e.dragging) { 
    return; 
    } 
    var features = map.getFeaturesAtPixel(e.pixel, { 
    layerFilter: function(l) { 
     return l == vector; 
    } 
    }); 
    if (features && features[0] != modifySource.getFeatures()[0]) { 
    modifySource.clear(); 
    modifySource.addFeature(features[0]); 
    } 
} 
map.on("pointermove", pointermove);

還要注意的是，修改交互添加到地圖之前，該處理程序必須進行登記。

來源

2017-08-24 10:28:48 ahocevar

嗨ahocevar 謝謝你的答案。我得到它的工作。不允許更改modifystart事件中的要素樣式嗎？我得到了與[鏈接]（https://github.com/openlayers/openlayers/issues/6310）相同的錯誤，但是如果我在下面這樣的更改事件中首先更改樣式，它會起作用： modify.on("modifystart', function(e) { \t foreach(e.features, function(elem, ...) { \t \t elem.once("change", function (event) { \t \t \t elem.target.setStyle(...) \t \t } \t } }) 如果我沒有 modify.on（「modifystart」，函數（E）{ \t e.features [0] .setStyle（...） }）我得到了錯誤。任何想法，爲什麼？ – user7064696

Openlayers 4 - 在同一座標下修改交互和多個特徵

回答

相關問題