Openlayers自定義控件：“未捕獲的TypeError：setTarget不是函數”

Question

我目前正在使用OpenLayers庫的npm版本（v4.6.4）進行平面布置，並為地圖疊加層編寫了一些自定義控件。

在意識到將鼠標懸停在某些自定義控件上還會觸發為特定功能實現的forEachFeatureAtPixel懸停功能后，我決定將所有地圖控件放置在地圖外部的容器中，以防止在元素前面的overlay元素時發生懸停觸發。

通過添加target參數，使用OpenLayers的基本控件可以正常工作。 但是，這似乎不適用於我的自定義控件。 使用目標參數調用自定義控件時，將引發以下錯誤：

Uncaught TypeError: this.setTarget is not a function at RotateLeft._ol_control_Control_ (control.js?8790:70)

ol/control/control.js提到的行如下所示：

if (options.target) {
  this.setTarget(options.target);
}

我認為control.js沒有錯誤，因為標准控件可以與setTarget函數一起正常工作。

這是我的自定義控件功能之一（它添加了一個用於逆時針旋轉視圖的按鈕）：

/**
 * Import OL classes
*/
@import ol from 'ol';
@import Control from 'ol/control/control';

/**
 * Import view variable from app
*/
@import {view} from '../../app';

/**
 * @constructor
 * @extends {ol.control.Control}
 * @param {Object=} opt_options Control options.
*/
export function RotateLeft(opt_options) {
  let options = opt_options ? opt_options : {};

  let rotateLeftButton = document.createElement('button');
  rotateLeftButton.setAttribute('title', 'rotate left');
  rotateLeftButton.innerHTML = '<i class="fas fa-undo"></i>';

  let handleRotateLeft = function() {
    view.animate({
      rotation: view.getRotation() + (-Math.PI / 2),
    });
  };

  rotateLeftButton.addEventListener('click', handleRotateLeft, {passive: true});
  rotateLeftButton.addEventListener('touchstart', handleRotateLeft, {passive: true});

  let element = document.createElement('div');
  element.className = 'ol-rotate-left ol-unselectable ol-control';
  element.appendChild(rotateLeftButton);

  Control.call(this, {
    element: element,
    target: options.target,
  });
  ol.inherits(RotateLeft, Control);
}

它看起來與OpenLayers示例中給出的示例相似。

並將其添加到地圖中的方式與添加標准控件的方式相同：

map.addControl(new RotateLeft({
  target: document.getElementById('control-rotation-left'),
});

我在互聯網上或在StackOverflow上找不到任何可解決類似問題的東西。 你們中的任何人不知道可能導致此錯誤的原因嗎？

Answer 1

將調用移至RotateLeft函數外部的ol.inherits：

export function RotateLeft(opt_options) {
  let options = opt_options ? opt_options : {};

  let rotateLeftButton = document.createElement('button');
  rotateLeftButton.setAttribute('title', 'rotate left');
  rotateLeftButton.innerHTML = '<i class="fas fa-undo"></i>';

  let handleRotateLeft = function() {
    view.animate({
      rotation: view.getRotation() + (-Math.PI / 2),
    });
  };

  rotateLeftButton.addEventListener('click', handleRotateLeft, {passive: true});
  rotateLeftButton.addEventListener('touchstart', handleRotateLeft, {passive: true});

  let element = document.createElement('div');
  element.className = 'ol-rotate-left ol-unselectable ol-control';
  element.appendChild(rotateLeftButton);

  Control.call(this, {
    element: element,
    target: options.target,
  });

}
ol.inherits(RotateLeft, Control);

OpenLayer的繼承系統要求您在聲明新類時聲明新控件從哪個類繼承。 正是這種ol.inherits調用將所有Control方法附加到RotateLeft類上，正如您在RotateLeft函數中所做的那樣，Control方法（特別是setTarget）在調用Control.Call時不可用，並且Control.Call期望setTarget在此可用。