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

最新推荐文章于 2025-05-24 21:43:17 发布

原创

最新推荐文章于 2025-05-24 21:43:17 发布 · 3.5k 阅读

12 ·

CC 4.0 BY-SA版权

本文介绍了OpenLayers 3中的地图控件，包括内置控件的使用、如何隐藏控件、修改控件样式以及如何创建自定义控件。通过示例展示了如何实现无控件地图、全控件地图，以及自定义输出当前地图功能的控件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在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({