Can I zoom the map with “z” and “a” in Openlayers3?

Question

How can I zoom the map in Openlayers3 with "z" and "a" ? currently I use this function: map.getView().setZoom(map.getView().getZoom()+1) . But I do not know how I can make it work when I press "A" or "Z".

Answer 1

You can do it by keyCode.

Of course, you may need to get the focus of the map element.

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>

Can I zoom the map with “z” and “a” in Openlayers3?

Question

1 answers

solution1
0 2017-01-18 06:05:51

Can I zoom the map with “z” and “a” in Openlayers3?

Question

1 answers

solution1 0 2017-01-18 06:05:51

solution1
0 2017-01-18 06:05:51