在初学openlayers的时候,我们经常会有这样的需求:在地图上画一个几何图形,但是中途如果画错了希望按下ESC按键撤销上一个画的点。我最近就有遇到,我通过jQuery和removeLastPoint()结合实现这个功能的。
直接上代码:
<script>
import Draw from 'ol/interaction/Draw';//首先引入Draw
import Vector from 'ol/source';
import {Vector as VectorLayer} from "ol/layer";
export default {
methods{
drawGeom(){
var source = new Vector ({wrapX: false});
var vector = new VectorLayer({
id:"draw",
source: source
});
var draw;
draw = new Draw({ //初始化画笔
source: source,
type: "Polygon"
});
this.map.addInteraction(draw);
this.map.addLayer(vector);
draw.on('drawstart',(evt)=>{
$(document).on('keyup', function(event){
if(event.keyCode === 27){ //当按下ESC时执行removeLastPoint()去除画的上一个点
draw.removeLastPoint();
}
});
});
}
}
}
</script>