无法使用扩展类设置旋转

Question

我想实现一个子类来修改地图方向。

我有一个导出“MainMap”的 main.js 文件：

import './style.css';
import 'ol-ext/dist/ol-ext.min.css';
import {Map, View} from 'ol';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';
import { SidePanel } from 'ol-side-panel';
import EditBar from './widget/Edition/EditBar';

class MainMap {
  constructor() {
    this.map = new Map({
      target: 'map',
      layers: [
        new TileLayer({
          source: new OSM()
        })
      ],
      view: new View({
        center: [0, 0],
        zoom: 2
      })
    });

    // Sidepanel
    this.sidePanel = new SidePanel();
    this.map.addControl(this.sidePanel);

    this.layersPane = this.sidePanel.definePane({
      paneId: 'layers',
      name: "Layers",
      icon: 'Y'
    });
  }
}

new MainMap();

export default MainMap;

我有一个 EditBar.js 和一个实现 RotateFunction() 的子类：

import MainMap from '../../main';
import '../../node_modules/font-gis/css/font-gis.css'
import View from 'ol/View.js';

/**
 * @module widget/EditBar
 */

class EditBar extends MainMap{
  constructor() {
    super()
    console.log(this.map)
    this.RotateFunction()
  }

  RotateFunction () {
    console.log(this.map.getView())
    this.map.getView().setRotation(0.4);
  }
}

new EditBar();

export default EditBar;

目前地图的方向不正确。

console.log(this.map)

在 EditBar 中给我地图元素，但看起来我的功能没有应用......我该如何更正它？

Answer 1

你可能需要在构造函数中绑定它，所以

this

不会丢失你的类的上下文：

constructor() {
    super()

    this.RotateFunction = this.RotateFunction.bind(this)
    console.log(this.map)
    this.RotateFunction()
  }