如何包装 ui 控件（mapbox 地理定位控件）

我想扩展/更改具有某些功能的地图框地理定位控件，例如：

1. 我想飞到而不是跳到当前位置
2. 我想在打开地理控制按钮时添加一些行为（例如防止拖动）。

我怎么做？我尝试制作包装纸，但后来遇到了一些问题：

• 按钮的颜色在打开时应变为蓝色，但确实如此 不再工作了
• 我不知道如何为单击按钮添加功能。

我有一个fiddle https://jsbin.com/wesukut/edit?html,js,output展示我如何尝试制作包装纸。如您所见，flyTo 有效。

mapboxgl.accessToken = 'pk.eyJ1IjoidG1jdyIsImEiOiJIZmRUQjRBIn0.lRARalfaGHnPdRcc-7QZYQ'


var map = new mapboxgl.Map({
  container: 'map', // container id
  style: 'mapbox://styles/mapbox/streets-v9', //stylesheet location
  center: [-74.50, 40], // starting position
  zoom: 9 // starting zoom
})


class GeolocateControlWrapper extends mapboxgl.GeolocateControl {
  constructor() {
    super()
  }
  _onSuccess(position) {
    this._map.flyTo({
      center: [position.coords.longitude, position.coords.latitude],
      zoom: 17,
      bearing: 0,
      pitch: 0
    })

    this.fire('geolocate', position)
    this._finish()
  }
}

map.addControl(new GeolocateControlWrapper({
  positionOptions: {
    enableHighAccuracy: true,
    timeout: 300
  },
  watchPosition: true
}), 'top-left')

编辑、更新： 我对问题的第二部分仍然有疑问。我设法让“包装器”工作起来，看看this https://jsbin.com/matayut/edit?js,console,output。然而，在我的“现实生活”环境中，单击地理控制按钮时出现以下错误：

Uncaught TypeError: Cannot read property 'extend' of undefined
    at GeolocateControlWrapper._onClickGeolocate (eval at <anonymous> (0.b708727….js:485), <anonymous>:192:48)
_onClickGeolocate @ Maplayout.vue?f994:154
VM2654:1 Uncaught SyntaxError: Unexpected identifier

它引用了这一行：

mapboxgl.util.extend(defaultGeoPositionOptions, this.options && this.options.positionOptions || {})

知道为什么吗？

编辑、更新： 使用以下代码让它工作：

class GeolocateControlWrapper extends mapboxgl.GeolocateControl {
        _onSuccess (position) {
          this._map.flyTo({
            center: [position.coords.longitude, position.coords.latitude],
            zoom: 17,
            bearing: 0,
            pitch: 0
          })

          this.fire('geolocate', position)
          this._finish()
        }

        _setupUI (supported) {
          super._setupUI(supported)
          if (supported === false) return
          this._geolocateButton.className += ' needsclick'
        }

        _onClickGeolocate () {
          super._onClickGeolocate()
          // toggle watching the device location
          if (this.options.watchPosition) {
            if (this._geolocationWatchID !== undefined) { // clear watchPosition
              console.log('looks good in if....')
            }
            else {
              // enable watchPosition
              console.log('looks good in else....')
            }
          }
        }
      }

我从你的第一个问题开始：

• 按钮的颜色在打开时应变为蓝色，但事实并非如此 不再工作了

颜色发生变化时options.watchPosition设置为 true 并且该按钮用作切换按钮。否则，单击按钮只会更新您在地图上的位置，但不会切换任何内容。 您设置了该选项，但构造函数不会将选项对象传递给其父类。因此，要么完全省略构造函数，要么传递选项：

class GeolocateControlWrapper extends mapboxgl.GeolocateControl {
  constructor(options) {
    super(options)
  }

现在回答你的第二个问题：

• 我不知道如何为单击按钮添加功能。 我想在打开地理控制按钮时添加一些行为（例如防止拖动）。

切换watchPosition完成于_onClickGeolocate() https://github.com/mapbox/mapbox-gl-js/blob/b9e10b939c6a3fe5d7ecac209f751b4871970ede/src/ui/control/geolocate_control.js#L118。添加this._map.dragPan.disable() and this._map.dragPan.enable()应阻止/允许用户拖动地图。但我坐在电脑前，所以我没有测试地图在变化时是否仍然跟随你的位置。