版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_28418387/article/details/82824052
openlayer自带拉框放大缩小的控件，主要参考了
https://github.com/QingyaFan/openlayers3-examples中的drag-zoom.html里面的代码实现，如图：
实现过程：
1、先使用openlayer中的intersection.dragzoom()初始化一个拉框控件，并设置out属性（控制拉框完成时是放大还是缩小，true为放大，false为缩小），再将拉框控件添加到map中进行交互，设置初始交互值为false。
2、通过绑定控件按钮并监听单击click事件完成拉框放大缩小地图交互事件，
扫描二维码关注公众号，回复：
3372193 查看本文章
问题：
1、版本问题：通过测试可知，dragZoom.G是修改ol.intersection.dragzoom()的out属性的，但是将代码粘贴到我的代码中发现不起作用，无论怎么点击放大缩小，只有放大功能，也就是说修改out属性并没有成功，之后发现是openlayer版本问题，dragZoom.G的功能是4.0版本里的，最新的4.6版本里并没有，所以将版本改成4.0问题解决。
2、还原默认状态：参考代码中在点击放大或者缩小拉框控件之后，再点击放大或者缩小拉框控件并不能立马改变功能，需要再点击一次，通过分析代码得知，点击第一次是还原默认地图状态（即还原原先的拖拽功能，鼠标cursor还原成箭头），点击第二次才是相应的控件功能，所以我添加了一个button控件，用来还原默认地图状态，去掉原来点击两次的设置，使得一次点击可以实现相应功能，如图：
