我想在 Angular 4 中的 map 中添加一个示例 wms-layer 以及 GeoServer 中的 OpenLayers | 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>
仅供引用:
这个想法是从一个表单注入(inject)一个服务,从一个 GeoServer 中自定义指定的 url,以在基本 map 中呈现多个图层。
最佳答案
我解决了这个问题,也许这对其他人有帮助:
将 wms-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);
////
而且你必须在 Angular 4 中引用投影类型。 参数是可选的。
关于Angular4 添加 WMS (openlayers),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45324919/