web-dev-qa-db-fra.com

Utilisez OpenLayers 4 avec Angular 5

J'essaie d'utiliser OpenLayers 4 dans Angular 5.

En gros, je veux juste implémenter l'exemple QuickStart du site officiel OpenLayers.

Ce que j'ai fait jusqu'à présent:

  1. npm install ol --save pour télécharger le package ol
  2. angular-cli.json a ajouté ces lignes à angular-cli.json. Vu que cela doit être fait sur un autre exemple sur Stackoverflow. Le fichier ol.css existe. Le fichier ol.js n'est pas. Donc, je ne sais pas si c'est la bonne ou la mauvaise façon, mais cela peut clairement ne pas fonctionner.

Mon projet angular est constitué de 3 composants:

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

Quelqu'un peut-il dire comment faire fonctionner cela correctement?

angularopenlayersangular5
13
Giuseppe

ol est le bon package pour OpenLayers. Cependant, vous n'avez rien besoin d'ajouter dans angular-cli.json.

Modifier:

Comme indiqué par Bhalchandra Bhosale , il serait peut-être encore mieux de définir la cible de la carte dans ngAfterViewInit:

export class MapComponent implements OnInit, AfterViewInit {

  ...

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

Éditer pour la version 5.2 de ol:

Avec la mise à jour récente ("ol": "^5.2.0") la manière d'importer les classes et les fonctions d'OpenLayers a un peu changé.

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

Ajoutez le CSS d'OpenLayers dans la balise header- de 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>

Ancienne réponse:

Votre composant pourrait ressembler à ceci:

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>

Faites-moi savoir si cette solution fonctionne pour vous.

27
pzaenger

Si vous ne voulez pas commencer à zéro avec Angular5 et OpenLayers4, il existe un projet mature appelé IGO2-lib qui est basé sur Angular 5.x, NodeJS, OpenLayers 4.x et Material Design. IGO2 est également un framework complet.

  1. Cloner le dépôt en utilisant: git clone https://github.com/infra-geo-ouverte/igo2-lib.git
  2. Déployer dans le cd igo2-lib/et installer à partir de: npm install
  3. Formulaire de départ: npm start
  4. Ouvrez votre navigateur à http: // localhost: 4200 /

Voici une démonstration en direct de IGO2 : https://geoegl.msp.gouv.qc.ca/igo2/apercu-qc/

8
Nicolas G.

Utilisez ce code dans ngAfterViewInit () au lieu de ngOnInit ()

0
Bhalchandra Bhosale