---
title: 常用控件
date: 2020-10-29
author: ac
tags:
- OpenLayers
categories:
- GIS
---
## 常用控件
### 1. 初始化地图
```html
常用控件示例
常用控件示例
```
### 2. 缩放控件
`ol.control.ZoomSlider`用于控制地图的缩放级别。
```javascript
var zoomslider = new ol.control.ZoomSlider();
map.addControl(zoomslider);
```
### 3. 复位（定位）控件
`ol.control.ZoomToExtent`用于将地图视图定位到指定区域，可以实现像书签、收藏等类似的功能。
```javascript
//复位（定位）控件
var initExtent = map.getView().calculateExtent();
var zoomToExtent = new ol.control.ZoomToExtent({
extent: initExtent
});
map.addControl(zoomToExtent);//可以作为复位按钮
```
### 4. 鼠标位置控件
`ol.control.MousePosition`用于显示鼠标所在地图上的位置信息。
```javascript
var mouseControl = new ol.control.MousePosition({
coordinateFormat: ol.coordinate.createStringXY(4) //坐标格式
, projection: 'EPSG:3857' //投影坐标系
, className: 'custom-mouse' //自定义的坐标信息显示样式
, target: document.getElementById("mouse_position") //需要dom对象
, undefinedHTML: ' ' //定义未定义坐标的标记
});
map.addControl(mouseControl);
```
### 5. 比例尺控件
```javascript
//比例尺控件
var scaleLineControl = new ol.control.ScaleLine({
units: "metric",//设置比例尺单位,支持degrees/imperial/us/nautical/metric，默认:metric
target: "scaleline",//设置target，将控件渲染到地图视图外部,不指定默认在地图左下角
});
map.addControl(scaleLineControl);
```
当`ScaleLine`控件不指定`target`属性时默认在地图视图内部的左下角。
### 6.鹰眼控件
```javascript
//鹰眼控件
var overviewControl = new ol.control.OverviewMap({
layers: [ // 在鹰眼中加载相同坐标系下不同数据源的图层
new ol.layer.Tile({
source: new ol.source.OSM()
})
]
,collapseLabel: "\u00BB" //展开时功能按钮上的标识
,label: "\u00AB" //折叠时功能按钮上的标识
,collapsed: false //初始状态是否展开
});
map.addControl(overviewControl);
```
### 7. 全屏显示控件
```javascript
//全屏显示控件
var fullSreen = new ol.control.FullScreen();
map.addControl(fullSreen);
```
控件的构造器中都提供了自定义样式的`className`属性，控件的位置由`CSS`样式决定。
### 完整代码
```html
常用控件示例
常用控件示例
```