Files
openlayers/wmts-hidpi/apidoc/ol.interaction.KeyboardPan.html
T
2014-03-27 20:46:44 +01:00

1061 lines
24 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>OpenLayers 3 API Documentation - Class: ol.interaction.KeyboardPan</title>
<script src="scripts/prettify/prettify.js"> </script>
<script src="scripts/prettify/lang-css.js"> </script>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link type="text/css" rel="stylesheet" href="styles/prettify-jsdoc.css">
<link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="../resources/layout.css" type="text/css">
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
<link type="text/css" rel="stylesheet" href="styles/ol.css">
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="/"><img src="../resources/logo.png"> OpenLayers 3</a>
</div>
</div>
</div>
<div id="main">
<section>
<header>
<h2>
<span class="ancestors"><a href="ol.html">ol</a><a href="ol.interaction.html">.interaction</a>.</span>
ol.interaction.KeyboardPan
</h2>
</header>
<article>
<div class="container-overview">
<dt>
<h4 class="name" id="KeyboardPan"><span class="type-signature"></span>new KeyboardPan</h4>
<div class="stability stability-experimental">Stability: experimental</div>
</dt>
<dd>
<div class="description">
<p>Allows the user to pan the map using keyboard arrows.
Note that, although this interaction is by default included in maps,
the keys can only be used when browser focus is on the element to which
the keyboard events are attached. By default, this is the map div,
though you can change this with the <code>keyboardTargetElement</code> in
<a href="ol.Map.html">ol.Map</a>. <code>document</code> never loses focus but, for any other element,
focus will have to be on, and returned to, this element if the keys are to
function.
See also <a href="ol.interaction.KeyboardZoom.html">ol.interaction.KeyboardZoom</a>.</p>
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Argument</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>options</code></td>
<td class="type">
<span class="param-type"><a href="olx.interaction.html#KeyboardPanOptions">olx.interaction.KeyboardPanOptions</a></span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>Options.</p></td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>keyboardpaninteraction.js, line 38</li></ul></dd>
</dl>
</dd>
</div>
<h3 class="subsection-title">Extends</h3>
<ul>
<li><a href="ol.interaction.Interaction.html">ol.interaction.Interaction</a></li>
</ul>
<h3 class="subsection-title">Methods</h3>
<dl>
<dt>
<h4 class="name" id="dispatchChangeEvent"><span class="type-signature"></span>dispatchChangeEvent</h4>
<div class="stability stability-experimental">Stability: experimental</div>
</dt>
<dd>
<div class="description">
<p>Dispatches a <code>change</code> event. Register a listener for this event to get
notified of changes.</p>
</div>
<dl class="details">
<dt class="inherited-from">Inherited From:</dt>
<dd class="inherited-from"><ul class="dummy"><li>
<a href="ol.Observable.html#dispatchChangeEvent">ol.Observable#dispatchChangeEvent</a>
</li></dd>
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>observable.js, line 39</li></ul></dd>
</dl>
<h5>Fires:</h5>
<ul>
<li>
event:change
</li>
</ul>
</dd>
<dt>
<h4 class="name" id="on"><span class="type-signature"></span>on</h4>
<div class="stability stability-experimental">Stability: experimental</div>
</dt>
<dd>
<div class="description">
<p>Listen for a certain type of event.</p>
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Argument</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>type</code></td>
<td class="type">
<span class="param-type">string</span>
|
<span class="param-type">Array.&lt;string></span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>The event type or array of event types.</p></td>
</tr>
<tr>
<td class="name"><code>listener</code></td>
<td class="type">
<span class="param-type">function</span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>The listener function.</p></td>
</tr>
<tr>
<td class="name"><code>this</code></td>
<td class="type">
<span class="param-type">Object</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>The object to use as <code>this</code> in <code>listener</code>.</p></td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="inherited-from">Inherited From:</dt>
<dd class="inherited-from"><ul class="dummy"><li>
<a href="ol.Observable.html#on">ol.Observable#on</a>
</li></dd>
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>observable.js, line 62</li></ul></dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
<p>Unique key for the listener.</p>
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">goog.events.Key</span>
</dd>
</dl>
</dd>
<dt>
<h4 class="name" id="once"><span class="type-signature"></span>once</h4>
<div class="stability stability-experimental">Stability: experimental</div>
</dt>
<dd>
<div class="description">
<p>Listen once for a certain type of event.</p>
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Argument</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>type</code></td>
<td class="type">
<span class="param-type">string</span>
|
<span class="param-type">Array.&lt;string></span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>The event type or array of event types.</p></td>
</tr>
<tr>
<td class="name"><code>listener</code></td>
<td class="type">
<span class="param-type">function</span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>The listener function.</p></td>
</tr>
<tr>
<td class="name"><code>this</code></td>
<td class="type">
<span class="param-type">Object</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>The object to use as <code>this</code> in <code>listener</code>.</p></td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="inherited-from">Inherited From:</dt>
<dd class="inherited-from"><ul class="dummy"><li>
<a href="ol.Observable.html#once">ol.Observable#once</a>
</li></dd>
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>observable.js, line 75</li></ul></dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
<p>Unique key for the listener.</p>
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">goog.events.Key</span>
</dd>
</dl>
</dd>
<dt>
<h4 class="name" id="un"><span class="type-signature"></span>un</h4>
<div class="stability stability-experimental">Stability: experimental</div>
</dt>
<dd>
<div class="description">
<p>Unlisten for a certain type of event.</p>
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Argument</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>type</code></td>
<td class="type">
<span class="param-type">string</span>
|
<span class="param-type">Array.&lt;string></span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>The event type or array of event types.</p></td>
</tr>
<tr>
<td class="name"><code>listener</code></td>
<td class="type">
<span class="param-type">function</span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>The listener function.</p></td>
</tr>
<tr>
<td class="name"><code>this</code></td>
<td class="type">
<span class="param-type">Object</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>The object to use as <code>this</code> in <code>listener</code>.</p></td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="inherited-from">Inherited From:</dt>
<dd class="inherited-from"><ul class="dummy"><li>
<a href="ol.Observable.html#un">ol.Observable#un</a>
</li></dd>
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>observable.js, line 87</li></ul></dd>
</dl>
</dd>
<dt>
<h4 class="name" id="unByKey"><span class="type-signature"></span>unByKey</h4>
<div class="stability stability-experimental">Stability: experimental</div>
</dt>
<dd>
<div class="description">
<p>Removes an event listener using the key returned by <code>on()</code> or <code>once()</code>.</p>
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>key</code></td>
<td class="type">
<span class="param-type">goog.events.Key</span>
</td>
<td class="description last"><p>Key.</p></td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="inherited-from">Inherited From:</dt>
<dd class="inherited-from"><ul class="dummy"><li>
<a href="ol.Observable.html#unByKey">ol.Observable#unByKey</a>
</li></dd>
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>observable.js, line 97</li></ul></dd>
</dl>
</dd>
</dl>
</article>
</section>
</div>
<nav>
<h2><a href="index.html">Index</a></h2><h3>Classes</h3><ul><li><a href="ol.Attribution.html">ol.Attribution</a></li><li><a href="ol.Collection.html">ol.Collection</a></li><li><a href="ol.CollectionEvent.html">ol.CollectionEvent</a></li><li><a href="ol.DeviceOrientation.html">ol.DeviceOrientation</a></li><li><a href="ol.DragBoxEvent.html">ol.DragBoxEvent</a></li><li><a href="ol.DrawEvent.html">ol.DrawEvent</a></li><li><a href="ol.Feature.html">ol.Feature</a></li><li><a href="ol.FeatureOverlay.html">ol.FeatureOverlay</a></li><li><a href="ol.Geolocation.html">ol.Geolocation</a></li><li><a href="ol.ImageTile.html">ol.ImageTile</a></li><li><a href="ol.Kinetic.html">ol.Kinetic</a></li><li><a href="ol.Map.html">ol.Map</a></li><li><a href="ol.MapBrowserEvent.html">ol.MapBrowserEvent</a></li><li><a href="ol.MapEvent.html">ol.MapEvent</a></li><li><a href="ol.Object.html">ol.Object</a></li><li><a href="ol.ObjectEvent.html">ol.ObjectEvent</a></li><li><a href="ol.Observable.html">ol.Observable</a></li><li><a href="ol.Overlay.html">ol.Overlay</a></li><li><a href="ol.TileCoord.html">ol.TileCoord</a></li><li><a href="ol.View2D.html">ol.View2D</a></li><li><a href="ol.control.Attribution.html">ol.control.Attribution</a></li><li><a href="ol.control.Control.html">ol.control.Control</a></li><li><a href="ol.control.FullScreen.html">ol.control.FullScreen</a></li><li><a href="ol.control.Logo.html">ol.control.Logo</a></li><li><a href="ol.control.MousePosition.html">ol.control.MousePosition</a></li><li><a href="ol.control.ScaleLine.html">ol.control.ScaleLine</a></li><li><a href="ol.control.Zoom.html">ol.control.Zoom</a></li><li><a href="ol.control.ZoomSlider.html">ol.control.ZoomSlider</a></li><li><a href="ol.control.ZoomToExtent.html">ol.control.ZoomToExtent</a></li><li><a href="ol.dom.Input.html">ol.dom.Input</a></li><li><a href="ol.format.Feature.html">ol.format.Feature</a></li><li><a href="ol.format.GPX.html">ol.format.GPX</a></li><li><a href="ol.format.GeoJSON.html">ol.format.GeoJSON</a></li><li><a href="ol.format.IGC.html">ol.format.IGC</a></li><li><a href="ol.format.KML.html">ol.format.KML</a></li><li><a href="ol.format.TopoJSON.html">ol.format.TopoJSON</a></li><li><a href="ol.format.WFS.html">ol.format.WFS</a></li><li><a href="ol.format.WMSCapabilities.html">ol.format.WMSCapabilities</a></li><li><a href="ol.geom.Circle.html">ol.geom.Circle</a></li><li><a href="ol.geom.Geometry.html">ol.geom.Geometry</a></li><li><a href="ol.geom.GeometryCollection.html">ol.geom.GeometryCollection</a></li><li><a href="ol.geom.LineString.html">ol.geom.LineString</a></li><li><a href="ol.geom.LinearRing.html">ol.geom.LinearRing</a></li><li><a href="ol.geom.MultiLineString.html">ol.geom.MultiLineString</a></li><li><a href="ol.geom.MultiPoint.html">ol.geom.MultiPoint</a></li><li><a href="ol.geom.MultiPolygon.html">ol.geom.MultiPolygon</a></li><li><a href="ol.geom.Point.html">ol.geom.Point</a></li><li><a href="ol.geom.Polygon.html">ol.geom.Polygon</a></li><li><a href="ol.geom.SimpleGeometry.html">ol.geom.SimpleGeometry</a></li><li><a href="ol.interaction.DoubleClickZoom.html">ol.interaction.DoubleClickZoom</a></li><li><a href="ol.interaction.DragAndDrop.html">ol.interaction.DragAndDrop</a></li><li><a href="ol.interaction.DragAndDropEvent.html">ol.interaction.DragAndDropEvent</a></li><li><a href="ol.interaction.DragBox.html">ol.interaction.DragBox</a></li><li><a href="ol.interaction.DragPan.html">ol.interaction.DragPan</a></li><li><a href="ol.interaction.DragRotate.html">ol.interaction.DragRotate</a></li><li><a href="ol.interaction.DragRotateAndZoom.html">ol.interaction.DragRotateAndZoom</a></li><li><a href="ol.interaction.DragZoom.html">ol.interaction.DragZoom</a></li><li><a href="ol.interaction.Draw.html">ol.interaction.Draw</a></li><li><a href="ol.interaction.Interaction.html">ol.interaction.Interaction</a></li><li><a href="ol.interaction.KeyboardPan.html">ol.interaction.KeyboardPan</a></li><li><a href="ol.interaction.KeyboardZoom.html">ol.interaction.KeyboardZoom</a></li><li><a href="ol.interaction.Modify.html">ol.interaction.Modify</a></li><li><a href="ol.interaction.MouseWheelZoom.html">ol.interaction.MouseWheelZoom</a></li><li><a href="ol.interaction.PinchRotate.html">ol.interaction.PinchRotate</a></li><li><a href="ol.interaction.PinchZoom.html">ol.interaction.PinchZoom</a></li><li><a href="ol.interaction.Select.html">ol.interaction.Select</a></li><li><a href="ol.layer.Base.html">ol.layer.Base</a></li><li><a href="ol.layer.Group.html">ol.layer.Group</a></li><li><a href="ol.layer.Heatmap.html">ol.layer.Heatmap</a></li><li><a href="ol.layer.Image.html">ol.layer.Image</a></li><li><a href="ol.layer.Layer.html">ol.layer.Layer</a></li><li><a href="ol.layer.Tile.html">ol.layer.Tile</a></li><li><a href="ol.layer.Vector.html">ol.layer.Vector</a></li><li><a href="ol.proj.Projection.html">ol.proj.Projection</a></li><li><a href="ol.render.Event.html">ol.render.Event</a></li><li><a href="ol.render.canvas.Immediate.html">ol.render.canvas.Immediate</a></li><li><a href="ol.source.BingMaps.html">ol.source.BingMaps</a></li><li><a href="ol.source.GPX.html">ol.source.GPX</a></li><li><a href="ol.source.GeoJSON.html">ol.source.GeoJSON</a></li><li><a href="ol.source.IGC.html">ol.source.IGC</a></li><li><a href="ol.source.ImageCanvas.html">ol.source.ImageCanvas</a></li><li><a href="ol.source.ImageStatic.html">ol.source.ImageStatic</a></li><li><a href="ol.source.ImageVector.html">ol.source.ImageVector</a></li><li><a href="ol.source.ImageWMS.html">ol.source.ImageWMS</a></li><li><a href="ol.source.KML.html">ol.source.KML</a></li><li><a href="ol.source.MapGuide.html">ol.source.MapGuide</a></li><li><a href="ol.source.MapQuest.html">ol.source.MapQuest</a></li><li><a href="ol.source.OSM.html">ol.source.OSM</a></li><li><a href="ol.source.OSMXML.html">ol.source.OSMXML</a></li><li><a href="ol.source.Source.html">ol.source.Source</a></li><li><a href="ol.source.Stamen.html">ol.source.Stamen</a></li><li><a href="ol.source.TileDebug.html">ol.source.TileDebug</a></li><li><a href="ol.source.TileImage.html">ol.source.TileImage</a></li><li><a href="ol.source.TileJSON.html">ol.source.TileJSON</a></li><li><a href="ol.source.TileWMS.html">ol.source.TileWMS</a></li><li><a href="ol.source.TopoJSON.html">ol.source.TopoJSON</a></li><li><a href="ol.source.Vector.html">ol.source.Vector</a></li><li><a href="ol.source.VectorEvent.html">ol.source.VectorEvent</a></li><li><a href="ol.source.VectorFile.html">ol.source.VectorFile</a></li><li><a href="ol.source.WMTS.html">ol.source.WMTS</a></li><li><a href="ol.source.XYZ.html">ol.source.XYZ</a></li><li><a href="ol.source.Zoomify.html">ol.source.Zoomify</a></li><li><a href="ol.style.Circle.html">ol.style.Circle</a></li><li><a href="ol.style.Fill.html">ol.style.Fill</a></li><li><a href="ol.style.Icon.html">ol.style.Icon</a></li><li><a href="ol.style.Image.html">ol.style.Image</a></li><li><a href="ol.style.Stroke.html">ol.style.Stroke</a></li><li><a href="ol.style.Style.html">ol.style.Style</a></li><li><a href="ol.style.Text.html">ol.style.Text</a></li><li><a href="ol.tilegrid.TileGrid.html">ol.tilegrid.TileGrid</a></li><li><a href="ol.tilegrid.WMTS.html">ol.tilegrid.WMTS</a></li><li><a href="ol.tilegrid.XYZ.html">ol.tilegrid.XYZ</a></li><li><a href="ol.tilegrid.Zoomify.html">ol.tilegrid.Zoomify</a></li><li><a href="ol.webgl.Context.html">ol.webgl.Context</a></li></ul><h3>Namespaces</h3><ul><li><a href="ol.html">ol</a></li><li><a href="ol.BrowserFeature.html">ol.BrowserFeature</a></li><li><a href="ol.animation.html">ol.animation</a></li><li><a href="ol.control.html">ol.control</a></li><li><a href="ol.events.condition.html">ol.events.condition</a></li><li><a href="ol.feature_.html">ol.feature</a></li><li><a href="ol.geom.html">ol.geom</a></li><li><a href="ol.interaction.html">ol.interaction</a></li><li><a href="ol.layer.html">ol.layer</a></li><li><a href="ol.proj.html">ol.proj</a></li><li><a href="ol.render.html">ol.render</a></li><li><a href="ol.render.canvas.html">ol.render.canvas</a></li><li><a href="ol.source.html">ol.source</a></li><li><a href="ol.tilegrid.html">ol.tilegrid</a></li><li><a href="olx.html">olx</a></li><li><a href="olx.animation.html">olx.animation</a></li><li><a href="olx.control.html">olx.control</a></li><li><a href="olx.format.html">olx.format</a></li><li><a href="olx.interaction.html">olx.interaction</a></li><li><a href="olx.layer.html">olx.layer</a></li><li><a href="olx.parser.html">olx.parser</a></li><li><a href="olx.render.html">olx.render</a></li><li><a href="olx.source.html">olx.source</a></li><li><a href="olx.style.html">olx.style</a></li><li><a href="olx.tilegrid.html">olx.tilegrid</a></li></ul><h3>Global</h3><ul><li><a href="global.html#grid">grid</a></li></ul>
</nav>
<br clear="both">
<footer>
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3</a>
</footer>
<script> prettyPrint(); </script>
</body>
</html>