TRICK系列：Openlayers 中实现Draw通过键盘按键取消全部绘制、取消上一步绘制

前言

Draw是OpenLayers中常用的一个组件，默认是单击绘制，双击结束绘制。

但是在实际工程中常常需要在绘制过程中使用按键来取消全部绘制、取消上一步绘制，如何做到呢？

闲言少叙，直接上干货。

原理

在draw中是不处理键盘的按键事件的，只有当鼠标的左右键按下的时候，才会触发ol/MapBrowserEvent 类的事件，所以我们无法使用Openlayers的机制来实现使用按键的目的。此时就需要引入方便又强大的jQuery了。通过jQuery监听document对象的按键事件，来实现我们取消全部或者取消上一步的绘制。

操作

直接上代码吧

import Map from 'ol/Map';
import View from 'ol/View';
import Draw from 'ol/interaction/Draw';
import {
    Tile as TileLayer,
    Vector as VectorLayer
} from 'ol/layer';
import {
    OSM,
    Vector as VectorSource
} from 'ol/source';
import $ from 'jquery'
var raster = new TileLayer({
    source: new OSM()
});

var source = new VectorSource({
    wrapX: false
});

var vector = new VectorLayer({
    source: source
});

var map = new Map({
    layers: [raster, vector],
    target: 'map',
    view: new View({
        center: [-11000000, 4600000],
        zoom: 4
    })
});

var typeSelect = document.getElementById('type');

var draw; // global so we can remove it later
function addInteraction() {
    var value = typeSelect.value;
    if (value !== 'None') {
        draw = new Draw({
            source: source,
            type: typeSelect.value,

        });
        map.addInteraction(draw);
    }
}

typeSelect.onchange = function () {
    map.removeInteraction(draw);
    addInteraction();
};
addInteraction();


$(document).keyup(function (event) {
    if (event.keyCode == 27)
        draw.abortDrawing();
    else if (event.keyCode == 90 && event.ctrlKey) {
        console.log(draw);
        if (typeSelect.value== 'Circle')
            draw.abortDrawing();
        else
            draw.removeLastPoint()

    }
})

需要注意的是，这个函数只有Openlayers 6.3之后才有，那么在之前的老版本里（比如5.x甚至6.0.x、6.1.x），需要自己把这个逻辑实现出来，重载Draw类添加一个abortDrawing()公有成员：

import Map from 'ol/Map';
import View from 'ol/View';
import Draw from 'ol/interaction/Draw';
import {
    Tile as TileLayer,
    Vector as VectorLayer
} from 'ol/layer';
import {
    OSM,
    Vector as VectorSource
} from 'ol/source';
import $ from 'jquery'


class DrawPlus extends Draw{
     constructor(options){
         super(options);
     } 
     abortDrawing() {
      this.abortDrawing_();
      }
}
   


var raster = new TileLayer({
    source: new OSM()
});

var source = new VectorSource({
    wrapX: false
});

var vector = new VectorLayer({
    source: source
});

var map = new Map({
    layers: [raster, vector],
    target: 'map',
    view: new View({
        center: [-11000000, 4600000],
        zoom: 4
    })
});

var typeSelect = document.getElementById('type');

var draw; // global so we can remove it later
function addInteraction() {
    var value = typeSelect.value;
    if (value !== 'None') {
        draw = new DrawPlus({
            source: source,
            type: typeSelect.value,

        });
        map.addInteraction(draw);
    }
}

typeSelect.onchange = function () {
    map.removeInteraction(draw);
    addInteraction();
};
addInteraction();


$(document).keyup(function (event) {
    if (event.keyCode == 27)
        draw.abortDrawing();
    else if (event.keyCode == 90 && event.ctrlKey) {
        console.log(draw);
        if (typeSelect.value== 'Circle')
            draw.abortDrawing();
        else
            draw.removeLastPoint()

    }
})