如何在 Angular 中导入和使用 control.defaults？答案

【问题标题】：How to import and use control.defaults in Angular?如何在 Angular 中导入和使用 control.defaults？
【发布时间】：2019-02-14 18:39:48
【问题描述】：

我是 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());
  }

}

错误信息：

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

【问题讨论】：

导入应该是defaults（复数），它是一种方法，因此调用中不需要进一步的方法：import {defaults as defaultControls} from 'ol/control';controls: defaultControls({attribution: false}),
另外Zoom和Attribution也不需要导入，defaultControls中已经包含了

标签： openlayers-5 angular-openlayers

【解决方案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
      })
    });
  }
}

【讨论】：