0
如何使用“z”和“a”缩放Openlayers3中的地图? 目前我使用这个功能:map.getView().setZoom(map.getView().getZoom()+1)
。 但我不知道如何在按“A”或“Z”时使其工作。我可以在Openlayers3中使用“z”和“a”缩放地图吗?
如何使用“z”和“a”缩放Openlayers3中的地图? 目前我使用这个功能:map.getView().setZoom(map.getView().getZoom()+1)
。 但我不知道如何在按“A”或“Z”时使其工作。我可以在Openlayers3中使用“z”和“a”缩放地图吗?
你可以通过keyCode来实现。
当然,您可能需要获取地图元素的焦点。
document.getElementById('map').focus();
的例子:
<!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({
\t \t 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>
检查按下了哪个键...... – Justinas
是的,但问题是,变焦不遵循mause – TooFast