Question

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

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

通过添加target参数，使用OpenLayers的基本控件可以正常工作。但是，这似乎不适用于我的自定义控件。使用target参数调用自定义控件时，会引发以下错误：

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'),
});

我在互联网上找不到任何东西，或者在StackOverflow上找不到任何处理类似问题的东西。你们中有谁知道可能导致这个错误的原因吗？

Answer 1

将调用移至RotateLeft函数外的ol.inherits：

  public long getZipEntryOffset() {
       String path = ota.zip;
       final String loadString = "load.bin";
       long offset = 0;
       File zipFile = new File(path);
       ZipInputStream zis = new ZipInputStream(new FileInputStream(path));

      try { 

        ZipEntry loadEntry = zisp.getNextEntry();
        while( loadEntry != null){
        long fileSize = 0;
        long extra = loadEntry.getExtra() == null ? 0 : loadEntry.getExtra().length;
        String fileName = loadEntry.getName();
        Offset += 30 + loadEntry.getName().length() + extra;
        if(!loadEntry.isDirectory()){
                fileSize = loadEntry.getCompressedSize();
        }    

        if (fileName.equals(loadString )) {
         loadSize = loadEntry.getSize();
         break;
        }
        offset += fileSize;
        loadEntry = zisp.getNextEntry();
    }

   zisp.closeEntry();

 }finally {
    zis.close();
}

  return offset ;
}

OpenLayer的继承系统要求您声明新控件在声明新类时从哪个类继承。这个ol.inherits调用会将所有Control方法附加到您的RotateLeft类上，就像您在RotateLeft函数中执行此操作一样，当调用Control.Call时，Control方法（特别是setTarget）不可用，和Control.Call希望setTarget可用于此。

Openlayers自定义控件：“未捕获的TypeError：setTarget不是函数”

1 个答案: