Can't set rotation using extended class

65 views Asked by At

I want to implement a children class to modify the map orientation.

I have a main.js file exporting '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;

and i have EditBar.js with a children class that implement 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;

Currently the map is not correctly oriented. console.log(this.map) in EditBar give me the map element but it looks like my function is not applied... How can i correct it ?

0

There are 0 answers