我可以在Openlayers3中使用“ z”和“ a”缩放地图吗？

Question

How can I zoom the map in Openlayers3 with "z" and "a" ? 如何在Openlayers3中使用“ z”和“ a”缩放地图？ currently I use this function: map.getView().setZoom(map.getView().getZoom()+1) . 目前，我使用此功能： map.getView().setZoom(map.getView().getZoom()+1) 。 But I do not know how I can make it work when I press "A" or "Z". 但是我不知道当我按“ A”或“ Z”时如何使它工作。

Answer 1

You can do it by keyCode. 您可以通过keyCode做到这一点。

Of course, you may need to get the focus of the map element. 当然，您可能需要获取map元素的焦点。

document.getElementById('map').focus();

The example: 这个例子：

 <!DOCTYPE html> <html> <head> <title>press 'A'or'Z example</title> <link rel="stylesheet" href="https://openlayers.org/en/v3.20.1/css/ol.css" type="text/css"> <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x --> <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script> <script src="https://openlayers.org/en/v3.20.1/build/ol.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.2.61/jspdf.min.js"></script> <style> .map { max-width: 566px; } </style> </head> <body> <div id="map" class="map"></div> <script> var raster = new ol.layer.Tile({ source: new ol.source.OSM() }); var map = new ol.Map({ layers: [raster], target: 'map', controls: ol.control.defaults({ attributionOptions: /** @type {olx.control.AttributionOptions} */ ({ collapsible: false }) }), view: new ol.View({ projection: 'EPSG:4326', center:[104.07, 30.7], zoom: 2 }) }); document.onkeydown=function(event){ var e = event || window.event || arguments.callee.caller.arguments[0]; if((e && e.keyCode==65)||(e && e.keyCode==90)){ // press 'A'or'Z map.getView().setZoom(map.getView().getZoom()+1) } }; </script> </body> </html>

我可以在Openlayers3中使用“ z”和“ a”缩放地图吗？

问题描述

1 个解决方案

解决方案1
0 2017-01-18 06:05:51

我可以在Openlayers3中使用“ z”和“ a”缩放地图吗？

问题描述

1 个解决方案

解决方案1 0 2017-01-18 06:05:51

解决方案1
0 2017-01-18 06:05:51