web-dev-qa-db-ja.com

Angular 5でOpenLayers 4を使用します

Angular 5.でOpenLayers 4を使用しようとしています。

基本的に、公式のOpenLayersサイトから QuickStart の例を実装したいだけです。

これまでにやったこと：

  1. npm install ol --save olパッケージをダウンロードするには
  2. angular-cli.json angle-cli.jsonにこれらの行を追加しました。 Stackoverflowの別の例でこれを実行する必要があると考えました。 ol.cssファイルが存在します。 ol.jsファイルはありません。したがって、これが正しいか間違っているかはわかりませんが、明らかに機能しません。

My angularプロジェクトは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,
      })
    });
  }
}

誰もこれを正しく機能させる方法を教えてもらえますか？

angularopenlayersangular5
13
Giuseppe

ol は、OpenLayersに適したパッケージです。ただし、angular-cli.jsonに何も追加する必要はありません。

編集：

Bhalchandra Bhosale で述べたように、マップのターゲットをngAfterViewInit内に設定するのがさらに良いかもしれません：

export class MapComponent implements OnInit, AfterViewInit {

  ...

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

バージョン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;
}

index.htmlのheader- tag内にOpenLayersのCSSを追加します。

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

このソリューションがあなたのために働くかどうか私に知らせてください。

27
pzaenger

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/

8
Nicolas G.

このコードをngOnInit（）の代わりにngAfterViewInit（）に使用します

0
Bhalchandra Bhosale