控件

控件（Control）是用于控制地图的交互式组件。

定位

GeolocateControl 提供一个按钮，该按钮使用浏览器的 Geolocation API 在地图上定位用户。

map.addControl(new maplibregl.GeolocateControl())

全屏

FullscreenControl 可以切换地图的全屏模式。

map.addControl(new maplibregl.FullscreenControl())

导航

NavigationControl 包含放大、缩小、方位和旋转。

map.addControl(new maplibregl.NavigationControl({ visualizePitch: true }))

比例尺

ScaleControl 显示地图上的距离与地面上相应距离的比率。

map.addControl(new maplibregl.ScaleControl())

自定义

MapLibre GL JS 提供了 IControl 接口。自定义控件必须实现 onAdd 和 onRemove 方法，并且有一个 HTML 元素。如果要使用默认控件样式，需要给元素添加 maplibregl-ctrl 样式。

官方示例

class HelloWorldControl: IControl {
  onAdd(map) {
    this._map = map
    this._container = document.createElement('div')
    this._container.className = 'maplibregl-ctrl'
    this._container.textContent = 'Hello, world'
    return this._container
  }

  onRemove() {
    this._container.parentNode.removeChild(this._container)
    this._map = undefined
  }
}