效果：
代码：
<!doctype html>
<html lang="en">
<head>
<script src="ol3/ol.js" type="text/javascript"></script>
<link rel="stylesheet" href="ol3/ol.css">
<style type="text/css">
#map {
width: 100%;
height: 100%;
position: absolute;
}
/**
* 缩放滑块控件ZoomSlider的样式，放置到缩放按钮之间实现导航条功能
*/
#map .ol-zoom .ol-zoom-out {
margin-top: 204px;
}
#map .ol-zoomslider {
background-color: transparent;
top: 2.3em;
}
#map .ol-touch .ol-zoom .ol-zoom-out {
margin-top: 212px;
}
#map .ol-touch .ol-zoomslider {
top: 2.75em;
}
#map .ol-zoom-in.ol-has-tooltip:hover [role=tooltip],
#map .ol-zoom-in.ol-has-tooltip:focus [role=tooltip] {
top: 3px;
}
#map .ol-zoom-out.ol-has-tooltip:hover [role=tooltip],
#map .ol-zoom-out.ol-has-tooltip:focus [role=tooltip] {
top: 232px;
}
/**
* 缩放控件zoomToExtent的样式设置
*/
#map .ol-zoom-extent {
top: 280px;
}
</style>
<title>OpenLayers 3 example</title>
</head>
<body>
<div id="map"></div>
<script type="text/javascript">
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: [12000000, 4000000],
zoom: 4
})
});
var zoomslider = new ol.control.ZoomSlider();
map.addControl(zoomslider);
var zoomToExtent = new ol.control.ZoomToExtent({
extent: [
13100000, 4290000,
13200000, 5210000
]
});
map.addControl(zoomToExtent);
</script>
</body>
</html>