# Control

# 目前支持的控件

目前支持的控件有:

  • 导航条控件 NavigationControl
  • 比例尺控件 ScaleControl
  • 全屏控件 FullscreenControl
  • 鼠标位置控件 MousePositionControl
  • 小地图控件(鹰眼控件) MiniMapControl

# 示例



#

// 比例尺控件
let scaleControl =  new vjmap.ScaleControl();
map.addControl(scaleControl, "bottom-left");

// 导航条控件
let 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

// 小地图控件(鹰眼控件) map.addControl(new vjmap.MiniMapControl({ containerStyle: { background: "#31346a85", transform: "scale(0.6)", transformOrigin: "100% 0%" // 放置位置不同,transformOrigin也应相应的修改 //'top-right' //transformOrigin: "100% 0%" //'top-left' //transformOrigin: "0% 0%" //'bottom-right' //transformOrigin: "100% 100%" //'bottom-left' //transformOrigin: "0% 100%" } }), 'top-right');

### 自定义控件

#### 示例
```js
// 自定义显示缩放级的控件
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
40
41
42
43