OpenLayers 3如何在OpenLayer 2中將Feature Modified事件注冊為“featuremodified”

Question

我需要使用OpenLayers 3矢量編輯實現撤消/重做功能（就像http://dev.openlayers.org/examples/modify-feature.html中針對OpenLayers 2所示）。

要跟蹤的特征 幾何形狀的變化，我要管理的存儲堆棧將在用戶交互持有的特點改變的幾何定義。 我知道OpenLayers 3提供了可觀察對象。 因此可以觀察到ol.Feature或ol.Feature.getGeometry()的變化，但我正在尋找ol.interaction.Modify發出的顯式事件，它應該在交互開始或結束矢量編輯操作時通知我（就像OpenLayers中的"beforefeaturemodified"和"featuremodified"事件2）。

偵聽觀察到的幾何體或特征變化的處理程序可以用於此目的但是它太昂貴，因為修改后的特征的幾何形狀隨着每個像素移動而改變。

我已經瀏覽了OpenLayers 3的官方文檔 ，但找不到OpenLayers 2提供的各種事件。在大多數情況下，文檔僅提到更改事件。 我想知道這些事件是否不是Openlayer 3架構的考慮因素。 如果是這樣，任何建議如何擴展現有的ol.interaction.Modify以合並自定義事件？ 謝謝。

Answer 1

從OpenLayers 3.7.0開始， ol.interaction.Modify發出modifystart和modifyend 。 文檔： http ： //openlayers.org/en/v3.7.0/apidoc/ol.ModifyEvent.html

如果應該保留或撤消每個修改后隨機決定的示例（ http://jsfiddle.net/rbha7f83/1/ ）：

var select = new ol.interaction.Select({
    style: overlayStyle
});

// The modify interaction does not listen to geometry change events.
// Changing the feature coordinates will make the modify interaction
// unaware of the actual feature coordinates.
// A possible fix: Maintain a collection used by Modify, so we can reload
// the features manually. This collection will always contain the same
// features as the select interaction.
var selectSource = new ol.Collection();
select.on('select', function (evt) {
    evt.selected.forEach(function (feature) {
        selectSource.push(feature);
    });
    evt.deselected.forEach(function (feature) {
        selectSource.remove(feature);
    });
});

var modify = new ol.interaction.Modify({
    features: selectSource, // use our custom collection
    style: overlayStyle
});

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

var originalCoordinates = {};
modify.on('modifystart', function (evt) {
    evt.features.forEach(function (feature) {
        originalCoordinates[feature] = feature.getGeometry().getCoordinates();
    });
});
modify.on('modifyend', function (evt) {
    evt.features.forEach(function (feature) {
        if (feature in originalCoordinates && Math.random() > 0.5) {
            feature.getGeometry().setCoordinates(
                originalCoordinates[feature]
            );
            delete originalCoordinates[feature];

            // remove and re-add the feature to make Modify reload it's geometry
            selectSource.remove(feature);
            selectSource.push(feature);
        }
    });
})

請注意，事件是在每次交互之前和之后發出的。 拖動頂點然后單擊頂點將其刪除（兩者都在同一個功能上）將觸發兩個modifystart和modifyend事件。