Openlayers Custom Control: "Uncaught TypeError: setTarget is not a function"

Question

我目前正在使用 OpenLayers 库 (v4.6.4) 的 npm 版本绘制平面图，并为地图叠加层编写了一些自定义控件。

在意识到悬停在某些自定义控件上也会触发我为特定功能实现的 forEachFeatureAtPixel 悬停功能后，我决定将所有地图控件放置在地图外部的容器中，以防止悬停在覆盖元素在要素前面。

通过添加 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 example 上给出的示例相似。

并以我添加标准控件的相同方式将其添加到地图中：

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

我在 Internet 上或 Whosebug 上找不到处理类似问题的任何内容。你们有谁知道可能导致此错误的原因吗？

Answer 1

将对 ol.inherits 的调用移到 RotateLeft 函数之外：

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 的继承系统要求您在声明新的 class 时声明您的新控件从哪个 class 继承。正是这个 ol.inherits 调用将所有 Control 方法附加到您的 RotateLeft class 上，因为您在 RotateLeft 函数中执行此操作时，Control 方法 - 特别是 setTarget - 在 Control.Call 时不可用调用，并且 Control.Call 期望 setTarget 在此可用。

Openlayers Custom Control: "Uncaught TypeError: setTarget is not a function"

Openlayers Custom Control: "Uncaught TypeError: setTarget is not a function"

javascript

openlayers