Layer object

OpenLayers supports number of layer types, among others

OGC WMS

MapServer

Image

for the raster layers

OGC WFS

GeoRSS

KML

GML

for the vector layers

Google

VirtualEarth

YahooMaps

for commercial “free” public mapping applications (all together they are more then 30 layer types).

Let us have a look on some layer types more closer:

OpenLayers.Layer

OpenLayers.Layer is parent class for all layer classes. You will probably never work with this base layer class, but it has some important attributes and methods, which is good to know:

isBaseLayer – indicates, whether the layer is base layer or
not
displayInLayerSwitcher – indicates, whether the layer is to be
displayed in the layerswitcher

visibility – indicates, whether the layer is visible or not

units, scales, resolutions, projection, min- max- Scale, Resolution, Extent

transtionEffect – transition effect to use when the map is panned or zoomed.

redraw (force) – redraw the layer

getVisibility, setVisibility – self explaining

calculateInRange () – should the layer be displayed in this zoom
scale or not

setOpacity (Float) – set layer opacity

OpenLayers.Layer.WMS

OpenLayers.Layer.WMS is interface to OGC Web Mapping Service. It is relatively simple to initialize such layer type:

Let’s have a look at some parameters (they are located in parent class OpenLayers.Layer.Grid):

singleTile – to tile or not to tile, that is a question ...

ratio – how big should the buffer be, if singleTile is true

buffer – how big should the buffer be, if singleTile is false (default)

The constructor accepts up to four parameters:
var layer = new OpenLayers.Layer.WMS("Layer Name",
        "http://foo/bar/wms",{layers:"foo"});

Or more complex way:

var layer = new OpenLayers.Layer.WMS("Layer Name",
        "http://foo/bar/wms",
            {
                // here comes WMS parameters
                layers: "foo,bar",
                format: "image/png",
                style:"default"
            },
            {
               // here comes OpenLayers.Layer.WMS parameters
               isBaseLayer: false,
               visibility: true,
               singleTile: true,
               ratio: 1,
               minResolution: 0.5
            }
        );

Add the end (and same applies for other layer types), add the layer to map:

map.addLayer(layer)

or, if there are more

map.addLayers([layer1,layer2,...])

Vector layer

Basic class for all vector-type layers (WFS, GML, ...) is OpenLayers.Layer.Vector.

WMS or GML are initialized in the similar way as the WMS layer is.

Initialize OpenLayers.Layer.Vector is simple:

var vlayer = new OpenLayers.Layer.Vector("Vector layer Name");

Vector layers do have several interesting attributes:

features – list of features in the vector layer

style – style describing the graphical representation of the layer

and methods:

addFeatures ([OpenLayers.Feature]) – add features to the map

drawFeature (OpenLayers.Feature, OpenLayers.Style) – draw feature
with specified style
onFeatureInsert, preFeatureInsert – empty methods called on
specified events, which can be redefined by the user

The vector layer is used for displaying the vector features in the map canvas. They are use for other tools, like editing, area and length measurements.

Example: add layers to map

Create new map and add several layers, see 02_layers.html.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>OpenLayers Layers Example</title>
    <script src="http://openlayers.org/api/OpenLayers.js"></script>
    <script type="text/javascript">
    </script>
  </head>
  <body onload="init()">
    <h1>Second OpenLayer example</h1>

    <div id="map" style="width:500px;height:500px"></div>
  </body>
</html>

Add map

1
2
3
4
5
6
7
            map = new OpenLayers.Map('map', {
                    scales: [2000000,1000000,500000,200000,100000,50000,20000,10000,5000,2000,1000,500],
                    maxExtent: new OpenLayers.Bounds(-905000,-1230000,-400000,-900000),
                    units:"m",
                    projection: "epsg:102067",
                    maxResolution: "auto"
                });

Create and add WMS layer and vector layer

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
            var wmsLayer = new OpenLayers.Layer.WMS(
                "OpenLayers WMS",
                "http://bnhelp.cz/ows/crtopo2",
                {layers: 'les'},
                {displayInLayerSwitcher:true}
            );

            var vlayer = new OpenLayers.Layer.Vector("Vector layer");

            map.addLayers([wmsLayer, vlayer]);

Set map center

1
2
3
            if (!map.getCenter()) {
                map.zoomToMaxExtent();
            }

Create vector feature, add to vector layer

1
2
3
4
5
6
            var lineGeometry = new OpenLayers.Geometry.LineString([
                    new OpenLayers.Geometry.Point(-905000,-1230000),
                    new OpenLayers.Geometry.Point(-400000,-900000)
                    ]);
            var lineFeature = new OpenLayers.Feature.Vector(lineGeometry);
            vlayer.addFeatures([lineFeature]);

All together:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
        function init(){
            // let's do more complicated map object
            map = new OpenLayers.Map('map', {
                    scales: [2000000,1000000,500000,200000,100000,50000,20000,10000,5000,2000,1000,500],
                    maxExtent: new OpenLayers.Bounds(-905000,-1230000,-400000,-900000),
                    units:"m",
                    projection: "epsg:102067",
                    maxResolution: "auto"
                });

            var wmsLayer = new OpenLayers.Layer.WMS(
                "OpenLayers WMS",
                "http://bnhelp.cz/ows/crtopo2",
                {layers: 'les'},
                {displayInLayerSwitcher:true}
            );

            var vlayer = new OpenLayers.Layer.Vector("Vector layer");

            map.addLayers([wmsLayer, vlayer]);

            if (!map.getCenter()) {
                map.zoomToMaxExtent();
            }

            // create feature, add to vector layer
            var lineGeometry = new OpenLayers.Geometry.LineString([
                    new OpenLayers.Geometry.Point(-905000,-1230000),
                    new OpenLayers.Geometry.Point(-400000,-900000)
                    ]);
            var lineFeature = new OpenLayers.Feature.Vector(lineGeometry);
            vlayer.addFeatures([lineFeature]);
        }

Main Menu


Table Of Contents

Previous topic

Map object

Next topic

Special types of vector layers

This Page