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

我想使用一些功能扩展/更改mapbox地理位置控件，例如：

我想飞到而不是跳到当前位置

我想在打开geocontrol按钮时添加一些行为（例如，防止拖动）

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

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

我展示了我是如何制作包装纸的。正如你所看到的，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')

编辑、更新： 我的问题的第二部分仍然有问题。不过，我还是设法让“包装器”起作用了，看吧。但是，在我的“真实”环境中，单击geocontrol按钮时，我会出现以下错误：

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

知道为什么吗

编辑、更新： 使用以下代码使其正常工作：

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时，颜色会发生变化，该按钮可用作切换按钮。否则，单击按钮只会更新您在地图上的位置，但不会进行任何切换。 您设置了该选项，但构造函数不会将options对象传递给其父类。因此，要么完全忽略构造函数，要么传递选项：

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

现在谈谈你的第二个问题：

• 我不知道如何添加功能，以点击按钮。 我想在打开geocontrol按钮时添加一些行为（例如，防止拖动）

---

切换

watchPosition

是在中完成的。添加

this.\u map.dragPan.disable（）

和

this.\u map.dragPan.enable（）

应防止/允许用户拖动地图。但是我坐在电脑前，所以我没有测试地图在变化时是否仍然跟随你的位置。

关于第二个问题的答案；所以我将_onClickGeologice方法完全添加到我的包装器中，然后将this._map.dragPan.disable（）添加到其中，对吗？当方法使用其他mapbox模块时，如何引用它扩展模块：

const positionOptions=util.extend（defaultGeoPositionOptions，this.options&&this.options.positionOptions | |{}）

我尝试使用

let mapboxUtil=require（'../../../node\u modules/mapbox gl/js/util'）添加util模块

但是我得到了

/~/mapbox gl/js/util/util.js模块解析失败：/home/usr/t1/node_modules/mapbox gl/js/util/util.js意外标记（15:35）。您可能需要一个合适的加载程序来处理此文件类型。|*@private |*/| exports.easeCubicInOut=function（t:number）：number{if（t=1）返回1；@/~/babel-loader/lib！/~/vue-loader/lib/selector.js？

@musicformellons:Try

const-util=require（'mapbox-gl/js/util/util'）；/code>我不知道你的设置。但是我可以告诉你我可以运行
util.clamp（）
通过browserify导入
util
之后。顺便说一句，我回答了你的第一个问题了吗？是的，第一个问题已经回答了。
class GeolocateControlWrapper extends mapboxgl.GeolocateControl {
  constructor(options) {
    super(options)
  }