Как импортировать и использовать control.defaults в Angular?

Question

Я очень новичок в Openlayers и пытаюсь создать свой первый компонент карты. Я пытаюсь установить элементы управления картой, но безуспешно. Код выдает ошибку при попытке импортировать 'ol / control'. Я видел много примеров использования defaultControls, но не в Angular.

Кто-нибудь может мне помочь, пожалуйста?

Мой код:

import { Component, OnInit } from '@angular/core';

import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';

import Zoom from 'ol/control/Zoom';
import ZoomSlider from 'ol/control/ZoomSlider';
import FullScreen from 'ol/control/FullScreen';
import ScaleLine from 'ol/control/ScaleLine';
import Attribution from 'ol/control/Attribution';
import {default as defaultControls} from 'ol/control';

@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.css']
})
export class MapComponent implements OnInit {

  public map;
  constructor() { }

  ngOnInit() {
    this.initMap();
  }

  private initMap(){
    this.map = new Map({
      target: 'map',
      controls: defaultControls.defaults({attribution: false}),
      layers: [
        new TileLayer({
          source: new OSM()
        })
      ],
      view: new View({
        center: [-4485855.10165787, -2310027.3183776503],
        zoom: 15,
        minZoom: 3,
        maxZoom: 19
      })
    });

    //this.map.addControl(new FullScreen());
    //this.map.addControl(new ScaleLine());
  }

}

Ошибка mensage:

AppComponent.html:2 ERROR TypeError: Cannot read property 'defaults' of undefined

Answer 1

Теперь все работает нормально... спасибо, ребята.

import { Component, OnInit } from '@angular/core';

import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';
import {defaults as defaultControls, ScaleLine, FullScreen} from 'ol/control.js';

@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.css']
})
export class MapComponent implements OnInit {

  public map;
  constructor() { }

  ngOnInit() {
    this.initMap();
  }

  private initMap(){
    this.map = new Map({
      target: 'map',
      controls: defaultControls({attribution: false, zoom: true,}).extend([
        new ScaleLine(),
        new FullScreen()
      ]),
      layers: [
        new TileLayer({
          source: new OSM()
        })
      ],
      view: new View({
        center: [-4485855.10165787, -2310027.3183776503],
        zoom: 15,
        minZoom: 3,
        maxZoom: 19
      })
    });
  }
}