共计 5492 个字符，预计需要花费 14 分钟才能阅读完成。
起因
近几日群里经常有人问如何删除一个绘制的图形 (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>
