在 ol.interaction.Draw Open Layers 中捕获 Shift 单击事件

Question

我正在尝试使用ol.interaction.Draw将多边形添加到开放图层地图中。我还打开了 Snap 交互，并设置为在按住 shift 时关闭。

const
snapInteraction = new ol.interaction.Snap({
source: drawLayer.getSource()
}),
turnOnSnap = (evt) => {
if (!isShiftKey(evt)) {
return;
}
console.log('shift key is down, turning off snap');
snapInteraction.setActive(false);
},
turnOffSnap = (evt) => {
if (!isShiftKey(evt)) {
return;
}
console.log('shift key is up, turning on snap');
snapInteraction.setActive(true);
};
document.addEventListener('keydown', turnOnSnap);
document.addEventListener('keyup', turnOffSnap);

这适用于禁用捕捉。但是，当我按住 shift 时，我的绘制交互不起作用。我知道condition参数默认为ol.events.condition.noModifierKeys，但是当我进行自定义condition时，它甚至永远不会被击中！

const drawInteraction = new ol.interaction.Draw({
source: drawLayer.getSource(),
type: 'Polygon',
condition: function (evt) {
console.log("yo, why isn't this hit when I hold down shift?", evt);
return (ol.events.condition.noModifierKeys(evt) ||
ol.events.condition.shiftKeyOnly(evt));
}
});

为什么绘图交互忽略 shift+click 事件？

Answer 1

freehandCondition的默认值是捕获 shift+click 事件，因此永远不会对它们进行condition评估。将其更改为其他内容，Shift+单击事件将命中您的自定义条件函数。

const drawInteraction = new ol.interaction.Draw({
source: drawLayer.getSource(),
type: 'Polygon',
condition: function (evt) {
return (ol.events.condition.noModifierKeys(evt) ||
ol.events.condition.shiftKeyOnly(evt));
},
freehandCondition: ol.events.condition.never, // <-- add this line
});