/
animated_panning.html
98 lines (88 loc) · 3.63 KB
/
animated_panning.html
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
<!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>Animated Panning of the Map via map.panTo</title>
<link rel="stylesheet" href="../theme/default/style.css" type="text/css">
<link rel="stylesheet" href="style.css" type="text/css">
<script src="../lib/OpenLayers.js"></script>
<script type="text/javascript">
var map, layer, running = false;
OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, {
defaultHandlerOptions: {
'single': true,
'delay': 200
},
initialize: function(options) {
this.handlerOptions = OpenLayers.Util.extend(
{}, this.defaultHandlerOptions
);
OpenLayers.Control.prototype.initialize.apply(
this, arguments
);
this.handler = new OpenLayers.Handler.Click(
this, {
'click': this.onClick
}, this.handlerOptions
);
},
onClick: function(evt) {
map.panTo(map.getLonLatFromPixel(evt.xy));
}
});
function init(){
map = new OpenLayers.Map('map', {numZoomLevels: 2});
layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://vmap0.tiles.osgeo.org/wms/vmap0", {layers: 'basic'} );
map.addLayer(layer);
map.zoomToMaxExtent();
var click = new OpenLayers.Control.Click();
map.addControl(click);
click.activate();
map.addControl(new OpenLayers.Control.OverviewMap());
map2 = new OpenLayers.Map('map2', {'panMethod': null, numZoomLevels: 2} );
layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://vmap0.tiles.osgeo.org/wms/vmap0", {layers: 'basic'} );
map2.addLayer(layer);
map2.zoomToMaxExtent();
}
function setCenterInterval() {
if (!running) {
setCenter();
running = setInterval('setCenter()', 500);
} else {
clearInterval(running);
running = false;
}
}
function setCenter() {
var lon = Math.random() * 360 - 180;
var lat = Math.random() * 180 - 90;
var lonlat = new OpenLayers.LonLat(lon, lat);
map.panTo(lonlat);
}
</script>
</head>
<body onload="init()">
<h1 id="title">map.panTo Example</h1>
<div id="tags">
panning, animation, effect, smooth, panMethod
</div>
<div id="shortdesc">Show animated panning effects in the map</div>
<div id="map" class="smallmap"></div>
<div id="docs">
<p>This is an example of transition effects. If the new random center is in the current extent, the map will pan smoothly. <br>
The random selection will continue until you press it again. Additionally, you can single click in the map to pan smoothly
to that area, or use the pan control to pan smoothly.
</p>
</div>
<button onclick="setCenterInterval()">Start/stop random recenter</button>
<div id="map2" class="smallmap"></div>
<div>
<p>To turn off Animated Panning, create a map with an panMethod set to
null. </p>
</div>
</body>
</html>