Angular4 add WMS (openlayers)
I want to add example wms-layer with OpenLayers with GeoServer to my map in Angular 4 | 2.
I don't know the correct syntax for this.
Perhaps someone has experience with OpenLayers in Angular2 or Angular4?
Many thanks!
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>
For information only:
The idea is to enter from a form using a special custom url from GeoServer to display multiple layers in the basemap.
+3
source to share
1 answer
I solved the answer, maybe it might be useful for someone else:
Adding a wms layer in addition to the base layer:
//// 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);
////
And you must specify the type of projection in angular 4. The parameters are optional.
+3
source to share