在OpenLayers 3中，地圖控件指的是下圖標註的這些，包括縮放按鈕，標尺，版權說明，指北針等等。
他們不會隨着地圖的移動而移動，一直處於一個固定的位置。 在實現上，並不是在畫布上繪製的，而是使用傳統的HTML元素來實現的，便於同地圖分離，也便於界面實現。 在本章節中，將先概覽OpenLayers 3中已有的地圖控件，對其實現進行分析，在此基礎上進一步修改其樣式，從而定義自己的控件。
OpenLayers 3目前內置的地圖控件類都在包ol.control下面，依次有：
ol.control.Attribution: 右下角的地圖信息控件ol.control.FullScreen: 全屏控件ol.control.MousePosition: 鼠標位置控件ol.control.OverviewMap: 鳥瞰圖控件ol.control.Rotate: 指北針控件ol.control.ScaleLine: 比例尺控件ol.control.Zoom: 縮放按鈕控件ol.control.ZoomSlider: 縮放滾動條控件ol.control.ZoomToExtent: 放大到設定區域控件
每一個類都有一些設置參數，可對照官網API的文檔來了解其對應的功能。
默認情況下，在地圖上是不會顯示這麼多地圖控件的，只會應用ol.control.defaults()這個函數返回的地圖控件，默認包含了ol.control.Zoom，ol.control.Rotate和ol.control.Attribution這個控件。 其使用方式同ol.interaction.defaults()很像，同樣可以設置一些參數來控制控件的一些功能，從而實現定製化需求。
1、下面我們來實現一個沒有任何控件的地圖：
<!doctype html>
<html xmlns=http://www.w3.org/1999/xhtml>
<head>
<meta http-equiv=Content-Type content="text/html;charset=utf-8">
<meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1">
<meta content=always name=referrer>
<title>點線面圓的繪製</title>
<link href="css/ol.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/ol.js" charset="utf-8"></script>
</head>
<body>
<div id="map" style="width: 100%"></div>
<script type="text/javascript">
var map = new ol.Map({
// 設置地圖控件，默認的三個控件都不顯示
controls: ol.control.defaults({
//右下角的地圖信息控件
attribution: false,
//指北針控件
rotate: false,
//縮放按鈕控件
zoom: false
}),
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
target: 'map',
view: new ol.View({
center: ol.proj.transform(
[120.374798,36.07316], 'EPSG:4326', 'EPSG:3857'),
zoom: 10
})
});
</script>
</body>
</html>
看一下效果：
地圖已經沒有了任何的控件信息！其實如果讓地圖控件都不顯示有一個更簡介的寫法：controls: []，大家可以自行測試一下！
2、我們再實現一個加載了所有基本控件的地圖的展示：
<!doctype html>
<html xmlns=http://www.w3.org/1999/xhtml>
<head>
<meta http-equiv=Content-Type content="text/html;charset=utf-8">
<meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1">
<meta content=always name=referrer>
<title>去除所有地圖控件</title>
<link href="css/ol.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/ol.js" charset="utf-8"></script>
</head>
<body>
<div id="map" style="width: 100%"></div>
<script type="text/javascript">
var map = new ol.Map({
// 在默認控件的基礎上，再加上其他內置的控件
controls: ol.control.defaults().extend([
//全屏
new ol.control.FullScreen(),
//鼠標位置控件
new ol.control.MousePosition(),
//鳥瞰圖控件
new ol.control.OverviewMap(),
//比例尺控件
new ol.control.ScaleLine(),
//縮放滾動條控件
new ol.control.ZoomSlider(),
// 放大到設定區域控件
new ol.control.ZoomToExtent()
]),
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
target: 'map',
view: new ol.View({
center: ol.proj.transform(
[120.374798,36.07316], 'EPSG:4326', 'EPSG:3857'),
zoom: 10
})
});
</script>
</body>
</html>
看一下效果：
下圖是一個界面控件和類的對照關係圖：
每一個控件都有相應的參數設置，如果具體到某一個控件使用時，不能滿足需求，可以先參照官網API說明，進行相應使用。
3、如果我們想改變控件的UI，應該如何改變呢？其實也是非常簡單的，我們先使用開發者調試工具獲取到控件UI，然後直接使用css或者javascript修改即可！我們再來兩個修改控件UI樣式的demo：
<!doctype html>
<html xmlns=http://www.w3.org/1999/xhtml>
<head>
<meta http-equiv=Content-Type content="text/html;charset=utf-8">
<meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1">
<meta content=always name=referrer>
<title>添加所有地圖控件</title>
<link href="css/ol.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/ol.js" charset="utf-8"></script>
<style>
.ol-zoom .ol-zoom-in {
background-color: #0000ff;
color: #ff0000;
}
.ol-zoom .ol-zoom-out {
background-color: #0000ff;
color: black;
}
</style>
}
</head>
<body>
<div id="map" style="width: 100%"></div>
<script type="text/javascript">
var map = new ol.Map({
// 在默認控件的基礎上，再加上其他內置的控件
controls: ol.control.defaults().extend([
//全屏
new ol.control.FullScreen(),
//鼠標位置控件
new ol.control.MousePosition(),
//鳥瞰圖控件
new ol.control.OverviewMap(),
//比例尺控件
new ol.control.ScaleLine(),
//縮放滾動條控件
new ol.control.ZoomSlider(),
// 放大到設定區域控件
new ol.control.ZoomToExtent()
]),
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
target: 'map',
view: new ol.View({
center: ol.proj.transform(
[120.374798,36.07316], 'EPSG:4326', 'EPSG:3857'),
zoom: 10
})
});
</script>
</body>
</html>
這一個我們是通過直接修改css樣式改變控件UI的，可以看一下效果：
我們的地圖放大縮小的控件UI已經發生了改變！
再來一個通過javascript修改控件UI的demo：
<!doctype html>
<html xmlns=http://www.w3.org/1999/xhtml>
<head>
<meta http-equiv=Content-Type content="text/html;charset=utf-8">
<meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1">
<meta content=always name=referrer>
<title>添加所有地圖控件</title>
<link href="css/ol.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/ol.js" charset="utf-8"></script>
<script type="text/javascript" src="js/jquery.js" charset="utf-8"></script>
</head>
<body>
<div id="map2" style="width: 100%"></div>
<script type="text/javascript">
new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
target: 'map2',
view: new ol.View({
center: ol.proj.transform(
[104, 30], 'EPSG:4326', 'EPSG:3857'),
zoom: 10
})
});
// 設置放大按鈕符號，下面這個代碼需要引入jquery，或者zepto庫
$('#map2 .ol-zoom-in').html('<>');
</script>
</body>
</html>
這裏我們引入了JQuery庫使用js代碼對控件樣式進行了修改，看一下效果：
修改成功！既然我們可以通過css或者js修改控件的ui，那麼我們可不可以在地圖上自定義控件呢？顯然是可以的，自定義控件就相對簡單，共分爲兩個步驟，第一步是構建界面，第二步是用代碼實現功能。 下面自定義了一個輸出當前地圖的功能的demo：
3、自定義輸出當前地圖的控件：
<!doctype html>
<html xmlns=http://www.w3.org/1999/xhtml>
<head>
<meta http-equiv=Content-Type content="text/html;charset=utf-8">
<meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1">
<meta content=always name=referrer>
<title>自定義地圖輸出控件</title>
<link href="css/ol.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/ol.js" charset="utf-8"></script>
<script type="text/javascript" src="js/jquery.js" charset="utf-8"></script>
<script type="text/javascript" src="js/fileSave.js" charset="utf-8"></script>
<style>
.share {
position: absolute;
top: 10px;
right: 10px;
border: 1px;
border-color: #333;
background-color: #339999;
color: #fff;
box-shadow: 0px 0px 2px #666;
cursor: pointer;
padding: 0 4px 0 4px;
}
</style>
</head>
<body>
<div id="map" style="width: 100%"></div>
<script type="text/javascript">
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
target: 'map',
view: new ol.View({
center: ol.proj.transform(
[120.374798,36.07316], 'EPSG:4326', 'EPSG:3857'),
zoom: 10
})
});
// 在viewport節點下添加一個分享按鈕
var viewport = map.getViewport();
$(viewport).append('<div id="share" class="share">地圖輸出</div>');
// 監聽按鈕點擊事件，執行相關操作
document.getElementById('share').onclick = function() {
map.once('postcompose', function (event) {
var canvas = event.context.canvas;
canvas.toBlob(function (blob) {
saveAs(blob, 'map.png');
});
});
map.renderSync();
}
</script>
</body>
</html>
這次先解釋一下代碼：首先在viewport節點下添加一個輸出按鈕，然後監聽這個按鈕，這裏我們使用了一個saveAs方法，這是一個調用的封裝好的保存文件的js文件，最後重新渲染了map，來看一下效果：
點擊地圖輸出，會顯示我們已經下載好的地圖：
打開map.png:
當前地圖輸出成功！
關於地圖控件的介紹我們就到這兒了！ 下一節我們會介紹地圖中動畫的使用！大家加油！