2

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>
1

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!

  • thanks but it didnt work. I don't understand, when i take source code from geoserver that works. – vahitdurmus Nov 23 '17 at 15:13
  • do ı have to give all parameters to request? it doesn't show because of this – vahitdurmus Nov 23 '17 at 15:19
  • As Lennert De Feyter said, did you check if you have any errors in console? If there arent any, I would play with bbox - extent - center...maybe your layers are called but projections are not harmonized. I would also copy/paste code from GeoServer and try to implement it in your project just to see if it works, from the same server where your project is. – mycupoftea Nov 27 '17 at 8:35
  • I didnt have any problems making requests to GeoServer for WMS regarding permissions but I did have for WFS for which you have to enable some things: gis.stackexchange.com/questions/67958/…. gis.stackexchange.com/questions/57494/… – mycupoftea Nov 27 '17 at 8:35
  • 1
    thanks, I have understood. it wouldn't work because of I didn't give all parameters to request – vahitdurmus Nov 29 '17 at 11:47
0

I think you can change the layer definition to:

 new_layer = new ol.layer.Image({
            title: LayerName,
            source: new ol.source.ImageWMS({
            url: http://myIP/geoserver/myWorkspaceName/wms,
            params: {LAYERS: [myWorkspaceName:myLayerName], VERSION:'1.1.1'}
           })
        });

The rest should be handled by Openlayers itself.

Also, be sure to check your browser development screen (usually F12), to see if a request is being made and what the response is.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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