如何包装ui控件(地图框地理位置控件) [英] How to wrap a ui control (mapbox geolocation control)

问题描述

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

I would like to extend/ alter a mapbox geolocation control with some features, e.g.:

1. 我想用flyTo而不是jumpTo到当前位置
2. 我想在启用geocontrol按钮时添加一些行为(例如，防止拖动).

我该怎么做?我尝试制作一个包装纸，但随后出现了一些问题:

How do I do that? I tried making a wrapper but then I get some problems:

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

我有一个小提琴，它显示了我如何制作包装纸.如您所见，flyTo有效.

I have a fiddle showing how I tried to make a wrapper. As you can see the flyTo works.

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按钮时出现以下错误:

EDIT, update: I am still having trouble with part 2 of my question. I managed to get the fiddle with 'a wrapper' working though, see this. However in my 'real-life' environment I get following error when clicking the geocontrol button:

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 || {})

知道为什么吗?

编辑，更新:使用以下代码使其正常工作:

EDIT, update: Got it working using following code:

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

推荐答案

我从您的第一个问题开始:

I start with your first problem:

• 打开按钮时，按钮的颜色应变为蓝色，但不能工作了

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

The color changes when options.watchPosition is set to true and the button works as a toggle button. Otherwise, a button click just updates your location on the map, but is not toggling anything. You set that option, but your constructor does not pass the options object up to its parent class. So either omit the constructor completly or do pass the options:

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

现在是您的第二个问题:

Now to your second question:

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

watchPosition 的切换在

Toggling of watchPosition is done in _onClickGeolocate(). Adding this._map.dragPan.disable() and this._map.dragPan.enable() should prevent/allow the user from dragging the map. But I sit at my computer and so I didn't test if the map still follows your position as it changes.

这篇关于如何包装ui控件(地图框地理位置控件)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！