openlayers 删除上一个图形

起因近几日群里经常有人问如何删除一个绘制的图形(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>