无法通过继承类设置OpenLayers地图旋转，求修正方案

你的代码核心问题是重复创建了两个独立的Map实例：

• main.js里执行了new MainMap()，创建了一个地图实例并挂载到#map元素
• EditBar.js里又执行了new EditBar()，由于EditBar继承自MainMap，会再次创建全新的Map实例

页面实际显示的是第一个创建的MainMap实例，而调用旋转方法的是第二个未被显示的EditBar实例，因此看不到旋转效果。

修复步骤 #

1. 修改main.js，移除父类实例化 #

删除main.js末尾的new MainMap();，避免创建多余的地图实例：

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;

2. 保留EditBar作为唯一实例入口 #

保留EditBar.js里的new EditBar();，确保整个应用只创建一个由EditBar实例化的地图，旋转方法会直接作用在这个显示的实例上：

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

/**
 * @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;

额外优化建议 #

• 建议将实例化代码统一放到单独的入口文件（如index.js），避免在类文件内直接实例化，让代码结构更清晰
• EditBar.js中导入的View可以移除，父类已完成导入，子类无需重复引入

内容的提问来源于stack exchange，提问作者vprint