Miage

外观

地图控件

约 931 字大约 3 分钟

2025-02-13

地图控件是指一些 DOM 面板或按钮，并与地图有所交互的对象，目前主要是 mirage2d 编写的控件。

平台内置控件

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

名称说明备注示例
Popup鼠标单击后显示的气泡窗继承自 DivGraphic 对象查看示例
Tooltip鼠标移入后显示的气泡窗继承自 DivGraphic 对象查看示例
ContextMenu右键菜单查看示例

2.1.在 map 地图对象上操作

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

//Popup相关
map.openPopup(content, latlng, options); //打开Popup弹窗
map.closePopup(); //关闭弹窗

//Tooltip相关
map.openTooltip(content, latlng, options); //打开Tooltip弹窗
map.closeTooltip(); //关闭Tooltip弹窗

 

//右键菜单相关
map.bindContextMenu(mapContextmenuItems); //绑定地图的默认右键菜单
map.unbindContextMenu(); //解除绑定的右键菜单

2.2.在 layer 图层对象上操作

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

//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(); //解除绑定的右键菜单

2.3. 在 graphic 矢量数据对象上操作

graphic 矢量数据对象上可以操作的常用方法有：

//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(); //解除绑定的右键菜单

3. 平台控件

平台的所有控件类都继承于mirage.Control 类，控件类均在mirage2d.control.*命名空间下面。 下面我们演示创建一个控件对象 ，并调用 map.addControl 添加到地图上。


  // 分屏对比
  const gaodeLayer = new mirage2d.Layer.TileXyzLayer("Layer001", {
    url: "http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}",
    chinaCRS: "GCJ02"
  })
  map.addLayer(gaodeLayer)


  // 卷帘控件 baselayer 就是默认的底图
  map.controls.swipe.show("baselayer", "Layer001")

3.1 控件清单

名称说明备注示例
swipe卷帘控件，双图对比查看示例
locationbar底部状态栏查看示例
overviewMap鹰眼图查看示例
baseLayerSwitch底图切换查看示例

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

3.2 运行效果