openlayers 删除上一个图形

jiezi

6 年前

起因
近几日群里经常有人问如何删除一个绘制的图形 (openlayers 中)，顾有此文
需求

在 openlayers 中绘制图形，并且分为不同的样式
删除上一个绘制的图形

思路

创建多个 point—style

构造一个列表存放当前绘制的
本文只有三个图层，使用了一个数组包装 :[图层索引,freature]

删除根据图层索引删除 jiankongLayerVector.getSource().removeFeature(pop[1]);
效果

本文源码
如果对你有帮助，请给一个 star,fork 源码
<!DOCTYPE html>
<html lang=”en”>

<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>