OpenLayers的Vector图层可编辑

对于OpenLayers的Vector图层,上面绘制了各种feature。例如绘制了一个多边形,现在希望通过鼠标来动态调整该feature的边界。

OpenLayers的Interaction提供了这种功能。

ol.interaction.Modify配合ol.interaction.Snap,可以实现feature的动态修改。

创建:

var source = layer.getSource();
var modify = new ol.interaction.Modify({
    source: source
});
map.addInteraction(modify);
var snap = new ol.interaction.Snap({
    source: source
);
map.addInteraction(snap);

可见modify和snap的创建都是基于layer的source,所以尽管Interaction是添加给map的,但仅仅对该layer生效。

map添加了modify和snap的Interaction后,就可以用鼠标对feature进行动态调整了,并且带有吸附效果。

要取消图层可编辑,移除掉对应的Interaction即可:

if(snap) {
    map.removeInteraction(snap);
}
if(modify) {
    map.removeInteraction(modify);
}

注意是对layer生效,一旦开启,对整个layer生效,该layer的所有feature都可进行动态调整。

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值