Angular4 add WMS（openlayers）

Question

例を追加したいwms-layer OpenLayersでGeoServerから私のマップをAngular 4 | 2.
これを行うには正しい構文がわかりません。
OpenLayersでAngular2やAngular4の経験がある人はいますか？
ありがとうございました！

map.component.ts

import {Component, OnInit, AfterViewInit, ViewEncapsulation, Input} 

from '@angular/core'; 
import { WmslayerService} from '../../wmslayer.service'; 


import * as ol from 'openlayers'; 

@Component({ 
    selector: 'olmap', 
    encapsulation: ViewEncapsulation.None, 
    templateUrl: './map.component.html', 
    styleUrls: ['./map.component.css'] 
})export class MapComponent implements OnInit, AfterViewInit { 

    @Input() id3: number; 

    mapId2: string; 

    map: ol.Map = undefined; 

    mapexample: ol.Map = undefined; 


    constructor(private wmslayerService: WmslayerService) { 

    // generate random id for every map 
    this.mapId2 = "map" + Math.random().toString(36).replace(/[^a-z]+/g, '').substr(0, 5); 

    } 


    ngOnInit() { 
    // test service 
    console.log(this.wmslayerService.addMyWms()); 
    console.log(this.wmslayerService.layer); 
    // 

    console.log(this.mapId2); 
    } 

    // render the basic map 
    ngAfterViewInit() { 
    this.map = new ol.Map({ 
     target: this.mapId2, 
     layers: [ 
     new ol.layer.Tile({ 
      source: new ol.source.OSM() 
     }) 
     ], 
     view: new ol.View({ 
     center: ol.proj.fromLonLat([37.41, 8.82]), 
     zoom: 8 
     }) 
    }); 
    // 

    //// add WMS layer to the basic map 
    this.mapexample = new ol.layer.Tile({ 
     extent: [-13884991, 2870341, -7455066, 6338219], 
     source: new ol.source.TileWMS({ 
     url: 'http://osgis.astun.co.uk/geoserver/gwc/service/wms?', 
     params: { 
      'LAYERS': 'osgb:district_borough_unitary_region', 
      'VERSION': '1.1.1', 
      'FORMAT': 'image/png', 
      'TILED': true 
     }, 
     serverType: 'geoserver' 
     }) 
    }); 
    map.addLayer(mapexample); 
    //// 
    } 

} 

map.component.htmlだけの情報について

<div id={{mapId2}} class="map"> 

    <div><app-menue></app-menue></div> 
    </div> 

：
アイデアは、フォームから、GeoServerからのカスタム指定のURLをサービスに挿入して、基本マップの複数のレイヤーをレンダリングすることです。

Answer 1

私は多分、これは他の誰かのために役立つことができ、答えを解く：

は、基本的な層に加えて、WMSレイヤの追加：

//// basic layer 

var examplelayer = new ol.layer.Tile({ 
    source: new ol.source.TileWMS({ 
    url: 'https://ahocevar.com/geoserver/wms', 
    params: { 
     'LAYERS': 'topp:states', 
     'TILED': true 
    }, 
    projection: 'EPSG:4326', 
    serverType: 'geoserver' 
    }) 
}); 
this.mapId2 = "map"; 
this.map.addLayer(examplelayer); 


//// 

そして、あなたは、投影タイプを引用しなければなりません角4 パラメータはオプションです。