# 常用控件
# 1. 初始化地图
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/ol.css" type="text/css">
<style>
.map {
height: 400px;
width: 100%;
}
</style>
<script src="lib/ol.js"></script>
<title>常用控件示例</title>
</head>
<body>
<h2>常用控件示例</h2>
<div id="mouse_position"></div>
<div id="map" class="map"></div>
<div id="scaleline" style="position: relative;height: 50px;"></div>
<script>
var shenzhen = [113.958334, 22.535640];
var map = new ol.Map({
view: new ol.View({
center: ol.proj.fromLonLat(shenzhen),
zoom: 10,
// rotation: Math.PI/6
}),
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
target: "map"
});
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
# 2. 缩放控件
ol.control.ZoomSlider用于控制地图的缩放级别。
var zoomslider = new ol.control.ZoomSlider();
map.addControl(zoomslider);
1
2
2
# 3. 复位（定位）控件
ol.control.ZoomToExtent用于将地图视图定位到指定区域，可以实现像书签、收藏等类似的功能。
//复位（定位）控件
var initExtent = map.getView().calculateExtent();
var zoomToExtent = new ol.control.ZoomToExtent({
extent: initExtent
});
map.addControl(zoomToExtent);//可以作为复位按钮
1
2
3
4
5
6
2
3
4
5
6
# 4. 鼠标位置控件
ol.control.MousePosition用于显示鼠标所在地图上的位置信息。
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);
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
# 5. 比例尺控件
//比例尺控件
var scaleLineControl = new ol.control.ScaleLine({
units: "metric",//设置比例尺单位,支持degrees/imperial/us/nautical/metric，默认:metric
target: "scaleline",//设置target，将控件渲染到地图视图外部,不指定默认在地图左下角
});
map.addControl(scaleLineControl);
1
2
3
4
5
6
2
3
4
5
6
当ScaleLine控件不指定target属性时默认在地图视图内部的左下角。
# 6.鹰眼控件
//鹰眼控件
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);
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
# 7. 全屏显示控件
//全屏显示控件
var fullSreen = new ol.control.FullScreen();
map.addControl(fullSreen);
1
2
3
2
3
控件的构造器中都提供了自定义样式的className属性，控件的位置由CSS样式决定。
# 完整代码
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/ol.css" type="text/css">
<style>
.map {
height: 400px;
width: 100%;
}
</style>
<script src="lib/ol.js"></script>
<title>常用控件示例</title>
</head>
<body>
<h2>常用控件示例</h2>
<div id="mouse_position"></div>
<div id="map" class="map"></div>
<div id="scaleline" style="position: relative;height: 50px;"></div>
<script>
var shenzhen = [113.958334, 22.535640];
var map = new ol.Map({
view: new ol.View({
center: ol.proj.fromLonLat(shenzhen),
zoom: 10,
// rotation: Math.PI/6
}),
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
target: "map"
});
map.on("click",function (e) {
var point = e.coordinate;
console.log("x:"+point[0]+",y:"+point[1]);
});
//导航控件
var zoomslider = new ol.control.ZoomSlider();
map.addControl(zoomslider);
//复位（定位）控件
var initExtent = map.getView().calculateExtent();
var zoomToExtent = new ol.control.ZoomToExtent({
extent: initExtent
});
map.addControl(zoomToExtent);//可以作为复位按钮
//鼠标位置控件
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);
//比例尺控件
var scaleLineControl = new ol.control.ScaleLine({
units: "metric",//设置比例尺单位,支持degrees/imperial/us/nautical/metric，默认:metric
target: "scaleline",//设置target，将控件渲染到地图视图外部,不指定默认在地图左下角
});
map.addControl(scaleLineControl);
//鹰眼控件
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);
//全屏显示控件
var fullSreen = new ol.control.FullScreen();
map.addControl(fullSreen);
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85