OpenLayers 3 调整双击绘制结束引起地图放大

前言

就在昨天的验收讨论上，领导对地图工具中关于测距，测面以及其他类似需要双击结束的操作产生了疑问，咋的一双击不只是结束，地图还大了呢？本来画的挺准的，一放大又不准了。抱着处女座的刀上网上看了不少帖子，但是实操起来不太行，各种报错，觉得还是记录一下吧。

原因

绘制结束的操控与地图缩放的操控都是通过双击地图来实现的，在地图默认加载的时候，是存在有9种事件，包括有双击缩放事件（DoubleClickZoom），所以在操作快的情况下会出现影响操作。

解决方法

根源上杜绝

可以通过对map的初始加载进行从根源上的杜绝，在默认加载时禁止地图双击放大的操作。

var map = new ol.Map({    	
    layers : [layer],
    target : id,
    view : new ol.View({
	    projection : 'EPSG:4326',
	    center : [ 117.57,33.27 ],
	    zoom : 9.5,
    }),
    interactions: ol.interaction.defaults({
    	 doubleClickZoom: false,// 取消双击放大功能交互
         mouseWheelZoom: false, // 取消滚动鼠标中间的滑轮交互
         shiftDragZoom: false, // 取消shift+wheel左键拖动交互
    })
});

当然，这种方式不适合仍然需要双击放大的小伙伴。

取巧劲儿

改变思路，人为放弃双击的操作，通过键盘操控绘制的撤销，结束等,
Draw默认是单击绘制，双击结束绘制，只有当鼠标的左右键按下的时候，才会触发MapBrowserEvent类的事件，所以我们无法使用OpenLayers的机制来实现使用按键的目的。通过操作Dom元素进行实现键盘操作

$(target).keyup(function (event) {
    if (event.keyCode == 27)//ESC结束
        draw.finish();
    else if (event.keyCode == 90 && event.ctrlKey) { //ctrl+z撤销
            draw.removeLastPoint();
    }
})
//点,线,面,框等不同操作需要单独分类

常规操作

正常思维下，绘制与放大出现问题，只存在于结束时，所以讲操作拆分，定义工具时找出DoubleClickZoom事件，在作用域定义声明，绘制前移除，绘制后添加，利用时间差来操控人为操作的问题。

var doubleClickZoom= map.getInteractions().getArray().find(
	interaction => {
	  return interaction instanceof ol.interaction.DoubleClickZoom;
	}
);

draw.on('drawstart', function(evt) {
	map.removeInteraction(doubleClickZoom);
}, this);

draw.on('drawend', function(evt) {
	setTimeout(function(){
		map.addInteraction(doubleClickZoom);
	},100);
}, this);

100ms的阈值可以自己来操控。

附录

字母和数字键的键码值表

按键	键码	按键	键码	按键	键码	按键	键码
A	65	J	74	S	83	1	49
B	66	K	75	T	84	2	50
C	67	L	76	U	85	3	51
D	68	M	77	V	86	4	52
E	69	N	78	W	87	5	53
F	70	O	79	X	88	6	54
G	71	P	80	Y	89	7	55
H	72	Q	81	Z	90	8	56
I	73	R	82	0	48	9	57

数字键盘上的键的键码值 与 功能键键码值表

按键	键码	按键	键码	按键	键码	按键	键码
0	96	8	104	F1	112	F7	118
1	97	9	105	F2	113	F8	119
2	98	*	106	F3	114	F9	120
3	99	+	107	F4	115	F10	121
4	100	Enter	108	F5	116	F11	122
5	101	-	109	F6	117	F12	123
6	102	.	110
7	103	/	111

控制键键码值表

按键	键码	按键	键码	按键	键码	按键	键码
BackSpace	8	Esc	27	Right Arrow	39	-_	189
Tab	9	Spacebar	32	Dw Arrow	40	.>	190
Clear	12	Page Up	33	Insert	45	/?	191
Enter	13	Page Down	34	Delete	46	`~	192
Shift	16	End	35	Num Lock	144	[{	219
Control	17	Home	36	;:	186	\	220
Alt	18	Left Arrow	37	=+	187	]}	221
Cape Lock	20	Up Arrow	38	,<	188	'"	222