1

我是 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
4

1 回答 1

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
      })
    });
  }
}
于 2019-02-18T13:02:02.433 回答