Openlayers 3在其他图标上绘制

Question

我正在使用Openlayers3。我制作了一个html文件，以脱机模式打开一个cuntry的地图，并允许用户在其上绘制图像/段和多边形。 我的问题是，当我更改要在地图上插入的图像时，它也会在地图上的其他点上绘制，我不明白为什么，有什么想法？

<!DOCTYPE html>
<html>
<head>
    <script src="jquery-1.11.2.min.js"></script>
    <link rel="stylesheet" href="bootstrap.min.css">
    <script src="bootstrap.min.js"></script>
    <link rel="stylesheet" href="ol.css" type="text/css">
    <script src="ol.js"></script>

</head>
<body>
    <div class="container-fluid">

        <div class="row-fluid">
            <div class="span12">
                <div id="map" class="map"></div>
            </div>
            <form class="form-inline">
                <label>Geometry type &nbsp;</label>
                <select id="type">
                    <option value="Point">Point</option>
                    <option value="LineString">LineString</option>
                    <option value="Polygon">Polygon</option>
                </select>
                <select id="image_type">
                    <option value="stop_sign.png">Stop Sign</option>
                    <option value="Argentina_P-32.svg.png">Argentina</option>
                </select>
            </form>
        </div>
        <input type="button" value="Save Coordinates" onclick="SaveCoordinates()">
        <input type="button" value="Get Coordinates" onclick="GetCoordinates()">

    </div>
    <script type="text/javascript">
        var icons = [
            "stop_sign.png",
            "Argentina_P-32.svg.png"
        ];

        var vectorSource = new ol.source.Vector({
            //create empty vector
        });

        var source = new ol.source.XYZ({
            url: 'tiles/{z}/{x}/{y}.png'
        });

        var map = new ol.Map({

            layers: [new ol.layer.Tile({
                source: source
            })],
            target: 'map',
            view: new ol.View({
                center: [3300000, 6000000],
                zoom: 9
            })
        });
        var features = new ol.Collection();
        var modify = new ol.interaction.Modify({
            features: features,
            deleteCondition: function (event) {
                if (event.type == 'pointerup') {
                    var imageSelect = document.getElementById('image_type');
                             var featureOverlay = new ol.layer.Vector({
                        source: new ol.source.Vector({
                            features: features
                        }),
                        style: new ol.style.Style({
                            image: new ol.style.Icon({
                                anchor: [0.5, 0.5],
                                offset: [0, 0],
                                opacity: 1,
                                scale: 1,
                                src: imageSelect.value
                            })
                        })
                    });
                    map.addLayer(featureOverlay);
                    var l = map.getLayers().getArray();
                }
                return ol.events.condition.shiftKeyOnly(event) && ol.events.condition.singleClick(event);
            },
        });

        map.addInteraction(modify);

        var draw;

        function addInteraction() {
            console.log(typeSelect.value);
            draw = new ol.interaction.Draw({
                features: features,
                type: (typeSelect.value)
            });
            map.addInteraction(draw);
        }
        var typeSelect = document.getElementById('type');

        typeSelect.onchange = function (e) {
            map.removeInteraction(draw);
            addInteraction();
        };
        addInteraction();

        function SaveCoordinates() {
            var polyFeatures = featureOverlay.getSource();
            var coordsPoligon = [];
            var coordsPoints = [];
            var coordsLine = [];
            var i = 0;
            var j = 0;
            var z = 0;
            polyFeatures.forEachFeature(function (polyFeature) {
                if (polyFeature.getGeometry().getType() === 'Polygon') {
                    coordsPoligon[i] = polyFeature.getGeometry().getCoordinates();
                    i++;
                } else if (polyFeature.getGeometry().getType() === 'Point') {
                    coordsPoints[j] = polyFeature.getGeometry().getCoordinates();
                    j++;
                } else if (polyFeature.getGeometry().getType() === 'LineString') {
                    coordsLine[z] = polyFeature.getGeometry().getCoordinates();
                    z++;
                }
            });
            var markers = {
                "points": coordsPoints,
                "lines": coordsLine,
                "polygons": coordsPoligon
            };
            $.ajax({
                url: 'http://localhost:54823/LayerDataNew',
                type: 'POST',
                dataType: 'application/json',
                data: markers
            });
        }
        var layerMarkers = [];
        function GetCoordinates() {
            $.get("http://localhost:54823/LayersDataGet", { layerId: 4 }).done(function (data) {
                layerMarkers.push(AddMarkers(data.ObjectResult));
                if (layerMarkers.length > 1) {
                    layerMarkers.splice(0, 1);
                    var l = map.getLayers().getArray();
                    if (l.length > 1) {
                        map.removeLayer(l[1]);
                    }
                }
                map.addLayer(layerMarkers[layerMarkers.length - 1]);
            });
        }
       function AddMarkers(data) {
            for (var i = 0; i < data.length; i++) {
                var object = data[i];
                if (object.Type === 1) {
                    var rnd = Math.random();
                    var style = [
                    new ol.style.Style({
                        image: new ol.style.Icon(({
                            scale: 1,
                            anchor: [0, 0],
                            anchorXUnits: 'fraction',
                            anchorYUnits: 'fraction',
                            opacity: 1,
                            src: object.Value
                        }))
                    })
                    ];
                    var f = new ol.Feature({
                        geometry: new ol.geom.Point([object.Coordinates[0].X, object.Coordinates[0].Y]),
                        name: 'Point ' + i
                    })
                    f.setStyle(style);
                    vectorSource.addFeature(f);
                }
                else if (object.Type === 2) {
                    var polyArray = [];
                    for (var j = 0; j < object.Coordinates.length; j++) {
                        polyArray[j] = [object.Coordinates[j].X, object.Coordinates[j].Y];
                    }
                    vectorSource.addFeature(new ol.Feature({
                        geometry: new ol.geom.LineString(polyArray),
                        name: 'Line ' + i
                    }));
                }
                else if (object.Type === 3) {
                    var polyArray = [];
                    for (var j = 0; j < object.Coordinates.length; j++) {
                        polyArray[j] = [object.Coordinates[j].X, object.Coordinates[j].Y];
                    }
                    vectorSource.addFeature(new ol.Feature({
                        geometry: new ol.geom.Polygon([polyArray]),
                        name: 'Polygon ' + i
                    }));
                }

            }
            var iconStyle = 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
                })
            }); 
            var vectorLayer = new ol.layer.Vector({
                source: vectorSource,
                style: iconStyle
            });
            return vectorLayer;
        }
    </script>
</body>
</html>

Answer 1

这是因为您具有Modify交互的deleteCondition ，该交互不断向地图添加功能相同但样式新颖的新图层。

我无法真正理解您的尝试，但是实际发生的是：

您有一个ol.Collection： features 。 绘图交互为该集合添加了新功能。 每次在顶点上发生mouseup事件时，deleteCondition函数都会在地图上添加一个新图层。 该层在其他层之上绘制，并包含集合中的所有要素，并以当前选择的图标作为样式。

我猜测您的意图是将仅新绘制的功能的样式设置为当前选定的图标。 如果是这种情况，请改为在Draw交互上侦听drawend事件，并在那里设置样式（或样式函数使用的属性）。

仅将deleteCondition选项用于预期用途：确定是否应删除顶点。