1. 程式人生 > >OpenLayers的Vector圖層可編輯

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都可進行動態調整。