OpenLayers 6中如何在mousedown触发时强制启动Draw交互绘制

核心原因 #

你在mousedown回调中才创建并添加Draw交互时，当前触发的mousedown/pointerdown事件流已经完成派发，新添加的交互没有捕获到本次指针按下事件，无法初始化内部绘制状态，因此不会启动绘制流程。

解决方案 #

方案1：提前初始化Draw交互（推荐，性能更优） #

在地图初始化阶段提前完成图层、交互的创建，默认设置为非激活状态：

// 地图初始化阶段执行一次即可
this.vectorSource = new ol.source.Vector();     
this.vectorLayer = new ol.layer.Vector({source: this.vectorSource});
this.map.addLayer(this.vectorLayer);    

this.drawInteraction = new ol.interaction.Draw({
    source: this.vectorSource,
    type: 'LineString'
});
// 默认关闭交互，避免误触发
this.drawInteraction.setActive(false);
this.map.addInteraction(this.drawInteraction);

在mousedown事件回调中激活交互并主动派发当前的指针事件：

// mousedown 事件回调逻辑
this.drawInteraction.setActive(true);
// 向map派发带坐标信息的pointerdown事件，触发Draw绘制初始化
this.map.dispatchEvent({
    type: 'pointerdown',
    originalEvent: event, // 传入当前mousedown的原生事件对象
    coordinate: this.map.getEventCoordinate(event) // 计算当前点击的地图坐标
});

方案2：mousedown回调中动态创建Draw交互 #

如果你的业务逻辑需要动态创建交互，可按以下方式修改回调代码：

// mousedown 事件回调逻辑
this.vectorSource = new ol.source.Vector();     
this.vectorLayer = new ol.layer.Vector({source: this.vectorSource});
this.map.addLayer(this.vectorLayer);    

const drawObj = {
    source: this.vectorSource,
    type: 'LineString',
    // 放宽事件校验规则，确保本次派发的事件可被识别
    condition: () => true
}

this.drawInteraction = new ol.interaction.Draw(drawObj);
this.map.addInteraction(this.drawInteraction);

// 主动派发pointerdown事件触发绘制
this.map.dispatchEvent({
    type: 'pointerdown',
    originalEvent: event,
    coordinate: this.map.getEventCoordinate(event)
});

之前方案失效原因 #

• 仅调用setActive(true)只是标记交互为可用状态，没有触发交互启动绘制必需的pointerdown事件，无法初始化内部绘制上下文
• 手动派发drawstart事件无效，Draw交互的drawstart是绘制初始化完成后才抛出的后置事件，主动派发不会触发内部绘制逻辑
• 单独派发pointerdown事件未携带坐标、原生事件属性，Draw交互内部无法获取绘制起始坐标，会直接忽略本次事件

内容的提问来源于stack exchange，提问作者Jake K