Question

I need some help. I am new to the concept of Geoserver and WMS and I am looking for very basic help. I have downloaded and installed Geoserver, set up layers etc (including sld), however, I have no idea how to get this information from here to my website. As I have mentioned I am new to this and have no idea what I am doing, I have tried searching the web for step by step help, but most simply miss out how to or what to do once you have your shapefiles uploaded and stored on Geoserver.

Any help or pointing in the right direction of information would be most appreciated.

Thanks

Steve

Answer 1

Geoserver can run either using its own web server (jetty), or as a ".war archive" for Tomcat. That is, to deploy it on your web server, you will have to install the software on the actual machine that hosts your website (The common way would be to deploy a .war archive, when your web server is already running tomcat).

The geoserver s job is to render map tiles according to specifications provided by the WMS protocol. To include these tiles in your actual website and display them as a map, you will need a client application like OpenLayers, which handles the whole user interaction.

http://docs.geoserver.org/stable/en/user/installation/war.html

http://geoserver.org/display/GEOSDOC/OpenLayers

Answer 2

I agree with relet. An easy start it to click on the "preview" button in the Geoserver Web Interface (bottom left). There you can preview a layer with openlayers. Once you see your layer there, just look at the HTML + JS code of the page. You can start copy&pasting from there...

Answer 3

You ve probably established by now that you need to add some OpenLayers/javascript code to the HTML page where you want your map to be. Below is an HTML page with some basic OpenLayers code that adds a map to the page.

The bit to look at/use is and then the OpenLayers/javascript from the to the tag. You need to substitute the URL to your Geoserver as well as the workspace and layer name. The bounds and maxResolution are set to England and Wales and the projection is set to British National Grid, so you may need to change these to your area of interest.

If you re not familier with javascript, then a good place to start is: http://www.w3schools.com/js/default.asp, as well as the OpenLayers documentation.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta name="Description" content="Central-Geo">
<title>Map Test Page</title>


<style type="text/css" media="screen">
    html, body, div, header, footer, aside, nav, article, section   { margin: 0; padding: 0; }
    header, footer, aside, nav, article, section    { display: block; }
    body            { color: #333; font: 12px Helvetica, Arial, sans-serif; line-height: 18px; }
    h2              { color: #333; }
    a               { color: #337810; }
    p               { margin: 0 0 18px; }
    #container      { width: 760px; margin: 0 auto;}

    /* Header */
    header          { background: #006666; border-bottom: 2px solid #aaa; }
    header h1   { color: #fff; margin: 0 0 3px; padding: 24px 18px 0; }
    header p        { color: #ccc; font-size: 11px; font-weight: bold; padding: 0 18px; }

    /* Content Style */
    nav     { border-bottom: 1px solid #ccc; margin-right: 18px; }
    nav ul  { padding: 0 18px 9px; }
    #extra          { margin-left: 18px; }
    #extra small    { font-size: 11px; line-height: 18px; }
    #content        { border-bottom: 1px solid #ccc; margin-left: 18px; }
    #content p, #extra p { padding-right: 18px; }

    /* Content Positioning and Size */
    nav     { float: right; width: 175px; }
    #content        { float: left; width: 540px; }
    #extra          { float: left; width: 540px; }      /* Footer */
    footer          { background: #666; border-bottom: 2px solid #aaa; clear: left; width: 100%; }
    footer a        { color: #fff; }
    footer  p       { color: #ccc; margin: 0; padding: 0 18px 10px; }
    footer ul       { border-bottom: 1px solid #999; list-style: none; margin: 0 18px 6px; padding: 10px 0 6px; }
    footer li       { display: inline; font-size: 11px; font-weight: bold; padding-right: 5px; }

    .map            { height: 400px; width: 100%: margin: 0; padding: 0}

</style>
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

</head>
<body>
<div id="container">
    <header>
        <h1>Test Map Page heading</h1>
        <p class="description">A test page for a map</p>
    </header>
    <div id="wrapper">
        <section id="content">
            <h2>Map Heading Goes Here</h2>
    <div id="map" class="map">  
    <script src="http://openlayers.org/api/OpenLayers.js"></script>
    <script type="text/javascript">
    var bounds = new OpenLayers.Bounds(
                92599.19919326127, 1484.4293913718284,
                695626.1392662271, 670208.9526868482
            );
            var options = {
                maxExtent: bounds,
                maxResolution: 1700,
                projection: "EPSG:27700",
            };

            var map = new OpenLayers.Map( map , options);
            var wms = new OpenLayers.Layer.WMS(
                "Geoserver layers ", "http://urltoyourgeoserver/geoserver/yourworkspace/wms",
                { layers :  yourlayer ,
                    styles:   ,
                    format: image/png });

            map.addLayer(wms);
            map.zoomToMaxExtent();  
    </script>
    </div>
</div>
    <nav>
        <h2>Navigation Here</h2>
        <ul>
            <li><a href="">Navigation 1</a></li>
            <li><a href="">Navigation 2</a></li>
            <li><a href="">Navigation 3</a></li>
            <li><a href="">Navigation 4</a></li>
            <li><a href="">Navigation 5</a></li>
            <li><a href="">Navigation 6</a></li>
        </ul>
    </nav>
    <section id="extra">
        <h2>Extra Stuff Goes Here</h2>
        <p>Sometimes this would be called a <em>sidebar</em>, but it doesn t always have to be on the side to be called a <em>sidebar</em>. Sidebars can be on tops of things, below things, but they are usually beside things &ndash; hence it being a called a sidebar.</p>
        <p><small>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</small></p>

    </section>
    <footer>
        <ul>
            <li><a href="">Navigation 1</a></li>
            <li><a href="">Navigation 2</a></li>
            <li><a href="">Navigation 3</a></li>
            <li><a href="">Navigation 4</a></li>
            <li><a href="">Navigation 5</a></li>
            <li><a href="">Navigation 6</a></li>
        </ul>
        <p>Footer stuff goes here. Copyright, disclaimers &ndash; stuff like that.</p>
    </footer>
</div>

Answer 4

I created a test webpage and then called the layers that i m using on that test page.

Base = new OpenLayers.Layer.WMS("CMA Info - Streets", "http://test.com/geoserver/test/gwc/service/wms", {layers: "Base_test", transparent: true, format: "image/gif", buffer: 0 } tiled: true }

        );
        Base.isBaseLayer = true;
        Base.setOpacity(1);
        Base.setVisibility(true);
        Base.displayOutsideMaxExtent = 0;
        map.addLayers([Base]);
        //map.setOptions(zoomLevel = 19);

Answer 5

when you added the shape file to geoserver you were prompted to choose a workplace to store it

After that, go to Layer and click add new layer select the place where you ve added the data and specify SRS, e.g EPSG：　４３２６

Ｃｏｍｐｕｔｅ　ｔｈｅ　Ｂｏｕｎｄｉｎｇ　Ｂｏｘ

ａｎｄ　ｃｌｉｃｋ　Ｐｕｂｌｉｓｈ．

ＴＨｅｎ　ｇｏ　ｔｏ　Ｌａｙｅｒ　ＰｒｅｖｉｅｗＦｉｎｄ　ｔｈｅ　ｌａｙｅｒ　ｙｏｕ　ｊｕｓｔ　ｐｕｂｌｉｓｈｅｄａｎｄ　ｃｌｉｃｋｅ　ＯＰｅｎｌａｙｅｒ

Answer 6

So, when you configure a layer in Geoserver it s data (most images for the map) are served to you using what s called URL endpoint. It s a link for where the application requests the images (tiles) and creates the map for you. It will be this way, no matter if you are using KML, Shapefiles of Postgis database. The server takes care of it and make the visual information available via that endpoint.

For the web, the most popular is the OpenLayers, witch is a Javascript library that can manage the hard process for you, using simple HTML as it s enviroment.

A good example I ve found of them working together is here.

Note the lines I m hightlighting bellow:

 var ccounties = new OpenLayers.Layer.WMS(
                             "Counties of Colorado - Untiled", 
 "http://thisawsomesite.com:8080/geoserver/wms",
                             {
                                     width:  426 ,
                                     srs:  EPSG:4269 ,
                                     layers:  geosolutions:Counties ,
                                     height:  512 ,
                                     styles:   ,
                                     format: image/png **
                             },
                             {singleTile: true, ratio: 1}
             );

             map.addLayer(ccounties);

http://thisawsomesite.com:8080/geoserver/wms -> this is the url of the geoserver server that will give you the tiles. WMS is the service that transforms data into those images.

layers: geosolutions:Counties , -> this informs to geoserver, via the request, that you want the "Counties" layer, from the "geosolutions" workspace. Pretty simple, isn t it?

**styles: -> here you inform the name of the style I ve created.

format: image/png -> This one is the image format (image/png or image/jpeg are the most used, but there are more). Just remember that jpeg is usually smaller, but png is the option for when you need transparency/opacity settings.

srs is the projection. I don t remember of it s need here. The default map projection should take place if this is left.

If you are unsure of how to create an OpenLayers application, Geoserver gives you an example of the layers you have. Go to Layer Preview, in the left menu and click "OpenLayers" to see a simple example. You will notice that there are multiple options to retrieve the information in the menu right beside that link.

友情链接