Вопрос об импорте модулей OpenLayers в Angular 2+

Question

Я использую Angular 7, OpenLayers 5.3.0 (ol).Я новичок в OpenLayers.Кажется, я не могу найти примеры Angular 2+ с OverLayers.Я пытаюсь следовать примерам https://openlayers.org/en/latest/examples/index.html и заставить код работать для Angular 2+.

Использование OpenLayers 4 с Angular 5 очень полезно.Но в других случаях мне трудно заставить работать импорт модулей OpenLayers.

Например, вот JavaScript версия:

var map = new OpenLayers.Map({
    div: "map",
    layers: [new OpenLayers.Layer.OSM()],
    controls: [
        new OpenLayers.Control.Navigation({
            dragPanOptions: {
                enableKinetic: true
            }
        }),
        new OpenLayers.Control.Attribution(),
        new OpenLayers.Control.Zoom()
    ],
    center: [0, 0],
    zoom: 1
});

Как импортировать модуль OpenLayers 'Control' в Angular 2+?Я пытался

import OlMap from 'ol/Map';
import OlXYZ from 'ol/source/XYZ';
import OlTileLayer from 'ol/layer/Tile';
import OlView from 'ol/View';
import * as ol from 'ol';

this.map = new OlMap({
      target: 'map',
      layers: [this.layer],
      view: this.view,
      controls: [
        new ol.control.navigation({
            dragPanOptions: {
                enableKinetic: true
            }
        }),
        new ol.control.attribution(),
        new ol.control.zoom()
    ],
});

Но получил ошибку export 'Control' (imported as 'ol') was not found in 'ol'.Какие-либо предложения?Спасибо.

Answer 1

Вот пример, и вы можете найти много примеров на сайте Openlayers

import {defaults as defaultControls, OverviewMap} from 'ol/control.js';

  var map = new Map({
    controls: defaultControls().extend([
      new OverviewMap()
    ]),
    layers: [
      new TileLayer({
        source: new OSM()
      })
    ],
    target: 'map',
    view: new View({
      center: [500000, 6000000],
      zoom: 7
    })
  });

Answer 2

Должно работать следующее:

import * as ol from 'openlayers';

export class MapComponent implements OnInit {
   map: ol.Map;
}

ngOnInit() {
  this.map = new ol.Map({
     ...
  });
}