地图控件是指一些DOM面板或按钮，并与地图有所交互的对象，目前包含2大类，第一种是Leaflet原生具备的控件，第2类是Mars2D编写的控件。
# 1. Leaflet原生控件
目前主要使用场景是在创建地图前，你可以在配置项中通过control对控件中的功能组件进行相应的配置,支持的参数参考 control参数说明 (opens new window) 。此种方式支持 Leaflet.Viewer 本身支持的一些Leaflet原生控件的控制。
//方式1：在创建地图前的传参中配置control参数
var map = new mars2d.Map('mars2dContainer', {
control: {
//以下是Leaflet所支持的控件相关的options
scale: true,
zoom: { latlng: "bottomright" },
layers: { latlng: "topleft" },
//以下是mars2d.control定义的控件
defaultContextMenu: true, //右键菜单
locationBar: {
crs: "CGCS2000_GK_Zone_3",
template: "<div>经度:{lng}</div> <div>纬度:{lat}</div> <div>横{crsx} 纵{crsy}</div> <div>层级:{level}</div>",
},
toolBar: { latlng: "bottomright" },
},
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# 2. 平台内置控件
目前平台内部已内置了一些常用控件，并在Map、图层、矢量数据 3类不同层次的对象中去使用， 目前支持的内置控件包括：
| 名称 | 说明 | 备注 | 示例 |
|---|---|---|---|
| Popup | 鼠标单击后显示的气泡窗 | 继承自DivGraphic对象 | 查看示例 (opens new window) |
| Tooltip | 鼠标移入后显示的气泡窗 | 继承自DivGraphic对象 | 查看示例 (opens new window) |
| ContextMenu | 右键菜单 | 查看示例 (opens new window) | |
| SmallTooltip | 简易小气泡窗，一般用于鼠标操作的提示 | 比如标绘中的提示 | 查看示例 (opens new window) |
# 2.1.在map地图对象上操作
map地图 (opens new window)对象上可以操作的常用方法有：
//Popup相关
map.openPopup(content, latlng, options) //打开Popup弹窗
map.closePopup()//关闭弹窗
//Tooltip相关
map.openTooltip(content, latlng, options) //打开Tooltip弹窗
map.closeTooltip()//关闭Tooltip弹窗
//SmallTooltip相关
map.openSmallTooltip(latlng, message) //显示小提示窗，一般用于鼠标操作的提示。
map.closeSmallTooltip()//关闭小提示窗
//右键菜单相关
map.bindContextMenu(mapContextmenuItems) //绑定地图的默认右键菜单
map.unbindContextMenu() //解除绑定的右键菜单
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# 2.2.在layer图层对象上操作
layer图层 (opens new window)对象上可以操作的常用方法有：
//Popup相关
layer.getPopup() //获取Popup绑定
layer.bindPopup(content, options) //绑定鼠标单击对象后的弹窗。
layer.unbindPopup() //解除绑定的鼠标单击对象后的弹窗。
layer.openPopup(latlng) //打开Popup弹窗
layer.closePopup()//关闭弹窗
//Tooltip相关
layer.getTooltip() //获取Tooltip绑定
layer.bindTooltip(content, options) //绑定鼠标移入对象后的弹窗。
layer.unbindTooltip() //解除绑定的鼠标移入对象后的弹窗。
layer.openTooltip(latlng) //打开Tooltip弹窗
layer.closeTooltip()//关闭Tooltip弹窗
//右键菜单相关
layer.getContextMenu() //获取绑定的右键菜单数组
layer.bindContextMenu(content) //绑定地图的默认右键菜单
layer.unbindContextMenu() //解除绑定的右键菜单
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# 2.3. 在graphic矢量数据对象上操作
graphic矢量数据 (opens new window)对象上可以操作的常用方法有：
//Popup相关
graphic.getPopup() //获取Popup绑定
graphic.isPopupOpen() //是否打开了Popup
graphic.bindPopup(content, options) //绑定鼠标单击对象后的弹窗。
graphic.unbindPopup() //解除绑定的鼠标单击对象后的弹窗。
graphic.openPopup(latlng) //打开Popup弹窗
graphic.closePopup()//关闭弹窗
//Tooltip相关
graphic.getTooltip() //获取Tooltip绑定
graphic.isTooltipOpen() //是否打开了Tooltip
graphic.bindTooltip(content, options) //绑定鼠标移入对象后的弹窗。
graphic.unbindTooltip() //解除绑定的鼠标移入对象后的弹窗。
graphic.openTooltip(latlng) //打开Tooltip弹窗
graphic.closeTooltip()//关闭Tooltip弹窗
//右键菜单相关
graphic.getContextMenu() //获取绑定的右键菜单数组
graphic.bindContextMenu(content, options) //绑定地图的默认右键菜单
graphic.unbindContextMenu() //解除绑定的右键菜单
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# 3. 平台控件
平台的所有控件类都继承于L.Control类 (opens new window) ，控件类均在mars2d.control.*命名空间下面。
下面我们演示创建一个控件对象 ，并调用map.addControl添加到地图上。
let slider = new mars2d.control.Slider({
position: "topleft",
countryLevel: 4,
provinceLevel: 7,
cityLevel: 10,
streetLevel: 14,
});
map.addControl(slider);
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
# 3.1 控件清单
注：本教程中所列清单可能不全，具体已功能示例和API为准。
# 3.2 运行效果
新窗口查看