地图控件

1203字约4分钟

2025-3-25

本页目标

了解平台内置控件与 Leaflet 原生控件，以及如何在 map / layer / graphic 上操作。

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

1. Leaflet原生控件

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

// 方式1：在创建地图前的传参中配置control参数
const map = new mars2d.Map('mars2dContainer', {
  control: {
    // 以下是Leaflet所支持的控件相关的options
    scale: true,
    zoom: { latlng: "bottomright" },
    layers: { latlng: "topleft" },

    // 以下是mars2d.control定义的控件
    defaultContextMenu: true, // 右键菜单
    locationBar: {
      crs: "CGCS2000_GK_Zone_3",
      template: "<div>经度:{lng}</div> <div>纬度:{lat}</div> <div>横{crsx}  纵{crsy}</div> <div>层级:{level}</div>",
    },
    toolBar: { latlng: "bottomright" },
  },
})

2. 平台内置控件

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

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

2.1.在map地图对象上操作

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

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

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

// SmallTooltip相关
map.openSmallTooltip(latlng, message) // 显示小提示窗，一般用于鼠标操作的提示。
map.closeSmallTooltip()// 关闭小提示窗

// 右键菜单相关
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. 平台控件

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

const slider = new mars2d.control.Slider({
  position: "topleft",
  countryLevel: 4,
  provinceLevel: 7,
  cityLevel: 10,
  streetLevel: 14,
});
map.addControl(slider);

3.1 控件清单

类名	说明	示例
mars2d.control.LocationBar	鼠标经纬度等信息状态栏	查看示例
mars2d.control.Slider	鱼骨导航栏	查看示例
mars2d.control.OverviewMap	鹰眼地图控件	查看示例

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

3.2 运行效果

新窗口查看