Mars3D基础学习：地图控件

1. Cesium原生控件

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

//方式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定义的控件
    defaultContextMenu: true, //右键菜单
    mouseDownView: true,
    compass: { top: '10px', right: '5px' },
    distanceLegend: { left: '100px', bottom: '2px' },
  },
})

#2. 平台内置控件

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

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

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

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

//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添加到地图上。

let _alllayers = this.map.getTileLayers()//获取所有瓦片图层
//创建分屏对比控件。
var mapSplit = new mars3d.control.MapSplit({
  rightLayer: _alllayers[0],
  leftLayer: _alllayers[1],
})
map.addControl(mapSplit)

#3.1 控件清单

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

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

#3.2 运行效果