OpenLayers 3 之地图控件（control）

程序员俊荣技术 2022年11月12日

0 收藏 601 点赞 4,053 浏览 1155 个字

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());