星图时空

切换日光/暗黑模式

地图控件是指一些 DOM 面板或按钮，并与地图有所交互的对象，目前包含 2 大类，第一种是 Cesium 原生具备的控件，第 2 类是 Mars3D 编写的控件。

1. Cesium 原生控件 ​

目前主要使用场景是在创建地球前，你可以在配置项中通过control对控件中的功能组件进行相应的配置,支持的参数参考 control 参数说明 。此种方式支持 Cesium.Viewer 本身支持的一些 Cesium 原生控件的控制。 控件类型清单请访问ControlType

js
//方式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：在创建地球前的传参中配置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' }
  }
});

在地图初始化后，可以通过map.controls.**的方式来获取所有地图上已有的控件对象。

2. 平台内置控件 ​

目前平台内部已内置了一些常用控件，并在 Map、图层、矢量数据 3 类不同层次的对象中去使用， 目前支持的内置控件包括：

名称说明备注示例
Popup鼠标单击后显示的气泡窗继承自 DivGraphic 对象查看示例
Tooltip鼠标移入后显示的气泡窗继承自 DivGraphic 对象查看示例
SmallTooltip简易小气泡窗，一般用于鼠标操作的提示比如标绘中的提示查看示例
ContextMenu右键菜单查看示例
KeyboardRoam键盘漫游控制器查看示例

2.1.在 map 地图对象上操作 ​

map 地图对象上可以操作的常用方法有：

js
//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(); //关闭右键菜单
//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(); //关闭右键菜单

2.2.在 layer 图层对象上操作 ​

layer 图层对象上可以操作的常用方法有：

js
//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(); //关闭右键菜单
//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 矢量数据对象上可以操作的常用方法有：

js
//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(); //关闭右键菜单
//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 添加到地图上。

js
// 构造鹰眼地图
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);
// 构造鹰眼地图
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 控件清单 ​

类名说明示例
mars3d.control.Compass导航球控件查看示例
mars3d.control.DistanceLegend比例尺控件查看示例
mars3d.control.LocationBar鼠标经纬度等信息状态栏查看示例
mars3d.control.MouseDownView鼠标旋转、放大时的按键效果美化图标查看示例
mars3d.control.ToolButton工具栏 单个按钮控件查看示例
mars3d.control.Zoom工具栏 放大缩小按钮控件查看示例
mars3d.control.OverviewMap鹰眼地图 控件查看示例

注：本教程中所列清单可能不全，具体已功能示例和 API 为准。