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
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 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 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)
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,...])
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.
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]);
}
|