2

I want to use OpenLayers, a GeoServer WMS layer with the Google Maps api as a base.

My GeoServer WMS layer is reprojected to EPSG:900913, when I open the GeoServer OpenLayers map, everything is OK.

Layer Configuration

On a map created in OpenLayers with projection EPSG:900913 for working with the Google Maps API, then all my layers took this projection. Not forgetting that the GeoServer natively reprojects layer as configured above.

Tested with all overlay property to see where he was going to stop the WMS layer but she even appears.

Another attempt, instead of using the default maxResolution bounds and used them in the openlayers geoserver, open the layer in openlayers with geoserver teclei F12 and copied the properties and bounds maxResolution to my map, it did not work.

The question is: why the WMS layer does not appear?

My code:

    <!DOCTYPE html>
<html lang='en'>
<head>
 <meta charset='utf-8' />
 <title>My OpenLayers Map</title>
 <script type='text/javascript' src='OpenLayers.js'></script>

 <script src="http://maps.google.com/maps/api/js?sensor=false&v=3.2"></script>

 <script type='text/javascript'>


 var map;
 var mercatorProjection = new OpenLayers.Projection('EPSG:900913');
 var latLongProjection = new OpenLayers.Projection('EPSG:4326');
 var bounds = new OpenLayers.Bounds(
                -51.2809219360352, -30.2445888519287,
                -51.0207977294922, -29.9661273956299
            );

 function init() {

  map = new OpenLayers.Map('map_element',{
    maxExtent: bounds,
    maxResolution:  0.0010877400636672,
    units: 'm',
    //allOverlays: true,
    projection: mercatorProjection,
    displayProjection: latLongProjection
 });


 var google_streets = new OpenLayers.Layer.Google(
    "Ruas",
    {numZoomLevels: 20}
    );

var wms_layer = new OpenLayers.Layer.WMS(
'WMS',
'http://localhost:8080/geoserver/Teste/wms',
{layers: 'Teste:onibus', transparent: true},
{isBaseLayer: false,
    opacity: 0.7}
);


//Adiciona as camadas ao mapa
map.addLayers([google_streets, wms_layer]);


var point = new OpenLayers.LonLat(-51.01,-30.01); 
point.transform(new OpenLayers.Projection("EPSG:4326"), 
    map.getProjectionObject()); 
map.setCenter(point, 10); 
 //Camada de controle que vai mostrar as camadas no mapa
 map.addControl(new OpenLayers.Control.LayerSwitcher({}));

 //Verifica se o mapa tem um ponto central e o extende a sua extensão máxima
 if(!map.getCenter()){
 map.zoomToMaxExtent();

 }
 }

 </script>
</head>

<body onload='init();'> <!-- Chama a função js init() --> 

<!--Elemento HTML onde o mapa é exibido -->
 <div id='map_element' style='width: 800px; height: 800px;'>
 </div>

</body>
</html>

Another thing I picked up the WMS Network link on this same layer and put the overlay on Earth was perfect. So my layer is properly designed .

My page result:

page

Link geoserver:

http://localhost:8080/geoserver/Teste/wms?service=WMS&version=1.1.0&request=GetMap&layers=Teste:onibus&styles=&bbox=-51.2809219360352,-30.2445888519287,-51.0207977294922,-29.9661273956299&width=478&height=512&srs=EPSG:900913&format=application/openlayers

Code openlayers on geoserver:

                                             <script>
        var map;
        var untiled;
        var tiled;
        var pureCoverage = false;
        // pink tile avoidance
        OpenLayers.IMAGE_RELOAD_ATTEMPTS = 5;
        // make OL compute scale according to WMS spec
        OpenLayers.DOTS_PER_INCH = 25.4 / 0.28;

        function init(){
            // if this is just a coverage or a group of them, disable a few items,
            // and default to jpeg format
            format = 'image/png';
            if(pureCoverage) {
                document.getElementById('filterType').disabled = true;
                document.getElementById('filter').disabled = true;
                document.getElementById('antialiasSelector').disabled = true;
                document.getElementById('updateFilterButton').disabled = true;
                document.getElementById('resetFilterButton').disabled = true;
                document.getElementById('jpeg').selected = true;
                format = "image/jpeg";
            }

            var bounds = new OpenLayers.Bounds(
                -51.2809219360352, -30.2445888519287,
                -51.0207977294922, -29.9661273956299
            );
            var options = {
                controls: [],
                maxExtent: bounds,
                maxResolution: 0.0010877400636672,
                projection: "EPSG:900913",
                units: 'm'
            };
            map = new OpenLayers.Map('map', options);

            // setup tiled layer
            tiled = new OpenLayers.Layer.WMS(
                "Teste:onibus - Tiled", "http://localhost:8080/geoserver/Teste/wms",
                {
                    LAYERS: 'Teste:onibus',
                    STYLES: '',
                    format: format,
                    tiled: true,
                    tilesOrigin : map.maxExtent.left + ',' + map.maxExtent.bottom
                },
                {
                    buffer: 0,
                    displayOutsideMaxExtent: true,
                    isBaseLayer: true,
                    yx : {'EPSG:900913' : false}
                } 
            );

            // setup single tiled layer
            untiled = new OpenLayers.Layer.WMS(
                "Teste:onibus - Untiled", "http://localhost:8080/geoserver/Teste/wms",
                {
                    LAYERS: 'Teste:onibus',
                    STYLES: '',
                    format: format
                },
                {
                   singleTile: true, 
                   ratio: 1, 
                   isBaseLayer: true,
                   yx : {'EPSG:900913' : false}
                } 
            );

            map.addLayers([untiled, tiled]);

            // build up all controls
            map.addControl(new OpenLayers.Control.PanZoomBar({
                position: new OpenLayers.Pixel(2, 15)
            }));
            map.addControl(new OpenLayers.Control.Navigation());
            map.addControl(new OpenLayers.Control.Scale($('scale')));
            map.addControl(new OpenLayers.Control.MousePosition({element: $('location')}));
            map.zoomToExtent(bounds);

            // wire up the option button
            var options = document.getElementById("options");
            options.onclick = toggleControlPanel;

            // support GetFeatureInfo
            map.events.register('click', map, function (e) {
                document.getElementById('nodelist').innerHTML = "Loading... please wait...";
                var params = {
                    REQUEST: "GetFeatureInfo",
                    EXCEPTIONS: "application/vnd.ogc.se_xml",
                    BBOX: map.getExtent().toBBOX(),
                    SERVICE: "WMS",
                    INFO_FORMAT: 'text/html',
                    QUERY_LAYERS: map.layers[0].params.LAYERS,
                    FEATURE_COUNT: 50,
                    Layers: 'Teste:onibus',
                    WIDTH: map.size.w,
                    HEIGHT: map.size.h,
                    format: format,
                    styles: map.layers[0].params.STYLES,
                    srs: map.layers[0].params.SRS};

                // handle the wms 1.3 vs wms 1.1 madness
                if(map.layers[0].params.VERSION == "1.3.0") {
                    params.version = "1.3.0";
                    params.j = parseInt(e.xy.x);
                    params.i = parseInt(e.xy.y);
                } else {
                    params.version = "1.1.1";
                    params.x = parseInt(e.xy.x);
                    params.y = parseInt(e.xy.y);
                }

                // merge filters
                if(map.layers[0].params.CQL_FILTER != null) {
                    params.cql_filter = map.layers[0].params.CQL_FILTER;
                } 
                if(map.layers[0].params.FILTER != null) {
                    params.filter = map.layers[0].params.FILTER;
                }
                if(map.layers[0].params.FEATUREID) {
                    params.featureid = map.layers[0].params.FEATUREID;
                }
                OpenLayers.loadURL("http://localhost:8080/geoserver/Teste/wms", params, this, setHTML, setHTML);
                OpenLayers.Event.stop(e);
            });
        }

        // sets the HTML provided into the nodelist element
        function setHTML(response){
            document.getElementById('nodelist').innerHTML = response.responseText;
        };

        // shows/hide the control panel
        function toggleControlPanel(event){
            var toolbar = document.getElementById("toolbar");
            if (toolbar.style.display == "none") {
                toolbar.style.display = "block";
            }
            else {
                toolbar.style.display = "none";
            }
            event.stopPropagation();
            map.updateSize()
        }

        // Tiling mode, can be 'tiled' or 'untiled'
        function setTileMode(tilingMode){
            if (tilingMode == 'tiled') {
                untiled.setVisibility(false);
                tiled.setVisibility(true);
                map.setBaseLayer(tiled);
            }
            else {
                untiled.setVisibility(true);
                tiled.setVisibility(false);
                map.setBaseLayer(untiled);
            }
        }

        // Transition effect, can be null or 'resize'
        function setTransitionMode(transitionEffect){
            if (transitionEffect === 'resize') {
                tiled.transitionEffect = transitionEffect;
                untiled.transitionEffect = transitionEffect;
            }
            else {
                tiled.transitionEffect = null;
                untiled.transitionEffect = null;
            }
        }

        // changes the current tile format
        function setImageFormat(mime){
            // we may be switching format on setup
            if(tiled == null)
              return;

            tiled.mergeNewParams({
                format: mime
            });
            untiled.mergeNewParams({
                format: mime
            });
            /*
            var paletteSelector = document.getElementById('paletteSelector')
            if (mime == 'image/jpeg') {
                paletteSelector.selectedIndex = 0;
                setPalette('');
                paletteSelector.disabled = true;
            }
            else {
                paletteSelector.disabled = false;
            }
            */
        }

        // sets the chosen style
        function setStyle(style){
            // we may be switching style on setup
            if(tiled == null)
              return;

            tiled.mergeNewParams({
                styles: style
            });
            untiled.mergeNewParams({
                styles: style
            });
        }

        // sets the chosen WMS version
        function setWMSVersion(wmsVersion){
            // we may be switching style on setup
            if(wmsVersion == null)
              return;

            if(wmsVersion == "1.3.0") {
               origin = map.maxExtent.bottom + ',' + map.maxExtent.left;
            } else {
               origin = map.maxExtent.left + ',' + map.maxExtent.bottom;
            }

            tiled.mergeNewParams({
                version: wmsVersion,
                tilesOrigin : origin
            });
            untiled.mergeNewParams({
                version: wmsVersion
            });
        }

        function setAntialiasMode(mode){
            tiled.mergeNewParams({
                format_options: 'antialias:' + mode
            });
            untiled.mergeNewParams({
                format_options: 'antialias:' + mode
            });
        }

        function setPalette(mode){
            if (mode == '') {
                tiled.mergeNewParams({
                    palette: null
                });
                untiled.mergeNewParams({
                    palette: null
                });
            }
            else {
                tiled.mergeNewParams({
                    palette: mode
                });
                untiled.mergeNewParams({
                    palette: mode
                });
            }
        }

        function setWidth(size){
            var mapDiv = document.getElementById('map');
            var wrapper = document.getElementById('wrapper');

            if (size == "auto") {
                // reset back to the default value
                mapDiv.style.width = null;
                wrapper.style.width = null;
            }
            else {
                mapDiv.style.width = size + "px";
                wrapper.style.width = size + "px";
            }
            // notify OL that we changed the size of the map div
            map.updateSize();
        }

        function setHeight(size){
            var mapDiv = document.getElementById('map');

            if (size == "auto") {
                // reset back to the default value
                mapDiv.style.height = null;
            }
            else {
                mapDiv.style.height = size + "px";
            }
            // notify OL that we changed the size of the map div
            map.updateSize();
        }

        function updateFilter(){
            if(pureCoverage)
              return;

            var filterType = document.getElementById('filterType').value;
            var filter = document.getElementById('filter').value;

            // by default, reset all filters
            var filterParams = {
                filter: null,
                cql_filter: null,
                featureId: null
            };
            if (OpenLayers.String.trim(filter) != "") {
                if (filterType == "cql") 
                    filterParams["cql_filter"] = filter;
                if (filterType == "ogc") 
                    filterParams["filter"] = filter;
                if (filterType == "fid") 
                    filterParams["featureId"] = filter;
            }
            // merge the new filter definitions
            mergeNewParams(filterParams);
        }

        function resetFilter() {
            if(pureCoverage)
              return;

            document.getElementById('filter').value = "";
            updateFilter();
        }

        function mergeNewParams(params){
            tiled.mergeNewParams(params);
            untiled.mergeNewParams(params);
        }
    </script>
1

Your Geoserver layer's bbox is the issue- &bbox=-51.2809219360352,-30.2445888519287,-51.0207977294922,-29.9661273956299. Note that in epsg:900913, this would be a tiny little blip just South of Ghana.

Either convert the bounds to 3857/900913 or take them out altogether to fix the problem (note that 900913 is identical to 3857).

0

Try Using this comand google_streets.setIsBaseLayer(false);

remember to put it before you add the layers to the map.

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.