外观
地图控件
1872字约6分钟
2024-11-14
地图控件是指一些DOM面板或按钮，并与地图有所交互的对象，目前包含2大类，第一种是Cesium原生具备的控件，第2类是Mars3D编写的控件。
1. Cesium原生控件
目前主要使用场景是在创建地球前，你可以在配置项中通过control对控件中的功能组件进行相应的配置,支持的参数参考 control参数说明 。此种方式支持 Cesium.Viewer 本身支持的一些Cesium原生控件的控制。 控件类型清单请访问ControlType
// 方式1：在创建地球前的传参中配置control参数
const 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" },
},
})在地图初始化后，可以通过map.control.**的方式来获取所有地图上已有的控件对象。
2. 平台内置控件
目前平台内部已内置了一些常用控件，并在Map、图层、矢量数据 3类不同层次的对象中去使用， 目前支持的内置控件包括：
| 名称 | 说明 | 备注 | 示例 |
|---|---|---|---|
| Popup | 鼠标单击后显示的气泡窗 | 继承自DivGraphic对象 | 查看示例 |
| Tooltip | 鼠标移入后显示的气泡窗 | 继承自DivGraphic对象 | 查看示例 |
| SmallTooltip | 简易小气泡窗，一般用于鼠标操作的提示 | 比如标绘中的提示 | 查看示例 |
| ContextMenu | 右键菜单 | 查看示例 | |
| KeyboardRoam | 键盘漫游控制器 | 查看示例 |
2.1.在map地图对象上操作
map地图对象上可以操作的常用方法有：
// map.controls 控件对象操作
console.log("地图上已有控件", map.controls)
map.control.locationBar.show = false // 隐藏该控件
map.control.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() // 关闭右键菜单2.2.在layer图层对象上操作
layer图层对象上可以操作的常用方法有：
// 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() // 关闭右键菜单2.3. 在graphic矢量数据对象上操作
graphic矢量数据对象上可以操作的常用方法有：
// 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() // 关闭右键菜单3. 平台控件
平台的所有控件类都继承于BaseControl类 ，控件类均在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)3.1 控件清单
注：本教程中所列清单可能不全，具体以功能示例和API为准。
3.2 运行效果
新窗口查看