0
所以，我想用下面的代碼刪除所選的特點：的OpenLayers 3 - 刪除功能
var vector = new ol.layer.Vector({
source: new ol.source.Vector()
});
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
}),
vector
],
target: 'map',
view: new ol.View({
center: [-11000000, 4600000],
zoom: 4
})
});
map.on('pointermove', function(e) {
if (e.dragging) return;
var
pixel = map.getEventPixel(e.originalEvent),
hit = map.hasFeatureAtPixel(pixel);
map.getTargetElement().style.cursor = hit ? 'pointer' : '';
});
document.getElementById('js-remove').addEventListener('click', function() {
vector.getSource().removeFeature(selectedFeature);
overlay.setPosition(undefined);
interaction.getFeatures().clear();
});
var remove_b = document.getElementById('js-overlay');
var overlay = new ol.Overlay({
element: remove_b
});
map.addOverlay(overlay);
document.getElementById('js-overlay').style.display = 'block';
var selectedFeature;
var button = $('#pan').button('toggle');
var interaction;
var features;
$('div.btn-group button').on('click', function(event) {
var id = event.target.id;
var features;
button.button('toggle');
button = $('#' + id).button('toggle');
map.removeInteraction(interaction);
switch (id) {
case "point":
interaction = new ol.interaction.Draw({
type: 'Point',
source: vector.getSource()
});
map.addInteraction(interaction);
break;
case "line":
interaction = new ol.interaction.Draw({
type: 'LineString',
source: vector.getSource()
});
map.addInteraction(interaction);
break;
case "polygon":
interaction = new ol.interaction.Draw({
type: 'Polygon',
source: vector.getSource()
});
map.addInteraction(interaction);
break;
case "modify":
interaction = new ol.interaction.Modify({
features: new ol.Collection(vector.getSource().getFeatures())
});
map.addInteraction(interaction);
break;
case "delete":
interaction = new ol.interaction.Select({
condition: ol.events.condition.click,
layers: [vector]
});
map.addInteraction(interaction);
interaction.on('select', function(event) {
selectedFeature = event.selected[0];
(selectedFeature) ? overlay.setPosition(selectedFeature.getGeometry().getExtent()): overlay.setPosition(undefined);
});
break;
default:
break;
}
var snap = new ol.interaction.Snap({
source: vector.getSource()
});
map.addInteraction(snap);
});.ol-attribution > ul {
font-size: 1.6rem;
}
.overlay {
display: none;
position: absolute;
background: rgba(255,255,255,0.9);
box-shadow: 0 0 10px 0 rgba(0,0,0,0.25);
padding: 15px;
border-radius: 10px;
border: 1px solid #ccc;
width: 180px;
top: -76px;
left: -90px;
}
.overlay:after {
top: 100%;
border: 10px solid transparent;
content: "";
height: 0;
width: 0;
position: absolute;
border-top-color: rgba(255,255,255,0.9);
}
.overlay button + button {
float: right;
}<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<link rel="stylesheet" href="https://openlayers.org/en/v4.3.2/css/ol.css" type="text/css">
</head>
<body>
<div class="container">
<nav class="navbar navbar-expand-sm navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<a class="navbar-brand" href="#">Test</a>
</div>
</nav>
<div id="map" class="map"></div>
<br>
<div id="js-overlay">
<button id="js-remove">Remove</button>
</div>
<div class="btn-group btn-group-sm" role="group" aria-label="Draw">
<button id="pan" type="button" class="btn btn-primary">Pan</button>
<button id="point" type="button" class="btn btn-success">Point</button>
<button id="line" type="button" class="btn btn-success">Line</button>
<button id="polygon" type="button" class="btn btn-success">Polygon</button>
<button id="modify" type="button" class="btn btn-primary">Modify</button>
<button id="delete" type="button" class="btn btn-danger">Delete</button>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<script src="https://openlayers.org/en/v4.3.2/build/ol.js" type="text/javascript"></script>
<script src="select.js" type="text/javascript"></script>
</body>
</html>UPDATE_3
所以，讓我們說，我已經成功地刪除繪製功能，但在代碼和新的一些變化，但我相信易於管理的錯誤。在刪除的情況下，我添加了選擇交互以及刪除功能。 （我已經更新的代碼片段）
所以，在刪除的情況下，我添加的代碼塊：
interaction = new ol.interaction.Select({
condition: ol.events.condition.click,
layers: [vector]
});
map.addInteraction(interaction);
interaction.on('select', function(event) {
selectedFeature = event.selected[0];
console.log(selectedFeature.getGeometry().getExtent());
(selectedFeature) ? overlay.setPosition(selectedFeature.getGeometry().getExtent()): overlay.setPosition(undefined);
});
document.getElementById('js-remove').addEventListener('click', function() {
vector.getSource().removeFeature(selectedFeature);
overlay.setPosition(undefined);
interaction.getFeatures().clear();
});
這成功地吸引了刪除，但向量生成此錯誤：
Uncaught TypeError: Cannot read property 'forEach' of undefined
此錯誤每當我成功刪除矢量，並且當我想添加新矢量，然後再次刪除相同的矢量時，它就會在每次發生上面的錯誤時發生。我認爲問題在於最後一塊
document.getElementById('js-remove').addEventListener('click', function() {
vector.getSource().removeFeature(selectedFeature);
overlay.setPosition(undefined);
interaction.getFeatures().clear();
});
是否有人知道可能是什麼問題或如何解決它？我確實嘗試了for loop而不是最後一塊，但沒有任何成功。值得一提的是，當我使用下面的代碼時，它簡單的選擇了矢量，但並沒有刪除它。
var buttons = document.getElementById('js-remove');
for (var i = 0; i < buttons.length; i++) {
var self = buttons[i];
console.log (self);
self.addEventListener('click', function(event) {
vector.getSource().removeFeature(selectedFeature);
overlay.setPosition(undefined);
interaction.getFeatures().clear();
});
}
使selectedFeatures成爲一個全局變量。 – Adriani6
@ Adriani6我可以在switch case語句中創建全局變量嗎？ – Svinjica
不，在這種情況下，它只會在switch語句的範圍內，但是您可以將值賦給語句中的全局變量。所以把var selectedFeatures = undefined;在第一行上方並在開關中做selectedFeatures = interaction.getFeatures（）; – Adriani6