我想在GeularServer中添加一个带有OpenLayers的示例 wms-layer 到我在Angular 4中的 Map 2 .
我不知道这样做的正确语法 .
也许有人对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>
仅供参考:
我们的想法是从一个表单,一个服务,从GeoServer注入自定义指定的URL,以在基本 Map 中渲染多个图层 .
1 回答
我解决了答案,也许这对其他人有帮助:
另外在基本层添加wms层:
并且您必须引用角度为4的投影类型 . 参数可选 .