控制器管理

控制器是地图上的交互控件，用于辅助用户操作地图，如缩放、旋转、定位等。

addControl

添加控制器到地图。

/**
 * 添加控制器
 * @param {thmap.ControlTypes} type - 控制器类型
 * @param {thmap.ControlOptions} [options] - 控制器配置
 * @returns {ThMap} - 返回 this 以支持链式调用
 */
addControl(type, options)

参数说明

参数	类型	描述
type	string	控制器类型
options	thmap.ControlOptions	可选，控制器的配置选项

支持的控制器类型

类型	描述
scale	比例尺控制器，显示地图比例尺
compass	指南针控制器，显示和控制地图方向
attribution	归属控制器，显示地图数据归属信息
miniMap	小地图控制器，显示缩略图
fullscreen	全屏控制器，切换地图全屏显示
navigation	导航控制器，提供缩放和旋转控制
geolocate	定位控制器，获取用户当前位置

ControlOptions 详细配置

不同类型的控制器有不同的配置选项，以下是各种控制器的配置：

MiniMapOptions

选项	类型	默认值	必填	描述
layer	string		是	瓦片地址
width	string		是	控件的宽度(300px)
height	string		是	控件的高度(200px)
position	string		是	控件位置,'top-left','top-right','bottom-left','bottom-right'
bounds	string	'parent'	否	控件的显示边界,默认填parent
zoomLevels	number	4	否	鹰眼地图与当前地图的zoom差
lineColor	string	'#f17c67'	否	鹰眼控件边界范围的线颜色
lineWidth	number	2	否	鹰眼控件边界范围的线宽
lineOpacity	number	1	否	鹰眼控件边界范围的线透明度
fillColor	string	'#eb3f2f'	否	鹰眼控件边界范围的面颜色
fillOpacity	number	0.5	否	鹰眼控件边界范围的面透明度

ScaleOptions

选项	类型	默认值	必填	描述
position	string		否	控制器位置
unit	string	'metric'	否	单位，可选值：'metric' (米/公里), 'imperial' (英尺/英里)
maxWidth	number	100	否	比例尺最大宽度

NavigationOptions

选项	类型	默认值	必填	描述
position	string		否	控制器位置
showCompass	boolean	true	否	是否显示指南针
showZoom	boolean	true	否	是否显示缩放按钮

CompassOptions

选项	类型	默认值	必填	描述
position	string		否	控制器位置
rotateAble	boolean		否	是否可旋转
pitchAble	boolean		否	是否可俯仰
className	string		否	样式类名

GeolocateOptions

选项	类型	默认值	必填	描述
position	string		否	控制器位置
trackUserLocation	boolean	false	否	是否跟踪用户位置
showUserLocation	boolean	true	否	是否显示用户位置
fitBoundsOptions	object	{}	否	定位成功后调整地图视野的选项

FullscreenOptions

选项	类型	默认值	必填	描述
position	string		否	控制器位置

AttributionOptions

选项	类型	默认值	必填	描述
position	string		否	控制器位置

示例

// 添加导航控制器
map.addControl('navigation', {
  position: 'top-right',
  showCompass: true,
  showZoom: true
})

// 添加比例尺控制器
map.addControl('scale', {
  position: 'bottom-left',
  unit: 'metric',
  maxWidth: 150
})

// 添加定位控制器
map.addControl('geolocate', {
  position: 'top-left',
  trackUserLocation: true,
  fitBoundsOptions: {
    maxZoom: 16
  }
})

getControl

获取指定的控制器实例。

/**
 * 获取控制器
 * @param {thmap.ControlTypes} type - 控制器类型
 * @returns {thmap.Controls} - 控制器实例
 */
getControl(type)

参数说明

参数	类型	描述
type	string	控制器类型

示例

const navControl = map.getControl('navigation')
// 禁用指南针
navControl.options.showCompass = false

removeControl

移除控制器。

/**
 * 移除控制器
 * @param {thmap.ControlTypes} [type] - 控制器类型，不提供则移除所有控制器
 * @returns {ThMap} - 返回 this 以支持链式调用
 */
removeControl(type)

参数说明

参数	类型	描述
type	string	可选，控制器类型，不提供则移除所有控制器

示例

// 移除特定控制器
map.removeControl('navigation')

// 移除所有控制器
map.removeControl()

控制器操作示例

// 添加多个控制器
map
  .addControl('navigation', {
    position: 'top-right'
  })
  .addControl('scale', {
    position: 'bottom-left'
  })
  .addControl('compass', {
    position: 'top-left'
  })
  .addControl('fullscreen', {
    position: 'bottom-right'
  })

// 监听定位事件
const geolocateControl = map.getControl('geolocate')
geolocateControl.on('geolocate', (e) => {
  console.log('用户位置:', e.coords)
})

geolocateControl.on('error', (e) => {
  console.error('定位失败:', e.error)
})

常见问题

1. 控制器不显示：检查控制器类型是否正确，确保 position 参数设置合理。

2. 定位失败：确保浏览器有权限访问位置信息，检查网络连接。

3. 控制器样式问题：可以通过自定义 CSS 调整控制器的外观。

4. 多个控制器位置冲突：合理设置不同控制器的 position 参数，避免重叠。