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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
|
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="stylesheet" href="openlayers/theme/default/style.css" type="text/css">
<link rel="stylesheet" href="style.css" type="text/css">
<style type="text/css">
#wmc {
width: 90%;
height: 300px;
}
/* avoid pink tiles */
.olImageLoadError {
background-color: transparent !important;
}
</style>
<script src="Firebug/firebug.js"></script>
<script src="openlayers/OpenLayers.js"></script>
<script type="text/javascript">
// increase reload attempts
OpenLayers.IMAGE_RELOAD_ATTEMPTS = 2;
var format = new OpenLayers.Format.WMC({'layerOptions': {buffer: 0}});
var doc, context, map;
function init() {
map = new OpenLayers.Map("map");
var gwc = new OpenLayers.Layer.WMS(
"Global Imagery",
"http://maps.opengeo.org/geowebcache/service/wms",
{layers: "bluemarble"}
);
var vmap = new OpenLayers.Layer.WMS(
"OpenLayers WMS",
"http://vmap0.tiles.osgeo.org/wms/vmap0",
{layers: 'basic'},
{
maxExtent: new OpenLayers.Bounds(-130, 14, -60, 55),
maxResolution: 0.1,
numZoomLevels: 4,
minResolution: 0.02
}
);
var roads = new OpenLayers.Layer.WMS(
"Transportation Network",
"http://lioapp.lrc.gov.on.ca/cubeserv/cubeserv.pl",
{layers: "na_road:CCRS", transparent: "TRUE"},
{
isBaseLayer: false,
maxExtent: new OpenLayers.Bounds(
-166.532, 4.05046, -0.206818, 70.287
),
displayInLayerSwitcher: false,
opacity: 0.6,
minScale: 32000000,
numZoomLevels: 4,
maxScale: 6200000
}
);
var nexrad = new OpenLayers.Layer.WMS(
"Radar 3:1",
"http://columbo.nrlssc.navy.mil/ogcwms/servlet/WMSServlet/AccuWeather_Maps.wms",
{layers: "3:1", transparent: "TRUE"},
{
isBaseLayer: false,
maxExtent: new OpenLayers.Bounds(
-131.029495239, 14.5628967285,
-61.0295028687, 54.562896728
),
opacity: 0.8,
singleTile: true,
maxResolution: 0.1,
numZoomLevels: 4,
minResolution: 0.02
}
);
map.addLayers([gwc, vmap, roads, nexrad]);
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.setCenter(new OpenLayers.LonLat(-95, 34.5), 4);
};
function readWMC(merge) {
var text = document.getElementById("wmc").value;
if(merge) {
try {
map = format.read(text, {map: map});
} catch(err) {
document.getElementById("wmc").value = err;
}
} else {
map.destroy();
try {
var jsonFormat = new OpenLayers.Format.JSON();
var mapOptions = jsonFormat.read(OpenLayers.Util.getElement('mapOptions').value);
map = format.read(text, {map: mapOptions});
map.addControl(new OpenLayers.Control.LayerSwitcher());
} catch(err) {
document.getElementById("wmc").value = err;
}
}
}
function writeWMC(merge) {
try {
var text = format.write(map);
document.getElementById("wmc").value = text;
} catch(err) {
document.getElementById("wmc").value = err;
}
}
</script>
</head>
<body onload="init()">
<h1 id="title">WMC Example</h1>
<div id="tags">
wmc, parser, advanced, cleanup
</div>
<p id="shortdesc">
Shows parsing of Web Map Context documents.
</p>
<div id="map" class="smallmap"></div>
<button onclick="writeWMC();">write</button><br>
<button onclick="readWMC();">read as new map</button> with the following extra map options : <input type="text" id="mapOptions" value='{"div": "map", "allOverlays": true}'/><br>
<button onclick="readWMC(true);">read and merge</button><br>
<button onclick="pasteWMC();">try with another WMC document</button><br>
<textarea id="wmc">paste WMC doc here</textarea>
<div id="docs">
<p>This is an example of parsing WMC documents. <br>
The format class has a layerOptions property, which can be used
to control the default options of the layer when it is created
by the parser.</p>
</div>
</body>
</html>
|
