起因
近幾日羣裏經常有人問如何刪除一個繪製的圖形(openlayers 中) ， 顧有此文
需求
- 在openlayers中繪製圖形，並且分爲不同的樣式
- 刪除上一個繪製的圖形
思路
- 創建多個point—style
-
構造一個列表存放當前繪製的
- 本文只有三個圖層，使用了一個數組包裝 :[圖層索引,freature]
- 刪除
根據圖層索引刪除
jiankongLayerVector.getSource().removeFeature(pop[1]);
效果
本文源碼
如果對你有幫助，請給一個star,fork 源碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css"
integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M"
crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js"></script>
<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>
<!--openlayers -->
<!--<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.6.5/ol.css"-->
<!--integrity="sha256-rQq4Fxpq3LlPQ8yP11i6Z2lAo82b6ACDgd35CKyNEBw=" crossorigin="anonymous"/>-->
<!---->
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.6.5/ol.js"-->
<!--integrity="sha256-77IKwU93jwIX7zmgEBfYGHcmeO0Fx2MoWB/ooh9QkBA="-->
<!--crossorigin="anonymous"></script>-->
<script src="https://cdn.bootcss.com/openlayers/3.20.1/ol.js"></script>
<link href="https://cdn.bootcss.com/openlayers/3.20.1/ol.css" rel="stylesheet">
<!--openlayers-->
<script
src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.2.61/jspdf.min.js"></script>
<title>繪製圖形</title>
</head>
<body>
<div class="container">
<br>
<div class="btn-group btn-group-sm" id="bar" role="group" aria-label="Draw">
<button id="point" value="pointless" type="button" class="btn btn-success">視頻監控點</button>
<button id="szy" value="pointless" type="button" class="btn btn-info">水質檢測儀</button>
<button id="swy" value="pointless" type="button" class="btn btn-success">水位監測儀</button>
<button id="chexiao" value="pointless" type="button" class="btn btn-error"
onclick="chexiaobtn()">撤銷
</button>
</div>
</div>
<div id="map" class="map"></div>
</body>
<script>
var gaodeMapLayer = new ol.layer.Tile({
source: new ol.source.XYZ({
url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}'
})
});
var jiankong = [
new ol.style.Style({
image: new ol.style.Circle({
radius: 10,
fill: new ol.style.Fill({
color: '#de3f32'
})
})
})
];
var shuizhi = [
new ol.style.Style({
image: new ol.style.Circle({
radius: 8,
fill: new ol.style.Fill({
color: '#003ade'
})
})
})
];
var shuiweiyi = [
new ol.style.Style({
image: new ol.style.Circle({
radius: 7,
fill: new ol.style.Fill({
color: '#ff5b1e'
})
})
})
];
var jiankongLayerVector = new ol.layer.Vector({
source: new ol.source.Vector(),
style: jiankong
});
var shuizhiLayerVector = new ol.layer.Vector({
source: new ol.source.Vector(),
style: shuizhi
});
var shuiweiLayerVector = new ol.layer.Vector({
source: new ol.source.Vector(),
style: shuiweiyi
});
var map = new ol.Map({
layers: [
gaodeMapLayer,
jiankongLayerVector,
shuizhiLayerVector,
shuiweiLayerVector
],
target: 'map',
view: new ol.View({
center: [120, 30],
projection: 'EPSG:4326',
zoom: 10
})
});
map.on('pointermove', function (e) {
if (e.dragging) {
return;
}
pixel = map.getEventPixel(e.originalEvent),
hit = map.hasFeatureAtPixel(pixel);
map.getTargetElement().style.cursor = hit ? 'pointer' : '';
});
var button = $('#pan').button('toggle');
var interaction;
var features = undefined;
var all_draw_feature = [];
$('div.btn-group button').on('click', function (event) {
var id = event.target.id;
var features;
var selectedFeatures = undefined;
button.button('toggle');
button = $('#' + id).button('toggle');
map.removeInteraction(interaction);
switch (id) {
case "point":
interaction = new ol.interaction.Draw({
type: 'Point',
source: jiankongLayerVector.getSource()
});
interaction.on("drawend", function (e) {
var source = e.target;
var writer = new ol.format.WKT();
var lest = e.feature;
all_draw_feature.push([0, lest]);
console.log("當前圖像內容" + all_draw_feature.length)
});
map.addInteraction(interaction);
break;
case "szy":
interaction = new ol.interaction.Draw({
type: 'Point',
source: shuizhiLayerVector.getSource()
});
interaction.on("drawend", function (e) {
var source = e.target;
var writer = new ol.format.WKT();
var lest = e.feature;
all_draw_feature.push([1, lest]);
console.log("當前圖像內容" + all_draw_feature.length)
});
map.addInteraction(interaction);
break;
case "swy":
interaction = new ol.interaction.Draw({
type: 'Point',
source: shuiweiLayerVector.getSource()
});
interaction.on("drawend", function (e) {
console.log("數萬元");
var source = e.target;
var writer = new ol.format.WKT();
var lest = e.feature;
all_draw_feature.push([2, lest]);
console.log("當前圖像內容" + all_draw_feature.length)
});
map.addInteraction(interaction);
break;
default:
break;
}
var snap = new ol.interaction.Snap({
source: shuiweiLayerVector.getSource()
});
map.addInteraction(snap);
});
function chexiaobtn() {
var pop = all_draw_feature.pop();
console.log("當前圖像內容 " + all_draw_feature.length);
if (pop == undefined) {
alert("沒了不能刪除了 ");
} else if (pop[0] == 0) {
jiankongLayerVector.getSource().removeFeature(pop[1]);
} else if (pop[0] == 1) {
shuizhiLayerVector.getSource().removeFeature(pop[1]);
} else if (pop[0] == 2) {
shuiweiLayerVector.getSource().removeFeature(pop[1]);
}
}
</script>
</html>