OpenLayers 3 之 地圖控件（control）

OpenLayers 3 之 地圖控件（control）

地圖控件（control）是指地圖上比例尺，縮略圖，拉近拉遠的按鈕，滾動控制條等控件，默認控件有三個，能夠禁用。

OpenLayers 3 之 地圖控件（control）初始化與定製的代碼以下：

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(
    [104, 30], 'EPSG:4326', 'EPSG:3857'),
    zoom: 10
})
});

添加控件

//添加屬性控件
map.addControl(new ol.control.Attribution());
//添加鼠標定位控件
map.addControl(new ol.control.MousePosition({
    undefinedHTML: 'outside',
    projection: 'EPSG:4326', 
    coordinateFormat: function(coordinate) {
        return ol.coordinate.format(coordinate, '{x}, {y}', 4); 
        }              
    })
);
//添加縮略圖控件
map.addControl(new ol.control.OverviewMap({ 
    collapsed: false  
    }));
//添加旋轉控件
map.addControl(new ol.control.Rotate({
    autoHide: false
    }));
//添加比例尺控件
map.addControl(new ol.control.ScaleLine());
//添加縮放控件
map.addControl(new ol.control.Zoom());
//添加縮放滑動控件
map.addControl(new ol.control.ZoomSlider());
//添加縮放到當前視圖滑動控件
map.addControl(new ol.control.ZoomToExtent());
//添加全屏控件
map.addControl(new ol.control.FullScreen());

效果：　　

參考自：https://blog.csdn.net/longshengguoji/article/details/46916327

https://blog.csdn.net/yangzhai/article/details/59476325