50 lines
1016 B
Markdown
50 lines
1016 B
Markdown
|
---
|
||
|
|
title: 添加控件
|
||
|
|
date: 2020-10-29
|
||
|
|
author: ac
|
||
|
|
tags:
|
||
|
|
- OpenLayers
|
||
|
|
categories:
|
||
|
|
- GIS
|
||
|
|
---
|
||
|
|
|
||
|
|
## 添加控件
|
||
|
|
|
||
|
|
添加控件的方式：
|
||
|
|
|
||
|
|
1. 初始化`map`对象时配置控件数组。但这样就会替换掉默认的控件，只显示配置的控件数组中的控件。
|
||
|
|
2. 在`map`初始化完后调用其`addControl`方法添加。
|
||
|
|
|
||
|
|
```javascript
|
||
|
|
//比例尺控件
|
||
|
|
var scaleLineControl = new ol.control.ScaleLine({
|
||
|
|
units: "metric"
|
||
|
|
});
|
||
|
|
//全屏显示控件
|
||
|
|
var fullSreen = new ol.control.FullScreen();
|
||
|
|
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",
|
||
|
|
//方式一
|
||
|
|
controls:[fullSreen]
|
||
|
|
});
|
||
|
|
//方式二
|
||
|
|
map.addControl(scaleLineControl);
|
||
|
|
```
|
||
|
|
|
||
|
|
<img src="./images/image-20201110170320881.png" alt="image-20201110170320881" style="zoom: 67%;" />
|
||
|
|
|
||
|
|
|
||
|
|
|