# Control
# 目前支持的控件
目前支持的控件有:
- 导航条控件
NavigationControl
- 比例尺控件
ScaleControl
- 全屏控件
FullscreenControl
- 鼠标位置控件
MousePositionControl
# 示例
#
// 比例尺控件
let scaleControl = scaleControl = new vjmap.ScaleControl();
map.addControl(scaleControl, "bottom-left");
// 导航条控件
let navigationControl = navigationControl = new vjmap.NavigationControl();
map.addControl(navigationControl, "top-right");
// 全屏控件
let fullScreenControl = new vjmap.FullscreenControl();
map.addControl(fullScreenControl, "bottom-right");
// 鼠标位置控件
let mousePositionControl = new vjmap.MousePositionControl();
map.addControl(mousePositionControl, "top-left");
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# 自定义控件
# 示例
// 自定义显示缩放级的控件
class CustomShowZoomControl {
constructor(options = {}) {
this.style = options.style || {};// 样式
}
_insertControl() {
this.container = document.createElement("div");
this.container.classList.add("vjmap-ctrl");
this.container.style.border = this.style.border || "1px";
this.container.style.backgroundColor = this.style.backgroundColor || "#A0CFFF";
this.panel = document.createElement("div");
this._zoomend();
this.container.appendChild(this.panel);
}
_zoomend() {
let strZoom = `当前级别: ${this.map.getZoom().toFixed(2)}`
this.panel.innerHTML = strZoom;
}
onAdd(map) {
this.map = map;
this._insertControl();
this.map.on("zoomend", this._zoomend.bind(this));
return this.container;
}
onRemove() {
this.map.off("zoomend", this._zoomend.bind(this));
this.container.parentNode.removeChild(this.container);
}
getDefaultPosition() {
return "bottom-left";
}
}
let control = new CustomShowZoomControl({style: {border : "1px"}})
map.addControl(control);
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
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