Openlayers 3 無法刪除功能
[英]Openlayers 3 cant delete feature
問題描述
我正在使用 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 </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 </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>
1 個解決方案
解決方案1
1 已采納 2015-08-31 17:08:49
您的圖層稱為vector而不是vectorLayer層，因此：
vector.getSource().removeFeature(SelectedFeature);
OpenLayers保存一項功能
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.