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

Question

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

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

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

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

我有一个 fiddle 展示了我是如何制作包装纸的。如您所见，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')

编辑，更新：我的问题的第 2 部分仍然有问题。我设法让 fiddle 和 'a wrapper' 一起工作，参见 this。但是在我的 'real-life' 环境中，单击地理控制按钮时出现以下错误：

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....')
            }
          }
        }
      }

Answer 1

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

the color of button should turn blue when toggled on but that does not work anymore

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

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

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

I do not know how to add features to the clicking of the button. I would like to add some behavior (e.g. prevent dragging) when the geocontrol button is toggled on.

watchPosition 的切换在 _onClickGeolocate() 中完成。添加 this._map.dragPan.disable() 和 this._map.dragPan.enable() 应该 prevent/allow 用户不会拖动地图。但是我坐在我的电脑前，所以我没有测试地图是否仍然跟随你的位置变化。

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

How to wrap a ui control (mapbox geolocation control)

javascript

ecmascript-6

mapbox-gl-js