我想在Angular 4 | 2中的地图上添加一个来自GeoServer的wms-layer的示例,但我不知道正确的语法。或许有人对在Angular2或Angular4中使用OpenLayers有经验?谢谢!
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>
仅供参考:
这个想法是通过一个服务从表单中注入自定义指定的url,从GeoServer渲染多个图层到基本地图。