我正在使用Openlayers 3.我制作了一个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 </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>
答案 0 :(得分：0)
It's because of you deleteCondition of the Modify interaction, which continuously adds new layers with the same features but new styles to the map.
I can't really understand what your trying to do, but what actually happens is this:
You have a ol.Collection: features. The draw interaction adds new features to this collection. Each time there's a mouseup event on a vertex, your deleteCondition function adds a new layer to the map. This layer is drawn above the others, and contains all features in the collection with the currently selected icon as a style.
I'm guessing that your intent is to set the style of just the newly drawn feature to the currently selected icon. If that's the case, listen to the drawend event on the Draw interaction instead, and set the style (or a property used by a style function) there.
Use only the deleteCondition option for what it's intended: to determine if a vertex should be deleted.