Application Development in Web Mapping 5.

oralwideΔιακομιστές

17 Νοε 2013 (πριν από 3 χρόνια και 8 μήνες)

483 εμφανίσεις


Created by
XMLmind XSL
-
FO Converter
.

Application Development in Web
Mapping 5.

OWS application

László Kottyán







Created by
XMLmind XSL
-
FO Converter
.

Application Development in Web Mapping 5.: OWS application

László Kottyán

Lector: Antal Guszlev

This module was created within TÁMOP
-

4.1.2
-
08/1/A
-
2009
-
0027 "Tananyagfejlesztéssel a

GEO
-
ért"
("Educational material development for GEO") project. The project was funded by the European Union and the
Hungarian Government to the amount of HUF 44,706,488.

v 1.0

Publication date 2010

Copyright © 2010 University of West Hungary Faculty of Ge
oinformatics

Abstract

In Module 5 an OWS simple application is created.

The right to this intellectual property is protected by the 1999/LXXVI copyright law. Any unauthorized use of this material i
s prohibited. No
part of this product may be reproduced or
transmitted in any form or by any means, electronic or mechanical, including photocopying,
recording, or by any information storage and retrieval system without express written permission from the author/publisher.





iii


Created by
XMLmind XSL
-
FO Converter
.

Table of Contents

5. OWS application


................................
................................
................................
.............................


1

1. 5.1 Introduction


................................
................................
................................
.....................


1

2. 5.2 The development environment


................................
................................
........................


1

3. 5.3 Adding PostGIS data to GeoServer


................................
................................
.................


1

4. 5.4 Styling layers with SLD


................................
................................
................................
..


3

5. 5.5 Displaying the layers


................................
................................
................................
.......


4

6. 5.6 Summary


................................
................................
................................
.........................


7





1


Created by
XMLmind XSL
-
FO Converter
.

Chapter

5.

OWS application

1.

5.1 Introduction

ADW Module 5 is based on

Module 2, Module 3 and Module 4.

In Module 2 a PostgreSQL example database was created from OpenStreetMap source and a Geocaching dataset
was added to the database.

In Module 3 GeoServer was installed and reviewed.

In Module 4 OpenLayers client was introd
uced.

In Module 5 an OWS application will be created using:



PostgreSQL Geocaching dataset,



GeoServer with WMS and SLD,



OpenStreetMap Mapnik layer,



and OpenLayers.

2.

5.2 The development environment

For the sample application we will use the existing szfv_o
sm_db database from PostgreSQL, it was created in
Module 2.

In Module 3 there was an Apache Tomcat server installed with GeoServer. We will use GeoServer for creating
OGC Web Service (OWS) from database and serve maps to client.

The OpenLayers will be used

to create the client application. The client will be served to the web browser by
Apache Tomcat. The easiest way to serve the client is to put the client source code into
Tomcat
7.0
\
webapps
\
ROOT

directory.

Download OpenLayers library from
http://openlayers.org/

unpack it and place into the ROOT.

The HTML file of the client will be saved into the ROOT. If you save it as ows_client.html then you will have
access to it using:

http://localhost:8080/ows_client.html

3.

5.3 Adding PostGIS data to GeoServer

The first step is to create GeoServer layers from PostGIS data.

Make sure that PostgreSQL and Tomcat are running. Open log in to GeoServer administrative area:

http://localhost:8080/geoserver/web/

Create a new store clicking on Stores on left and on Add new Store.

Select PostGIS database.


OWS application



2


Created by
XMLmind XSL
-
FO Converter
.


Choose AWD workspace (it was created formerly), type geocaching as Dat
a Source Name and fill the
Connection Parameters.



OWS application



3


Created by
XMLmind XSL
-
FO Converter
.

On New Layer Chooser select and publish geocache. When the resource information form display, compute
bounding boxes and save it.

Click on Layers on the left and add walk table to the layers from the same

store.

You can check the added layers on Layer Preview page.

4.

5.4 Styling layers with SLD

SLD (Styled Layer Descriptor) is an OGC standard. With SLD point, lines, polygons can be styled within an
XML document.

In GeoServer admin area select Styles. Here
, you can insert a new style, copy an existing one and modify, or
upload a new style from file.


After you saved the SLD file assign it to a layer on Layer page Publishing tab.

Here is a sample point stlye:

<?xml version="1.0" encoding="ISO
-
8859
-
1"?>

<Sty
ledLayerDescriptor version="1.0.0"


xsi:schemaLocation="http://www.opengis.net/sld StyledLayerDescriptor.xsd"


xmlns="http://www.opengis.net/sld"


xmlns:ogc="http://www.opengis.net/ogc"


xmlns:xlink="http://www.w3.org/1999/xlink"


OWS application



4


Created by
XMLmind XSL
-
FO Converter
.


xmlns
:xsi="http://www.w3.org/2001/XMLSchema
-
instance">


<NamedLayer>


<Name>Point with styled label</Name>


<UserStyle>


<Title>Based on GeoServer SLD Cook Book: Point with styled label</Title>


<FeatureTypeStyle>


<Rule>


<Poin
tSymbolizer>


<Graphic>


<Mark>


<WellKnownName>triangle</WellKnownName>


<Fill>


<CssParameter name="fill">#66FF00</CssParameter>


<CssParameter name="fill
-
opacity">0.2</CssParameter
>


</Fill>


<Stroke>


<CssParameter name="stroke">#000000</CssParameter>


<CssParameter name="stroke
-
width">2</CssParameter>


</Stroke>


</Mark>


<Size>12</Size>


<
/Graphic>


</PointSymbolizer>


<TextSymbolizer>


<Label>


<ogc:PropertyName>id</ogc:PropertyName>


</Label>


<Font>


<CssParameter name="font
-
family">Arial</CssParameter>



<CssParameter name="font
-
size">12</CssParameter>


<CssParameter name="font
-
style">normal</CssParameter>


<CssParameter name="font
-
weight">regular</CssParameter>


</Font>


<LabelPlacement>


<PointPlacement>


<AnchorPoint>


<AnchorPointX>0.5</AnchorPointX>


<AnchorPointY>0.0</AnchorPointY>


</AnchorPoint>


<Displacement>


<DisplacementX>0</Displacem
entX>


<DisplacementY>5</DisplacementY>


</Displacement>


</PointPlacement>


</LabelPlacement>


<Fill>


<CssParameter name="fill">#0000FF</CssParameter>


</Fill>



</TextSymbolizer>


</Rule>


</FeatureTypeStyle>


</UserStyle>


</NamedLayer>

</StyledLayerDescriptor>


It defines a point with label. To write an XML document is not too comfortable, however this SLD is self
-
descriptive. Reading the

document tree you can realize the meanings of tags and attributes. You can read more
about styling in GeoServer SLD Cookbook
1
.

5.

5.5 Displaying the layers




1

GeoServer SLD Cookbook: http://docs.geoserver.org/stable/en/user/styling/sld
-
c
ookbook/index.html


OWS application



5


Created by
XMLmind XSL
-
FO Converter
.

Before we start to create the client we need to know some parameters about our local WMS service. W
ith this
URL you get the service details, metadata in XML format:

http://localhost:8080/geoserver/wms?service=wms&request=GetCapabilities

Save it and open in Firefox or an editor.

Now you have relevant information about the layers, you can start to create
the client.

We will use OpenStreetMap layer as base layer and geocache and walk layers as overlays.

Type the following code into a file and save into the ROOT as ows_client.html.

<html>

<head>

<title>OpenLayers Example</title>

<style type="text/css">

html, body, #map {

width: 100%;

height: 100%;

margin: 0;

}

</style>

<script src="/OpenLayers/OpenLayers.js"></script>

<script defer="defer" type="text/javascript">

function init(){

var bounds = new OpenLayers.Bounds(

2048213.62, 5973065.741,

2061614.706,
5979022.181


);

var options = {


controls: [

new OpenLayers.Control.Navigation(),

new OpenLayers.Control.PanZoomBar(),

new OpenLayers.Control.LayerSwitcher({'ascending':false}),

new OpenLayers.Control.Permalink(),

new OpenLayers.Control.ScaleLine(),

new Op
enLayers.Control.Permalink('permalink'),

new OpenLayers.Control.MousePosition(),

new OpenLayers.Control.OverviewMap(),


],

maxExtent: bounds,

projection: "EPSG:900913",


};

var map = new OpenLayers.Map('map', options);

var mapnik = new OpenLayers.Layer
.OSM();

var walk = new OpenLayers.Layer.WMS(

"Walks", "http://localhost:8080/geoserver/wms", {layers: "AWD:walk",

transparent: "true",

format: "image/png"

}, {isBaseLayer: false}

);

var geocache = new OpenLayers.Layer.WMS(


"Geocaches", "http:
//localhost:8080/geoserver/wms",


{layers: "AWD:geocache", transparent: "true", format: "image/png" },

{isBaseLayer: false}

);

map.addLayers([mapnik, walk, geocache ]);

map.setCenter(new OpenLayers.LonLat(18.4090782,47.1908359)

.transform( new OpenLaye
rs.Projection("EPSG:4326"),


new OpenLayers.Projection("EPSG:900913") ), 15 );

}


</script>

</head>

<body onload="init();">

<div id="map"></div>

</body>

</body>

</html>

Explanation:


OWS application



6


Created by
XMLmind XSL
-
FO Converter
.



After some CSS styling the
<script>

tag refers to the library in ROOT folder.



The bounds variable defines the bounding box.



The options variable defines the controls to use on map.



The maxExtent property gets bounds values.



We use EPSG:900913 projection.



When the map object is created it ge
ts the parameters from options variable.



In next three steps the layer objects is created. The isBaseLayer properties of WMS layers are false.



Layers is added to map



The map center is set with WGS84 coordinates, therefore the transform method is called.



15

is the zoom level.



<body>

has a
<div>

tag within which the map will be displayed.

On the next picture is the resulted client with controls.


Client with green point and line style.


OWS application



7


Created by
XMLmind XSL
-
FO Converter
.


6.

5.6 Summary

In Module 5 a sample client application was created to d
emonstrate how the OWS works with PostGIS backend
and OpenLayers client.

The client has some controls and more controls can be added. However it is not a finalized client, you can
develop it extending its functionality.

Bibliography

Geoserver:

GeoServer U
ser Manual, Styling,

2011

OpenLayers:

OpenLayers Documentation,

http://docs.openlayers.org/