Question

我正在使用OpenLayers 3.在这里，我找到了如何创建和阅读绘制的功能。现在我想在地图上绘制后删除某个功能。我尝试了几种方法，但它并不想删除所选的功能。

<!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>

Answer 1

您的图层名为vector，而不是vectorLayer，因此：

vector.getSource().removeFeature(SelectedFeature);

Openlayers 3无法删除功能

1 个答案: