blob: c32c7c1913739b659b6eedd2d956595e21e40b80 (
plain)
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
|
<!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 Client Zoom Example</title>
<link rel="stylesheet" href="../theme/default/style.css" type="text/css"/>
<link rel="stylesheet" href="style.css" type="text/css">
<script src="../lib/Firebug/firebug.js"></script>
<script src="../lib/OpenLayers.js"></script>
<script src="clientzoom.js"></script>
<style>
.olControlAttribution {
bottom: 5px;
}
#map {
width: 600px;
height: 400px;
}
</style>
</head>
<body onload="init();">
<h1 id="title">Client Zoom</h1>
<div id="tags">
client zoom continuous zooming
</div>
<p id="shortdesc">
This example demonstrates the <strong>"client zoom"</strong>
functionality, where OpenLayers stretches the layer div when the
resolution is not supported by that layer's tile service.
</p>
<div id="map"></div>
<div id="docs">
<p>
The map of this example is configured with 22 resolutions, while
the OSM tile server supports the first 19 resolutions only. When
the zoom level is 19, 20 or 21 "client zoom" is applied to the OSM
layer, i.e. the OSM layer div is stretched as necessary. The map's
initial zoom is 18. So if you zoom in using the zoom bar's "+"
button you'll effectively trigger "client zoom".
</p>
<p>
For demonstration purpose the map of this example has
<code>fractionalZoom</code> set to true. So "client zoom" also
applies if you choose arbitrary zoom levels using the slider of the
zoom bar, or shift-drag boxes to zoom to arbitrary extents.
"client zoom" therefore allows continous zooming for tiled layers.
</p>
<p>
Enabling "client zoom" on a layer is done by passing
<code>serverResolutions</code> to the layer constructor.
<code>serverResolutions</code> is the list of resolutions supported
by the tile service. See the <a href="clientzoom.js"
target="_blank"> clientzoom.js source</a>.
</p>
</div>
</body>
</html>
|
