OpenLayers 3-刪除功能
[英]OpenLayers 3 - deleting features
問題描述
因此，我想使用以下代碼刪除所選功能：
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://cdnjs.cloudflare.com/ajax/libs/openlayers/4.6.5/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://cdnjs.cloudflare.com/ajax/libs/openlayers/4.6.5/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();
});
}
1 個解決方案
解決方案1
0 已采納 2017-09-18 11:08:53
因此，在“ 暗中刺傷 ”之后，我終於想通了（由於運氣不好）。 我只是從delete例中切出了這段代碼，並將其放在代碼的頂部附近。
document.getElementById('js-remove').addEventListener('click', function() {
vector.getSource().removeFeature(selectedFeature);
overlay.setPosition(undefined);
interaction.getFeatures().clear();
});
我已經用正確的示例更新了問題代碼片段，請享用。 我希望它可以幫助某人:)
如何序列化OpenLayers功能？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.