--- title: 地图控件 source: https://vjmap.com/guide/control.html --- # 地图控件 ### 目前支持的控件 目前支持的控件有: - 导航条控件 `NavigationControl` - 比例尺控件 `ScaleControl` - 全屏控件 `FullscreenControl` - 鼠标位置控件 `MousePositionControl` - 小地图控件(鹰眼控件) `MiniMapControl` - 按钮组控件 `ButtonGroupControl` ### 示例 
let svc = new vjmap.Service(env.serviceUrl, env.accessToken)
// 打开地图
let res = await svc.openMap({
    mapid: env.exampleMapId, // 地图ID
    // @ts-ignore
    mapopenway: vjmap.MapOpenWay.GeomRender, // 以几何数据渲染方式打开
    style: vjmap.openMapLightStyle() // div为深色背景颜色时，这里也传深色背景样式
})
if (res.error) {
    // 如果打开出错
    showError(res.error)
    return;
}
// 获取地图范围
let mapBounds = vjmap.GeoBounds.fromString(res.bounds);
// 根据地图范围建立几何投影坐标系
let prj = new vjmap.GeoProjection(mapBounds);
//
// 地图对象
let map = new vjmap.Map({
    container: 'map', // DIV容器ID
    style: svc.rasterStyle(), // 样式，这里是栅格样式
    center: prj.toLngLat(mapBounds.center()), // 设置地图中心点
    zoom: 2, // 设置地图缩放级别
    pitch: 45,
    antialias: true, // 反锯齿
    renderWorldCopies: false // 不显示多屏地图
});
//
// 关联服务对象和投影对象
map.attach(svc, prj);
await map.onLoad();
// 比例尺控件
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");
map.addControl(new vjmap.MiniMapControl({
    containerStyle: {
    background: "#31346a85",
    transform: "scale(0.6)",
    transformOrigin: "0% 100%"
    // 放置位置不同，transformOrigin也应相应的修改
    //'top-right'
    //transformOrigin: "100% 0%"
    //'top-left'
    //transformOrigin: "0% 0%"
    //'bottom-right'
    //transformOrigin: "100% 100%"
    //'bottom-left'
    //transformOrigin: "0% 100%"
    }
}), 'bottom-left');


#### ```js // 比例尺控件 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"); ``` ### 小地图控件(鹰眼控件) ```js 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'); ``` ### 按钮组控件 
// --按钮组控件--
// 地图服务对象
let svc = new vjmap.Service(env.serviceUrl, env.accessToken)
// 打开地图
let res = await svc.openMap({
    mapid: env.exampleMapId, // 地图ID
    mapopenway: vjmap.MapOpenWay.GeomRender, // 以几何数据渲染方式打开
    style: vjmap.openMapDarkStyle() // div为深色背景颜色时，这里也传深色背景样式
})
if (res.error) {
    // 如果打开出错
    message.error(res.error)
}
// 获取地图范围
let mapExtent = vjmap.GeoBounds.fromString(res.bounds);
// 根据地图范围建立几何投影坐标系
let prj = new vjmap.GeoProjection(mapExtent);
// 地图对象
let map = new vjmap.Map({
    container: 'map', // DIV容器ID
    style: svc.rasterStyle(), // 样式，这里是栅格样式
    center: prj.toLngLat(mapExtent.center()), // 设置地图中心点
    zoom: 2, // 设置地图缩放级别
    pitch: 0, // 倾斜角度
    renderWorldCopies: false // 不显示多屏地图
});
// 关联服务对象和投影对象
map.attach(svc, prj);
// 根据地图本身范围缩放地图至全图显示
//map.fitMapBounds();
await map.onLoad();
const mapBounds = map.getGeoBounds(0.6);
let options = {};
options.buttons = [
    {
        id: "zoomFit",
        title: "全图显示",
        style: {
            "background-image": `url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAALNJREFUWEftltENgCAMRGEwJtBRdAZ1Bh1FJ2AwTIwkBqw56EcxKd+lHK9Ne9YIHyv8vlEBGQE/HBNVFrd1C1Kykhy5gHEPpIC1h0rmC3LQAoKdUyEsAjZc+VzyCVJAGoig/4qJVH4g4G5CFDdKJjZmmhdqKvSRmjgVoASUgBJQAu0RoJZGzZx/3oGXEbW32QJul/QDPxD9nLQle0OO2jSeKZW25dxmK73f3hwo/QE3XpzACTqIZiEG/iYrAAAAAElFTkSuQmCC')`,
            "background-size": "80% 80%"
        },
        onActivate: (ctx) => {
            map.fitMapBounds();
        }
    },
    {
        id: "zoomFit",
        title: "允许地图右键旋转",
        style: {
            "background-image": `url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAllJREFUWEfFl1FOwzAMhu1wAcR4ZwwOwk4CuwWqkMYkVLgF4ySUe8Ao7xRxgDVB7prKCW6Sdkj0sW3qL/bv3ynCP1/4z/FhNMDx+c0Fh99ut+V3+VAO3dAggMlZdgUGlgAwFQMZUxjEQmv9lAqTBBANLG97XWu9ioEEAQ6n19MDpd6F768NQIkIH/TMGDhBYy4AkTLDs1OiUovP17uirzQOAAW0xELwEhBW1Vu+DtVZzBbCom9dB0CiMnW9rI1ZUABv5+tqkzf3U6/JLHsEgCv7fq31qVQOJwOTWUbpdgRmAG6/NvkqNTB/72iWLRHgtr1X1lrPfQgfwKEGY4rq/X4+JrhdwyGkzbgAuzYjCH4lqTmoC5ZZvxQOQKMDrZ99AFTqKaTkWIZCWfjVhq0OCkB4iSk+Fpg/7/TllTXJiKRA1KZKqUsEmKYYDu8KXoZRAJJHxAznTwH8Hm/cMNKurUE1Akel5lZTozLg9betUNCs+Jq9AaQZwT8qaWYQALVjrO1aiCUNpZTxy8tWbfIu804JWkryb1K26N1DWs9rQ2Mtudrkp/aZBLDz7sAEGwrBBeiL9dc4PlCKnJAGkjg8hgan9yezzO4eePp3+/Su2PAYCsBrHx1G9uN8LMf6OwTkj2Nee1ED9mY7lMg0mrMBQaQo3ROdM9r72rTXiHhHWPXSkayudRE6aEpHspBHBJ3Qz0S3w/b47RxKd9nqjmAWOjYjkqy4FRL9iMj/A7IQks6RSQD0fTZ+G6PqFR/CIlYmvjYZwA/If83G/paJPjC0z/d9f3QG9g1s1/8ATi1yMPW6z1YAAAAASUVORK5CYII=')`,
            "background-size": "80% 80%"
        },
        isCheckbox: true,
        checked: true,
        onActivate: (ctx, e) => {
            e.target.checked ? map.dragRotate.enable() : map.dragRotate.disable();
        }
    },
    {
        id: "pos",
        title: "定位到一个位置",
        text: "定位",
        onActivate: (ctx, e) => {
            map.flyTo({
                center: [10, 20],
                pitch: 30,
                zoom: 6,
                speed: 0.2,
                easing(t) {
                    return t;
                }
            });;
        }
    }
];
let btnGroupCtrl = new vjmap.ButtonGroupControl(options);
map.addControl(btnGroupCtrl, '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); ```