Используйте OpenLayers 4 с угловым 5

Ответ 1

ol - это правильный пакет для OpenLayers. Однако вам не нужно ничего добавлять в angular-cli.json.

Изменить для версии 5.2 от ol :

С недавним обновлением ("ol": "^5.2.0") способ импорта классов и функций OpenLayers немного изменился.

map.component.ts:

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
    });
  }
}

map.component.html:

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

map.component.css:

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

Добавьте CSS OpenLayers в header -tag файла index.html:

<link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.1.3/css/ol.css" type="text/css">
<style>html, body { margin: 0; }</style>

Старый ответ:

Ваш компонент может выглядеть следующим образом:

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 OlProj 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;

  constructor() {
  }

  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: OlProj.fromLonLat([6.661594, 50.433237]),
      zoom: 3
    });

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

CSS:

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

HTML:

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

Дайте мне знать, если это решение работает для вас.

Ответ 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/

Ответ 3

Используйте этот код в ngAfterViewInit() вместо ngOnInit()