效果：
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link href="ol3/ol.css" />
<script src="ol3/ol.js"></script>
<script src="../../libs/jquery-1.11.2.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" type="text/javascript"></script>
<style>
#map {
width: 100%;
height: 570px;
}
#menu {
float: left;
position: absolute;
bottom: 10px;
z-index: 2000;
}
.tooltip-inner {
white-space: nowrap;
}
</style>
</head>
<body>
<div id="map">
<div id="menu">
<button id="zoom-out">点击缩小</button>
<button id="zoom-in">点击放大</button>
<button id="zoom-panto">平移到武汉</button>
<button id="zoom-restore">复位</button>
</div>
</div>
<script>
var map = new ol.Map({
target: 'map',
layers: [new ol.layer.Tile({
source: new ol.source.OSM()
})],
view: new ol.View({
center: [12950000, 4860000],
zoom: 8,
minZoom: 6,
maxZoom: 12,
rotation: Math.PI / 6
})
});
var view = map.getView();
var zoom = view.getZoom();
var center = view.getCenter();
var rotation = view.getRotation();
document.getElementById('zoom-out').onclick = function() {
var view = map.getView();
var zoom = view.getZoom();
view.setZoom(zoom - 1);
};
document.getElementById('zoom-in').onclick = function() {
var view = map.getView();
var zoom = view.getZoom();
view.setZoom(zoom + 1);
};
document.getElementById('zoom-panto').onclick = function() {
var view = map.getView();
var wh = ol.proj.fromLonLat([114.31667, 30.51667]);
view.setCenter(wh);
};
document.getElementById('zoom-restore').onclick = function() {
view.setCenter(center);
view.setRotation(rotation);
view.setZoom(zoom);
};
$('.ol-zoom-in, .ol-zoom-out').tooltip({
placement: 'right'
});
$('.ol-rotate-reset, .ol-attribution button[title]').tooltip({
placement: 'left'
});
</script>
</body>
</html>