OpenLayers 3 - 删除功能

Question

所以，我想使用以下代码删除选定的功能：

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

var map = new ol.Map({
    layers: [
        new ol.layer.Tile({
            source: new ol.source.OSM()
        }),
        vector
    ],
    target: 'map',
    view: new ol.View({
        center: [-11000000, 4600000],
        zoom: 4
    })
});

map.on('pointermove', function(e) {
    if (e.dragging) return;
    var
        pixel = map.getEventPixel(e.originalEvent),
        hit = map.hasFeatureAtPixel(pixel);
    map.getTargetElement().style.cursor = hit ? 'pointer' : '';
});
document.getElementById('js-remove').addEventListener('click', function() {
    vector.getSource().removeFeature(selectedFeature);
    overlay.setPosition(undefined);
    interaction.getFeatures().clear();
});
var remove_b = document.getElementById('js-overlay');
var overlay = new ol.Overlay({
    element: remove_b
});
map.addOverlay(overlay);
document.getElementById('js-overlay').style.display = 'block';
var selectedFeature;
var button = $('#pan').button('toggle');
var interaction;
var features;
$('div.btn-group button').on('click', function(event) {
    var id = event.target.id;
    var features;
    button.button('toggle');
    button = $('#' + id).button('toggle');
    map.removeInteraction(interaction);

    switch (id) {
        case "point":
            interaction = new ol.interaction.Draw({
                type: 'Point',
                source: vector.getSource()
            });
            map.addInteraction(interaction);
            break;
        case "line":
            interaction = new ol.interaction.Draw({
                type: 'LineString',
                source: vector.getSource()
            });

            map.addInteraction(interaction);
            break;
        case "polygon":
            interaction = new ol.interaction.Draw({
                type: 'Polygon',
                source: vector.getSource()
            });
            map.addInteraction(interaction);
            break;
        case "modify":

            interaction = new ol.interaction.Modify({
                features: new ol.Collection(vector.getSource().getFeatures())
            });
            map.addInteraction(interaction);

            break;
        case "delete":
            interaction = new ol.interaction.Select({
                condition: ol.events.condition.click,
                layers: [vector]
            });
            map.addInteraction(interaction);

            interaction.on('select', function(event) {
                selectedFeature = event.selected[0];
                (selectedFeature) ? overlay.setPosition(selectedFeature.getGeometry().getExtent()): overlay.setPosition(undefined);

            });
            break;

        default:
            break;
    }
    var snap = new ol.interaction.Snap({
        source: vector.getSource()
    });
    map.addInteraction(snap);
});

.ol-attribution > ul {
    font-size: 1.6rem;
}

.overlay {
    display: none;
    position: absolute;
    background: rgba(255,255,255,0.9);
    box-shadow: 0 0 10px 0 rgba(0,0,0,0.25);
    padding: 15px;
    border-radius: 10px;
    border: 1px solid #ccc;
    width: 180px;
    top: -76px;
    left: -90px;
}

.overlay:after {
    top: 100%;
    border: 10px solid transparent;
    content: "";
    height: 0;
    width: 0;
    position: absolute;
    border-top-color: rgba(255,255,255,0.9);
}

.overlay button + button {
    float: right;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.6.5/ol.css" type="text/css">
</head>

<body>
    <div class="container">
        <nav class="navbar navbar-expand-sm navbar-light bg-light">
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
            <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
                <a class="navbar-brand" href="#">Test</a>
            </div>
        </nav>
        <div id="map" class="map"></div>
        <br>
        <div id="js-overlay">
            <button id="js-remove">Remove</button>
        </div>
        <div class="btn-group btn-group-sm" role="group" aria-label="Draw">
            <button id="pan" type="button" class="btn btn-primary">Pan</button>
            <button id="point" type="button" class="btn btn-success">Point</button>
            <button id="line" type="button" class="btn btn-success">Line</button>
            <button id="polygon" type="button" class="btn btn-success">Polygon</button>
            <button id="modify" type="button" class="btn btn-primary">Modify</button>
            <button id="delete" type="button" class="btn btn-danger">Delete</button>
        </div>

    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.6.5/ol.js" type="text/javascript"></script>
    <script src="select.js" type="text/javascript"></script>
</body>

</html>

UPDATE_3

所以，假设我已经设法删除了绘制的功能，但对代码进行了一些更改，并添加了新的但我认为可以管理的错误。在删除案例中，我添加了 Select 交互以及删除功能。（我更新了代码片段）

所以，在删除的情况下，我添加了这段代码：

        interaction = new ol.interaction.Select({
            condition: ol.events.condition.click,
            layers: [vector]
        });
        map.addInteraction(interaction);

        interaction.on('select', function(event) {
            selectedFeature = event.selected[0];
            console.log(selectedFeature.getGeometry().getExtent());
            (selectedFeature) ? overlay.setPosition(selectedFeature.getGeometry().getExtent()): overlay.setPosition(undefined);
        });

        document.getElementById('js-remove').addEventListener('click', function() {
            vector.getSource().removeFeature(selectedFeature);
            overlay.setPosition(undefined);
            interaction.getFeatures().clear();
        });

这成功删除了绘制的矢量但产生了此错误：

Uncaught TypeError: Cannot read property 'forEach' of undefined

每次我成功删除矢量后以及我想添加新矢量然后再次删除同一个矢量时都会发生此错误，它会产生上述错误。我认为问题在于最后一个块

document.getElementById('js-remove').addEventListener('click', function() {
    vector.getSource().removeFeature(selectedFeature);
    overlay.setPosition(undefined);
    interaction.getFeatures().clear();
});

有谁知道可能是什么问题或如何解决？我确实尝试 for loop 而不是最后一个块，但没有成功。值得一提的是，当我使用下面的代码时，它会简单地选择向量但不会删除它。

   var buttons = document.getElementById('js-remove');
      for (var i = 0; i < buttons.length; i++) {
                 var self = buttons[i];
                 console.log (self);
                self.addEventListener('click', function(event) {
                    vector.getSource().removeFeature(selectedFeature);
                    overlay.setPosition(undefined);
                    interaction.getFeatures().clear();
                });
            }

Answer 1

所以，在“暗中刺杀”之后，我终于想通了（运气不好）。我只是从 delete 案例中剪切了这段代码并将其放在代码顶部附近。

document.getElementById('js-remove').addEventListener('click', function() {
    vector.getSource().removeFeature(selectedFeature);
    overlay.setPosition(undefined);
    interaction.getFeatures().clear();
});

我已经用正确工作的示例更新了问题片段，请享用。我希望它对某人有所帮助:)

OpenLayers 3 - 删除功能

OpenLayers 3 - deleting features

javascript

jquery

loops

openlayers

openlayers-3