---
title: 默认控件
date: 2020-10-29
author: ac
tags:
 - OpenLayers
categories: 
 - GIS
---

## 默认控件

为了方便用户操作地图，每个地图`API`都会提供一些封装好的开箱即用的控件。如导航、比例尺、鼠标位置等。控件是可见的小部件，使用DOM元素固定在屏幕上固定的位置。通常包含在class样式为`ol-overlaycontainer-stopevent`的DOM元素容器内。比起使用简单的DOM元素处理与用户的常用操作，封装成控件更容易处理事件冒泡的问题。

当我们加载一个地图的时候，没有指定`controls`控件参数，`ol`会帮我们默认加载三个控件：

- `ol.control.Zoom`：缩放控件
- `ol.control.Rotate`：旋转控件
- `ol.control.Attribution`：图层数据源属性控件

```javascript
var shenzhen = [113.958334, 22.535640];
var map = new ol.Map({
    view: new ol.View({
        center: ol.proj.fromLonLat(shenzhen),
        zoom: 8,
        rotation: Math.PI/6
    }),
    layers: [
        new ol.layer.Tile({
            source: new ol.source.OSM()
        })
    ],
    target: "map"
});
```

<img src="./images/image-20201110162204629.png" alt="image-20201110162204629" style="zoom: 80%;" />

> 在初始化view时，如果rotation没有被设置默认为0（指北），Rotate控件不会显示。可以按住Alt+Shift键旋转地图，就会显示Rotate控件。

在`control.js`中可以看到`ol`中的控件和配置默认控件的过程：

```javascript
/**
 * @module ol/control
 */
import Collection from './Collection.js';
import Attribution from './control/Attribution.js';
import Rotate from './control/Rotate.js';
import Zoom from './control/Zoom.js';

export {default as Attribution} from './control/Attribution.js';
export {default as Control} from './control/Control.js';
export {default as FullScreen} from './control/FullScreen.js';//全屏控件
export {default as MousePosition} from './control/MousePosition.js';//鼠标位置控件
export {default as OverviewMap} from './control/OverviewMap.js';//鹰眼控件
export {default as Rotate} from './control/Rotate.js';//旋转控件
export {default as ScaleLine} from './control/ScaleLine.js';//比例尺控件
export {default as Zoom} from './control/Zoom.js';//缩放控件
export {default as ZoomSlider} from './control/ZoomSlider.js';//缩放条控件
export {default as ZoomToExtent} from './control/ZoomToExtent.js';//复位（定位）控件

/**
 * @typedef {Object} DefaultsOptions
 * @property {boolean} [attribution=true] Include
 * {@link module:ol/control/Attribution~Attribution}.
 * @property {import("./control/Attribution.js").Options} [attributionOptions]
 * Options for {@link module:ol/control/Attribution~Attribution}.
 * @property {boolean} [rotate=true] Include
 * {@link module:ol/control/Rotate~Rotate}.
 * @property {import("./control/Rotate.js").Options} [rotateOptions] Options
 * for {@link module:ol/control/Rotate~Rotate}.
 * @property {boolean} [zoom] Include {@link module:ol/control/Zoom~Zoom}.
 * @property {import("./control/Zoom.js").Options} [zoomOptions] Options for
 * {@link module:ol/control/Zoom~Zoom}.
 * @api
 */


/**
 * Set of controls included in maps by default. Unless configured otherwise,
 * this returns a collection containing an instance of each of the following
 * controls:
 * * {@link module:ol/control/Zoom~Zoom}
 * * {@link module:ol/control/Rotate~Rotate}
 * * {@link module:ol/control/Attribution~Attribution}
 *
 * @param {DefaultsOptions=} opt_options
 * Defaults options.
 * @return {Collection<import("./control/Control.js").default>}
 * Controls.
 * @api
 */
export function defaults(opt_options) {

  const options = opt_options ? opt_options : {};

  const controls = new Collection();

  const zoomControl = options.zoom !== undefined ? options.zoom : true;
  if (zoomControl) {
    controls.push(new Zoom(options.zoomOptions));
  }

  const rotateControl = options.rotate !== undefined ? options.rotate : true;
  if (rotateControl) {
    controls.push(new Rotate(options.rotateOptions));
  }

  const attributionControl = options.attribution !== undefined ?
    options.attribution : true;
  if (attributionControl) {
    controls.push(new Attribution(options.attributionOptions));
  }

  return controls;
}

```