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
|
<!DOCTYPE html>
<html>
<head>
<title>OpenLayers ArcGIS Cache Example (Autoconfigure with JSONP)</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<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,
layerURL = "http://services.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer";
function init() {
var jsonp = new OpenLayers.Protocol.Script();
jsonp.createRequest(layerURL, {
f: 'json',
pretty: 'true'
}, initMap);
}
function initMap(layerInfo){
/*
* The initialize function in this layer has the ability to automatically configure
* itself if given the JSON capabilities object from the ArcGIS map server.
* This hugely simplifies setting up a new layer, and switching basemaps when using this technique.
*
* see the 'initialize' function in ArcGISCache.js, or
* see the other two ArcGISCache.js examples for direct manual configuration options
*
*/
var baseLayer = new OpenLayers.Layer.ArcGISCache("AGSCache", layerURL, {
layerInfo: layerInfo
});
/*
* Make sure our baselayer and our map are synced up
*/
map = new OpenLayers.Map('map', {
maxExtent: baseLayer.maxExtent,
units: baseLayer.units,
resolutions: baseLayer.resolutions,
numZoomLevels: baseLayer.numZoomLevels,
tileSize: baseLayer.tileSize,
displayProjection: baseLayer.displayProjection
});
map.addLayers([baseLayer]);
//overlay test layer
//http://openlayers.org/dev/examples/web-mercator.html
var wms = new OpenLayers.Layer.WMS("Highways",
"http://sampleserver1.arcgisonline.com/arcgis/services/Specialty/ESRI_StateCityHighway_USA/MapServer/WMSServer",
{layers: "2", format: "image/gif", transparent: "true"},
{ isBaseLayer: false, wrapDateLine: false }
);
map.addLayers([wms]);
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.addControl(new OpenLayers.Control.MousePosition() );
//map.zoomToExtent(new OpenLayers.Bounds(-8341644, 4711236, -8339198, 4712459));
map.zoomToExtent(new OpenLayers.Bounds(-8725663.6225564, 4683718.6735907, -8099491.4868444, 4996804.7414467));
}
</script>
</head>
<body onload="init()">
<h1 id="title">OpenLayers ArcGIS Cache Example (Autoconfigure with JSONP)</h1>
<div id="tags">
arcgis, arcgiscache, cache, tms, jsonp
</div>
<p id="shortdesc">
Demonstrates the basic initialization of the ArcGIS Cache layer by using the server capabilities object.
</p>
<div id="map" class="smallmap"></div>
<div id="docs">
<p>This example demonstrates using the ArcGISCache layer for
accessing ESRI's ArcGIS Server (AGS) Map Cache tiles normally through
a live AGS MapServer. Toggle the visibility of the overlay to
demonstrate how the two layers are lined up correctly.</p>
<h2>Notes on this Layer</h2>
<p>
This method automatically configures the layer using the capabilities object
generated by the server itself. This page shows how to construct the url for the server capabilities object,
retrieve it using JSONP, and pass it in during construction. Note that in this case,
the layer is constructed before the map. This approach greatly simplifies the
configuration of your map, and works best when all your tiles / overlays are similarly laid out.
If you are using a live AGS map server for your layer, it can be helpful to check your
server configuration using this technique before trying one of the other examples for this layer.
</p>
<h2> Other Examples </h2>
<p>This is one of three examples for this layer. You can also configure this
layer to use <a href="arcgiscache_direct.html">prebuilt tiles in a file store (not a live server).</a>
As well a retrieve <a href="arcgiscache_ags.html">tiles from a live server.</a>
</p>
</div>
</body>
</html>
|
