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
|
<!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">
<title>OpenLayers: Overlay layer extents crossing the dateline</title>
<link rel="stylesheet" href="../../theme/default/style.css" type="text/css">
<link rel="stylesheet" href="../../examples/style.css" type="text/css">
<style type="text/css">
#map {
height: 512px;
}
</style>
<script src="../../lib/OpenLayers.js"></script>
<script type="text/javascript">
// make map available for easy debugging
var map;
function init(){
map = new OpenLayers.Map('map');
var base = new OpenLayers.Layer.WMS("marble",
"http://demo.opengeo.org/geoserver/wms",
{layers: "topp:naturalearth"},
{wrapDateLine: true}
);
var extent = new OpenLayers.Bounds(142.3828125,-70.902270266175,233.6171875,-12.039326531729);
var wms = new OpenLayers.Layer.WMS( "world",
"http://demo.opengeo.org/geoserver/wms",
{layers: 'world', transparent: true},
{maxExtent: extent}
);
var vector = new OpenLayers.Layer.Vector();
vector.addFeatures([
new OpenLayers.Feature.Vector(extent.toGeometry())
]);
map.addLayers([base, wms, vector]);
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.zoomToExtent(extent);
}
</script>
</head>
<body onload="init()">
<h1 id="title">OpenLayers overlays crossing the dateline test</h1>
<p id="shortdesc">
The overlay has an extent smaller than the world extent, but exceeds
the world extent. The base layer is configured with wrapDateLine set to
true. The area inside the orange rectangle should always contain tiles
from the world layer, regardless of the zoom level.
</p>
<div id="map" class="smallmap"></div>
</body>
</html>
|
