使用OpenLayers 4和Angular 5

Question

我正在尝试在Angular 5中使用OpenLayers 4.

基本上我只是想从官方的OpenLayers网站实现QuickStart示例.

到目前为止我做了什么:

1. npm install ol --save 下载ol包
2. angular-cli.json将这些行添加到angular-cli.json中.看到这必须在Stackoverflow上的另一个例子上完成.ol.css文件存在.ol.js文件没有.所以我不知道这是正确还是错误的方式,但它显然不起作用.

我的角度项目包括3个组件:

 -app
 --console
 --map
 --sidebar

 app.component.css
 app.compinent.html
 app.component.spec.ts
 app.component.ts
 app.module.ts

map.component.html

import { Component, OnInit } from '@angular/core';
import * as ol from '../../../node_modules/ol';

@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.css']
})
export class MapComponent implements OnInit {
  mapId: string;
  map: ol.Map = undefined;

  constructor() { }

  ngOnInit() {
    this.map = new ol.Map({
      target: this.mapId,
      layers: [
        new ol.layer.Tile({
          source: new ol.source.OSM(),
        }),
      ],
      view: new ol.View({
        center: ol.proj.fromLonLat([6.661594, 50.433237]),
        zoom: 3,
      })
    });
  }
}

任何人都可以告诉如何正常工作？

Answer 1

ol是OpenLayers的正确包.但是,您不需要在angular-cli.json中添加任何内容.

编辑5.2版本ngAfterViewInit:

使用最近的update(ol),导入OpenLayers的类和函数的方式有所改变.

map.component.ts:

<link rel="stylesheet" href="https://openlayers.org/en/v6.1.1/css/ol.css" type="text/css">

map.component.html:

import { AfterViewInit, Component } from '@angular/core';
import { defaults as defaultControls } from 'ol/control';

import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import XYZ from 'ol/source/XYZ';
import ZoomToExtent from 'ol/control/ZoomToExtent';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

export class AppComponent implements AfterViewInit {

  map: Map;

  ngAfterViewInit() {
    this.map = new Map({
      target: 'map',
      layers: [
        new TileLayer({
          source: new XYZ({
            url: 'https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png'
          })
        })
      ],
      view: new View({
        center: [813079.7791264898, 5929220.284081122],
        zoom: 7
      }),
      controls: defaultControls().extend([
        new ZoomToExtent({
          extent: [
            813079.7791264898, 5929220.284081122,
            848966.9639063801, 5936863.986909639
          ]
        })
      ])
    });
  }
}

map.component.css:

.map {
  width: 100%;
  height: 100vh;
}

在index.html的ol-tag中添加OpenLayers的CSS :

<div id="map" class="map"></div>

老答案:

您的组件可能如下所示:

export class MapComponent implements OnInit, AfterViewInit {

  ...

  ngAfterViewInit() {
    this.map.setTarget('map');
  }
}

CSS:

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

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

import { fromLonLat } from 'ol/proj';

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

export class MapComponent implements OnInit {

  map: OlMap;
  source: OlXYZ;
  layer: OlTileLayer;
  view: OlView;

  ngOnInit() {
    this.source = new OlXYZ({
      url: 'http://tile.osm.org/{z}/{x}/{y}.png'
    });

    this.layer = new OlTileLayer({
      source: this.source
    });

    this.view = new OlView({
      center: fromLonLat([6.661594, 50.433237]),
      zoom: 3
    });

    this.map = new OlMap({
      target: 'map',
      layers: [this.layer],
      view: this.view
    });
  }
}

HTML:

<div id="map" class="map"></div>

如果此解决方案适合您,请告诉我.

Answer 2

如果你不想从零与Angular5和OpenLayers4开始,有一个叫做成熟的项目IGO2-LIB这是基于Angular 5.x,NodeJS,OpenLayers 4.x和Material Design.IGO2也是一个完整的框架.

1. 克隆存储库使用: git clone https://github.com/infra-geo-ouverte/igo2-lib.git
2. 部署在cd igo2-lib /并从以下位置安装: npm install
3. 开始表格: npm start
4. 在http:// localhost:4200 /打开浏览器

这是IGO2的现场演示:https://geoegl.msp.gouv.qc.ca/igo2/apercu-qc/