Question

我正在使用Angular 7，OpenLayers 5.3.0（ol）。我是OpenLayers的新手。我似乎无法通过Angular 2+找到OverLayers的示例。我尝试遵循https://openlayers.org/en/latest/examples/index.html中的示例，并使代码适用于Angular 2+。

Use OpenLayers 4 with 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“控制”模块导入到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({
     ...
  });
}

有关将OpenLayers模块导入Angular 2+的问题

2 个答案: