Как обернуть пользовательский интерфейс (контроль геолокации mapbox)

Question

Я хотел бы расширить / изменить элемент управления геолокации mapbox с помощью некоторых функций, например:

1. Я хотел бы лететь вместо прыжка в текущее местоположение
2. Я хотел бы добавить некоторое поведение (например, предотвратить перетаскивание), когда кнопка геоконтроля включена.

Как я могу это сделать? Я попытался сделать обертку, но потом у меня возникли некоторые проблемы:

• цвет кнопки должен стать синим при включении, но это больше не работает
• Я не знаю, как добавить функции для нажатия кнопки.

У меня есть скрипка, показывающая, как я пытался сделать обертку. Как видите, 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')

РЕДАКТИРОВАТЬ, обновить: у меня все еще есть проблемы со второй частью моего вопроса. Мне удалось заставить скрипку работать с "оберткой", хотя, посмотрите на это. Однако в моей "реальной" среде я получаю следующую ошибку при нажатии кнопки геоконтроля:

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

Я начну с вашей первой проблемы:

• цвет кнопки должен стать синим при включении, но это больше не работает

Цвет меняется, когда options.watchPosition установлен на true, и кнопка работает как кнопка переключения. В противном случае, нажатие кнопки просто обновляет ваше местоположение на карте, но ничего не переключает. Вы устанавливаете эту опцию, но ваш конструктор не передает объект опций своему родительскому классу. Так что либо опустите конструктор полностью, либо передайте параметры:

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

Теперь к вашему второму вопросу:

• Я не знаю, как добавить функции для нажатия кнопки. Я хотел бы добавить некоторое поведение (например, предотвратить перетаскивание), когда кнопка геоконтроля включена.

Переключение watchPosition сделано в _onClickGeolocate(), Добавление this._map.dragPan.disable() а также this._map.dragPan.enable() должно препятствовать / позволять пользователю перетаскивать карту. Но я сижу за своим компьютером и поэтому не проверял, соответствует ли карта вашему положению при ее изменении.