地图控件是指一些DOM面板或按钮，并与地图有所交互的对象，目前包含2大类，第一种是Cesium原生具备的控件，第2类是Mars3D编写的控件。
# 1. Cesium原生控件
目前主要使用场景是在创建地球前，你可以在配置项中通过control对控件中的功能组件进行相应的配置,支持的参数参考 control参数说明 (opens new window) 。此种方式支持 Cesium.Viewer 本身支持的一些Cesium原生控件的控制。 控件类型清单请访问ControlType (opens new window)
//方式1：在创建地球前的传参中配置control参数
var map = new mars3d.Map('mars3dContainer', {
control: {
//以下是Cesium.Viewer所支持的控件相关的options
baseLayerPicker: true, //basemaps底图切换按钮，图层选择器，选择要显示的地图服务和地形服务
homeButton: true, //视角复位按钮
sceneModePicker: true, //二三维切换按钮， 选择投影模式,有三种：3D,2D,哥伦布视图
navigationHelpButton: true, //帮助按钮，显示默认的地图控制帮助
infoBox: true, //信息框
selectionIndicator: true, //选择框
vrButton: true, //vr模式按钮
fullscreenButton: true, //全屏按钮
animation: false, //动画部件按钮（左下角），控制视图动画的播放速度
timeline: false, //时间线（下侧）,指示当前时间，并允许用户跳到特定的时间
geocoder: true, //POI查询按钮
geocoderConfig: { key: ['ae29a37307840c7ae4a785ac905927e0'] }, //POI查询按钮参数配置
//以下是mars3d.control定义的控件
contextmenu: { hasDefault: true },
mouseDownView: true,
zoom: { insertIndex: 1 },
compass: { bottom: "toolbar", left: "5px" },
distanceLegend: { left: "100px", bottom: "2px" },
},
})
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
在地图初始化后，可以通过map.controls.**的方式来获取所有地图上已有的控件对象。
# 2. 平台内置控件
目前平台内部已内置了一些常用控件，并在Map、图层、矢量数据 3类不同层次的对象中去使用， 目前支持的内置控件包括：
| 名称 | 说明 | 备注 | 示例 |
|---|---|---|---|
| Popup | 鼠标单击后显示的气泡窗 | 继承自DivGraphic对象 | 查看示例 (opens new window) |
| Tooltip | 鼠标移入后显示的气泡窗 | 继承自DivGraphic对象 | 查看示例 (opens new window) |
| SmallTooltip | 简易小气泡窗，一般用于鼠标操作的提示 | 比如标绘中的提示 | 查看示例 (opens new window) |
| ContextMenu | 右键菜单 | 查看示例 (opens new window) | |
| KeyboardRoam | 键盘漫游控制器 | 查看示例 (opens new window) |
# 2.1.在map地图对象上操作
map地图 (opens new window)对象上可以操作的常用方法有：
//map.controls 控件对象操作
console.log("地图上已有控件", map.controls)
map.controls.locationBar.show = false //隐藏该控件
map.controls.timeline.zoomTo(startTime, stopTime) //时间线控件赋值
//Popup相关
map.openPopup(position, content, options) //打开Popup弹窗
map.closePopup()//关闭弹窗
//Tooltip相关
map.openTooltip(position, content, options) //打开Tooltip弹窗
map.closeTooltip()//关闭Tooltip弹窗
//SmallTooltip相关
map.openSmallTooltip(position, message) //显示小提示窗，一般用于鼠标操作的提示。
map.closeSmallTooltip()//关闭小提示窗
//右键菜单相关
map.getContextMenu() //获取绑定的右键菜单数组
map.bindContextMenu(mapContextmenuItems) //绑定地图的默认右键菜单
map.unbindContextMenu() //解除绑定的右键菜单
map.openContextMenu(position, content, options) //打开右键菜单
map.closeContextMenu() //关闭右键菜单
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
# 2.2.在layer图层对象上操作
layer图层 (opens new window)对象上可以操作的常用方法有：
//Popup相关
layer.hasPopup() //是否存在Popup绑定
layer.bindPopup(content, options) //绑定鼠标单击对象后的弹窗。
layer.unbindPopup() //解除绑定的鼠标单击对象后的弹窗。
layer.openPopup(graphic) //打开Popup弹窗
layer.closePopup()//关闭弹窗
//Tooltip相关
layer.hasTooltip() //是否存在Tooltip绑定
layer.bindTooltip(content, options) //绑定鼠标移入对象后的弹窗。
layer.unbindTooltip() //解除绑定的鼠标移入对象后的弹窗。
layer.openTooltip(graphic) //打开Tooltip弹窗
layer.closeTooltip()//关闭Tooltip弹窗
//SmallTooltip相关
layer.openSmallTooltip(position, message) //显示小提示窗，一般用于鼠标操作的提示。
layer.closeSmallTooltip()//关闭小提示窗
//右键菜单相关
layer.hasContextMenu() //是否有绑定的右键菜单
layer.getContextMenu() //获取绑定的右键菜单数组
layer.bindContextMenu(content, options) //绑定地图的默认右键菜单
layer.unbindContextMenu() //解除绑定的右键菜单
layer.openContextMenu(position, options) //打开右键菜单
layer.closeContextMenu() //关闭右键菜单
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
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
# 2.3. 在graphic矢量数据对象上操作
graphic矢量数据 (opens new window)对象上可以操作的常用方法有：
//Popup相关
graphic.hasPopup() //是否存在Popup绑定
graphic.bindPopup(content, options) //绑定鼠标单击对象后的弹窗。
graphic.unbindPopup() //解除绑定的鼠标单击对象后的弹窗。
graphic.openPopup(position) //打开Popup弹窗
graphic.closePopup()//关闭弹窗
//Tooltip相关
graphic.hasTooltip() //是否存在Tooltip绑定
graphic.bindTooltip(content, options) //绑定鼠标移入对象后的弹窗。
graphic.unbindTooltip() //解除绑定的鼠标移入对象后的弹窗。
graphic.openTooltip(position) //打开Tooltip弹窗
graphic.closeTooltip()//关闭Tooltip弹窗
//SmallTooltip相关
graphic.openSmallTooltip(position, message) //显示小提示窗，一般用于鼠标操作的提示。
graphic.closeSmallTooltip()//关闭小提示窗
//右键菜单相关
graphic.hasContextMenu() //是否有绑定的右键菜单
graphic.getContextMenu() //获取绑定的右键菜单数组
graphic.bindContextMenu(content, options) //绑定地图的默认右键菜单
graphic.unbindContextMenu() //解除绑定的右键菜单
graphic.openContextMenu(position, options) //打开右键菜单
graphic.closeContextMenu() //关闭右键菜单
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
# 3. 平台控件
平台的所有控件类都继承于BaseControl类 (opens new window) ，控件类均在mars3d.control.*命名空间下面。
下面我们演示创建一个控件对象 ，并调用map.addControl添加到地图上。
// 构造鹰眼地图
const overviewMap = new mars3d.control.OverviewMap({
basemap: {
name: "天地图电子",
type: "group",
layers: [
{ name: "底图", type: "tdt", layer: "vec_d" },
{ name: "注记", type: "tdt", layer: "vec_z" }
]
},
rectangle: {
color: "#fecd78",
opacity: 0.2,
outline: 1,
outlineColor: "#ff7800"
},
style: {
right: "5px",
top: "5px",
width: "200px",
height: "150px"
}
})
map.addControl(overviewMap)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
# 3.1 控件清单
注：本教程中所列清单可能不全，具体已功能示例和API为准。
# 3.2 运行效果
新窗口查看