1

I am using OpenLayers 3. Here I found how to create and read drawn features. Now I am trying to delete a feature after I draw it on the map. I have tried several methods, but it doesn't want to delete the selected feature.

<!DOCTYPE html>
<html>
<head>
    <title>Draw features example</title>
    <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="http://openlayers.org/en/v3.8.2/css/ol.css" type="text/css">
    <script src="http://openlayers.org/en/v3.8.2/build/ol.js"></script>
    <link rel="stylesheet" href="ol3-popup.css" />
    <link rel="stylesheet" href="popup.css" />
</head>
<body>
    <div class="container-fluid">
        <div class="row-fluid">
            <div class="span12">
                <div id="map" class="map"></div>
                </br>
                <form class="form-inline">
                    <label>Geometry type &nbsp;</label>
                    <select id="type">
                        <option value="None">None</option>
                        <option value="Point">Point</option>
                        <option value="LineString">LineString</option>
                        <option value="Polygon">Polygon</option>
                        <option value="Circle">Circle</option>
                        <option value="Square">Square</option>
                        <option value="Box">Box</option>
                    </select>
                    </br>
                    <div id="div_id">
                        <label id="image_label">Image type &nbsp;</label>
                        <select id="image_type">
                            <option value="stop_sign.png">Stop Sign</option>
                            <option value="Argentina_P-32.svg.png">Argentina</option>
                        </select>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <style>
        .map {
            width: 100%;
            height: 400px;
        }
    </style>
    <script src="ol3-popup.js"></script>  
    <script>
        var SelectedFeature;
        var vectorSource = new ol.source.Vector({
        });

        var vectorLayer = new ol.layer.Vector({
            source: vectorSource
        });
        function guid() {
            function s4() {
                return Math.floor((1 + Math.random()) * 0x10000)
                  .toString(16)
                  .substring(1);
            }
            return s4() + s4() + '-' + s4() + '-' + s4() + '-' +
              s4() + '-' + s4() + s4() + s4();
        }

        var raster = new ol.layer.Tile({
            source: new ol.source.MapQuest({ layer: 'sat' })
        });

        var source = new ol.source.Vector({ wrapX: false });

        var vector = new ol.layer.Vector({
            source: source,
            style: new ol.style.Style({
                fill: new ol.style.Fill({
                    color: 'rgba(255, 255, 255, 0.2)'
                }),
                stroke: new ol.style.Stroke({
                    color: '#ffcc33',
                    width: 2
                }),
                image: new ol.style.Circle({
                    radius: 7,
                    fill: new ol.style.Fill({
                        color: '#ffcc33'
                    })
                })
            })
        });

        var map = new ol.Map({
            layers: [raster, vector],
            target: 'map',
            projection: 'EPSG:4326',
            view: new ol.View({
                center: [-11000000, 4600000],
                zoom: 4,

            })
        });

        var popup = new ol.Overlay.Popup();
        map.addOverlay(popup);

        var typeSelect = document.getElementById('type');

        var draw;
        function addInteraction() {
            if (typeSelect.value !== 'None') {
                var geometryFunction, maxPoints;
                if (typeSelect.value === 'Square') {
                    typeSelect.value = 'Circle';
                    geometryFunction = ol.interaction.Draw.createRegularPolygon(4);
                } else if (typeSelect.value === 'Box') {
                    typeSelect.value = 'LineString';
                    maxPoints = 2;
                    geometryFunction = function (coordinates, geometry) {
                        if (!geometry) {
                            geometry = new ol.geom.Polygon(null);
                        }
                        var start = coordinates[0];
                        var end = coordinates[1];
                        geometry.setCoordinates([
                          [start, [start[0], end[1]], end, [end[0], start[1]], start]
                        ]);
                        return geometry;
                    };
                }
                draw = new ol.interaction.Draw({
                    source: source,
                    type: (typeSelect.value),
                    geometryFunction: geometryFunction,
                    maxPoints: maxPoints
                });

                draw.on('drawend', function (e) {
                    var id = guid();
                    e.feature.featureID = id;
                    e.feature.setProperties({
                        'id': id,
                        'name': typeSelect.value,
                        'description': 'Some values'
                    })

                    document.getElementById("type").selectedIndex = 0;
                    map.removeInteraction(draw);
                });
                map.addInteraction(draw);

            }
        }

        function DeleteFeature() {
            vectorLayer.getSource().removeFeature(SelectedFeature);
        }

        map.on('click', function (evt) {

            var feature = map.forEachFeatureAtPixel(evt.pixel,
            function (feature, layer) {

                SelectedFeature = feature;
                popup.show(evt.coordinate, "<a style='cursor: pointer' onclick='DeleteFeature()'>Delete</a></br>" + feature.featureID + "");
                console.log(feature.featureID);
            });
        });
        typeSelect.onchange = function (e) {
            map.removeInteraction(draw);
            addInteraction();
        };
        addInteraction();
    </script>
</body>
</html>
2
  • Can you verify what the feature collection looks like before and after the delete call? If it is deleted, you might need to force a refresh/redraw or something? Also, make sure your SelectedFeature points correctly to a feature in the collection.
    – Branco
    Commented Aug 31, 2015 at 16:43
  • Same question ... stackoverflow.com/q/32315763/4640499 Commented Sep 1, 2015 at 9:23

2 Answers 2

2
function clearMap() {
   vector_layer.getSource().clear();
   if (select_interaction) {
       select_interaction.getFeatures().clear();
   }
}

I hope that helps you!

2

You can use this code:

vectorLayer.getSource().removeFeature(SelectedFeature);

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.