[GIS] Getting WMS from GeoServer with OpenLayers

geoserveropenlayerswms

I have got Layers on geoserver. my goal is to show that layer using OpenLayers.

My script is below and returns blank map. How would I fetch and show layer on web?

 <script type="text/javascript">
       var layers = [

       new ol.layer.Tile({
           extent: [-13884991, 2870341, -7455066, 6338219],
           source: new ol.source.TileWMS({
               url: 'http://myIP/geoserver/myWorkspaceName/wms',
               params: { 'REQUEST':'GetMap','BBOX':'437762.766104487,4376882.69760637,522118.932880649,4461344.83731443', 'LAYERS': 'myWorkspaceName:myLayerName', 'TILED': true  ,'SRS':'EPSG:5255','FORMAT':'application/openlayers','WİDTH':'767','HEİGHT':'768'},
               serverType: 'geoserver'

           })
       })
        ];
        var map = new ol.Map({
            layers: layers,
            target: 'map',
            view: new ol.View({
                center: [-10997148, 4569099],
                zoom: 4
            })
        });
    </script>

Best Answer

For WMS called from GeoServer v.2.11.0 with OpenLayers v.3.8.2 (check your versions):

name.html:

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>WMS</title>
    <!-- OpenLayers CSS v.3.8.2.-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.8.2/ol.min.css" type="text/css">
    <!-- JQuery (v.1.11.4.)-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css" type="text/css">
    <!-- external css -->
    <link rel="stylesheet" href="name.css">
    <!-- Proj4 -->
    <script src="http://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.6/proj4.js"></script>
    <!-- Proj4~EPSG:5255 -->
    <script src="http://epsg.io/5255.js"></script>
    <style>
    </style>
  </head>
  <body>
    <div id="map"></div>
    <!-- JavaScript -->
    <!-- JQuery JS -->
    <script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
    <!-- JQuery UI JS -->
    <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
    <!-- OpenLayers JS -->
    <script src="http://openlayers.org/en/v3.8.2/build/ol-debug.js" type="text/javascript"></script>
    <!-- OpenLayers JS v.3.8.2.-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.8.2/ol.min.js" type="text/javascript"></script>
    <!-- external script -->
    <script src="name.js"></script>
  </body>
</html>

name.css: (do as you please)

html, body, #map{
    width:100%; height:100%;
    overflow: hidden;
}
#map{
    position:absolute;
    z-index:-1;
    top:0; bottom:0; 
}

.ol-control button{
    border-radius: 50% !important;
}

name.js:

// I usually get defined EPSG from this site: http://spatialreference.org/, however it doesnt give me any vaild result for your projection...very strange, so I took it from this site as defined in html https://epsg.io/5255 ... copied code* and extent
var projection = new ol.proj.Projection({
    code: 'EPSG: 5255', // *code says: 5261 ...try to see if this is right
    extent: [-179106.47, 3835054.33, 1457898.22, 4881225.40]
});

// wms
// source
var layerSource = new ol.source.TileWMS({
        url: 'http://yourIP/geoserver/nameOfWorkspace/wms',
        params: {'VERSION': '1.3.0',
                 'LAYERS': 'nameOfWorkspace:nameOfLayer ', 
                 'TILED': true,
                 'bbox': [number.number, number.number, number.number, number.number], // GeoServer bbox or extent in EPGS: 5255 - read from url in GeoServer WMS
                 'CRS': 'EPSG:5255',
         'FORMAT': 'image/png8'},
       serverType: 'geoserver',
      });


// layer
var layerLayer = new ol.layer.Tile({
    layer:'nameOfLayer',
    visible: false,
    preload: Infinity,
    source: layerSource 
});

// view
var olview = new ol.View({
    projection: projection,
    center: [number.number, number.number], // center calculated from ol3 with map.getView().getCenter(); 
    extent: projection.getExtent(),
    zoom: 1.5
})

// map
var map = new ol.Map({
    target: 'map',
    renderer: 'canvas', // Force the renderer to be used
    view: olview,
    layers: [layerLayer], 
    controls: ol.control.defaults(),
    logo: false
});

Give feedback if it works or not!

Related Question