2

I have the following basic OpenLayers 3 code that opens a OSM background mapping and this works fine:

<!doctype html>
<html>
    <head>
        <title>Hello PMS</title>
        <link rel="stylesheet" href="../assets/ol3/css/ol.css" type="text/css" />
        <link rel="stylesheet" href="../assets/css/samples.css" type="text/css" />
    </head>
    <body>
        <div id="map" class="map"></div>
        <script src="../assets/ol3/js/ol-debug.js"></script>
        <script>            
            var osmLayer = new ol.layer.Tile({
                source: new ol.source.OSM()
            });
            var uk_centre = ol.proj.transform([-2.547855, 54.00366], 'EPSG:4326', 'EPSG:3857');
            var view = new ol.View({
                center: uk_centre,
                zoom: 6
            });
            var map = new ol.Map({
                target: 'map'
            });
            map.addLayer(osmLayer);
            map.setView(view);
            map.addControl(new ol.control.FullScreen());
        </script>
    </body>
</html>

I am now looking to bring in a WMS layer from GeoServer with the code below, where would it be placed and what needs to be changed?

        var pms = new ol.layer.WMS("PMS",
        "http://10.0.1.127:8080/geoserver/PMS/wms",
        {layers: 'PMS:QGIS'} );
        map.addLayer(pms);
Improve this question
0

1 Answer 1

Reset to default
6

you have to use code like I pasted below. Just change parameters. Look into API! ... Example is using geoserver's GWC module to show cached WMS in tiles (both dynamic/prerendered cache), for classic non cached WMS just delete "gwc/" from URL and change 'TILED' parameter to false.

Note1: To work with live data you have to turn off integration between WMS and WMTS in Geoserver settings (delete of "gwc/" isn't enought)

Note2: Don't get confused by CRS/SRS parameters. CRS is used for version 1.3.0 and SRS is used in older version. 

var myLayer1303 = new ol.layer.Tile({
  extent: [2033814, 6414547, 2037302, 6420952],
  preload: Infinity,
  visible: true,
  source: new ol.source.TileWMS(({
    url: 'http://localhost:8080/geoserver/gwc/service/wms',
    params: {'LAYERS': 'WORKSPACE:LAYER', 'TILED': true, 'VERSION': '1.3.0',
      'FORMAT': 'image/png8', 'WIDTH': 256, 'HEIGHT': 256, 'CRS': 'EPSG:3857'},
    serverType: 'geoserver'
    }))
  });
  map.addLayer(myLayer1303);
Improve this answer
4

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.