如何在 openlayers 中添加 WFS 和 WMS？

Question

我在下面有两个服务 url，比如 WFS 和 WMS：

http://neii.bom.gov.au/services/solarclim/wms/data/monClim_dirNorExp1Hou.nc?service=WMS&version=1.3.0&request=GetCapabilities&SERVICE=WMS&VERSION=1.3.0&REQUEST=GetMap&FORMAT=image/png&TRANSPARENT=true&LAYERS=topp:states&TILED=true&WIDTH=256&HEIGHT=256&CRS=EPSG:4326&STYLES=&BBOX=45%2c-67.5%2c56.25%2c-56.25

http://services.land.vic.gov.au/catalogue/publicproxy/guest/dv_geoserver/datavic/wfs?SERVICE=WFS&VERSION=1.0.0&REQUEST=GetFeature&TYPENAME=datavic:VMADMIN_LGA_POLYGON&SRSNAME=EPSG:4283&cql_filter=LGA_CODE=325

我希望这两个服务需要添加为我的 openlayers 地图中的图层。有可能吗？如何实现？

使用示例数据更新代码：

myFunction(layerUrl:string, layer: any) {
        var bbox = layer.BoundingBox[0].extent;
        var crs = layer.BoundingBox[0].crs;

        var wmsSource = new ol.source.TileWMS({
            url: `${layerUrl}`,
            params: {'LAYERS': `${layer.Name}`, 'TILED': true},
            serverType: 'geoserver',
            projection: `${crs}`,
            // Countries have transparency, so do not fade tiles:
            transition: 0
        });

        var wmsLayer = new ol.layer.Tile({
            extent: bbox,
            source: wmsSource
        });

        map.addLayer(wmsLayer);

        map.getView().fit(wmsLayer.getExtent());
    }

此处的图层网址： https://wms.geo.admin.ch/

这是图层对象：

Abstract: "Als Kulturgüter von nationaler Bedeutung im Inventar von 2009 gelten rund 3200 Objekte (Einzelbauten / Sammlungen in Museeen, Archiven und Bibliotheken sowie Archäologie)."
Attribution: {Title: "Das Geoportal des Bundes", OnlineResource: "http://www.geo.admin.ch/", LogoURL: {…}}
BoundingBox: [{…}]
CRS: (14) ["epsg:2056", "epsg:21781", "epsg:4326", "epsg:3857", "epsg:3034", "epsg:3035", "epsg:4258", "epsg:31287", "epsg:25832", "epsg:25833", "epsg:31467", "epsg:32632", "epsg:32633", "epsg:900913"]
Dimension: undefined
EX_GeographicBoundingBox: (4) [0.659965, 45.4183, 10.8344, 48.7495]
Layer: (2) [{…}, {…}]
MaxScaleDenominator: undefined
MinScaleDenominator: undefined
Name: "ch.babs.kulturgueter"
Style: [{…}]
Title: "KGS Inventar"
cascaded: undefined
fixedHeight: undefined
fixedWidth: undefined
noSubsets: false
opaque: false
queryable: false
__proto__: Object

Answer 1

抱歉，回复晚了，但我在我的项目中使用此代码和自定义设置，这为我提供了有效的输出。 代码如下[请用你的变量更改静态ip]

var wmsSource = new ol.source.TileWMS({
     url: 'https://wms.geo.admin.ch/',
     params: {'LAYERS': 'ch.babs.kulturgueter','TILED': true},
     serverType: 'geoserver',
     projection: 'EPSG:4326',
     transition: 0
});

var wmsLayer = new ol.layer.Tile({
    source: wmsSource
});

map.addLayer(wmsLayer);

输出如下：[工作正常]