0
我正在使用Openlayers 3.我做了一個html文件巫婆在離線模式下打開cuntry的地圖，並允許用戶在上面繪製圖像/片段和多邊形。我的問題是，當我改變我想插入地圖上的圖像時，它也繪製了地圖上的其他點，我不明白爲什麼，有什麼想法？Openlayers 3繪製其他圖標
<!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>