OpenLayers学习笔记高级篇（二、地图控件）

关注

原创最新推荐文章于 2026-06-30 13:47:26 发布 3.7k 阅读 AI 写同款· GEO 优化 ›

在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，来看一下效果：