summaryrefslogtreecommitdiff
path: root/misc/openlayers/examples/arcgiscache_ags.html
blob: 2b929543b40b74353c9985626d822f6e0f375d32 (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
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
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
<!DOCTYPE html>
<html>
  <head>
    <title>OpenLayers ArcGIS Cache Example (MapServer Access)</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='http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAjpkAC9ePGem0lIq5XcMiuhR_wWLPFku8Ix9i2SXYRVK3e45q1BQUd_beF8dtzKET_EteAjPdGDwqpQ'></script>
    <script src="../lib/OpenLayers.js"></script>
    <script src="../lib/OpenLayers/Layer/ArcGISCache.js" type="text/javascript"></script>
    <script type="text/javascript">
        var map, 
            cacheLayer,
            testLayer,
            //This layer requires meta data about the ArcGIS service.  Typically you should use a 
            //JSONP call to get this dynamically.  For this example, we are just going to hard-code
            //an example that we got from here (yes, it's very big):
            //    http://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer?f=json&pretty=true
            layerInfo = {
                  "currentVersion" : 10.01, 
                  "serviceDescription" : "This worldwide street map presents highway-level data for the world and street-level data for the United States, Canada, Japan, Southern Africa, and a number of countries in Europe and elsewhere. This comprehensive street map includes highways, major roads, minor roads, railways, water features, administrative boundaries, cities, parks, and landmarks, overlaid on shaded relief imagery for added context. The street map was developed by ESRI using ESRI basemap data, AND road data, USGS elevation data, and UNEP-WCMC parks and protected areas for the world, and Tele Atlas Dynamap® and Multinet® street data for North America and Europe. Coverage for street-level data in Europe includes Andorra, Austria, Belgium, Czech Republic, Denmark, France, Germany, Great Britain, Greece, Hungary, Ireland, Italy, Luxembourg, Netherlands, Northern Ireland (Belfast only), Norway, Poland, Portugal, San Marino, Slovakia, Spain, Sweden, and Switzerland. Coverage for street-level data elsewhere in the world includes China (Hong Kong only), Colombia, Egypt (Cairo only), Indonesia (Jakarta only), Japan, Mexico (Mexico City only), Russia (Moscow and St. Petersburg only), South Africa, Thailand, and Turkey (Istanbul and Ankara only). For more information on this map, visit us \u003ca href=\"http://goto.arcgisonline.com/maps/World_Street_Map \" target=\"_new\"\u003eonline\u003c/a\u003e.", 
                  "mapName" : "Layers", 
                  "description" : "This worldwide street map presents highway-level data for the world and street-level data for the United States, Canada, Japan, Southern Africa, most countries in Europe, and several other countries. This comprehensive street map includes highways, major roads, minor roads, one-way arrow indicators, railways, water features, administrative boundaries, cities, parks, and landmarks, overlaid on shaded relief imagery for added context. The map also includes building footprints for selected areas in the United States and Europe and parcel boundaries for much of the lower 48 states.\n\nThe street map was developed by ESRI using ESRI basemap data, DeLorme base map layers, AND road data, USGS elevation data, UNEP-WCMC parks and protected areas for the world, Tele Atlas Dynamap® and Multinet® street data for North America and Europe, and First American parcel data for the United States. Coverage for street-level data in Europe includes Andorra, Austria, Belgium, Czech Republic, Denmark, France, Germany, Great Britain, Greece, Hungary, Ireland, Italy, Luxembourg, Netherlands, Norway, Poland, Portugal, San Marino, Slovakia, Spain, Sweden, and Switzerland. Coverage for street-level data elsewhere in the world includes China (Hong Kong only), Colombia, Egypt (Cairo only), Indonesia (Jakarta only), Japan, Mexico, Russia, South Africa, Thailand, and Turkey (Istanbul and Ankara only). For more information on this map, visit us online at http://goto.arcgisonline.com/maps/World_Street_Map\n", 
                  "copyrightText" : "Sources: ESRI, DeLorme, AND, Tele Atlas, First American, ESRI Japan, UNEP-WCMC, USGS, METI, ESRI Hong Kong, ESRI Thailand, Procalculo Prosis", 
                  "layers" : [
                    {
                      "id" : 0, 
                      "name" : "World Street Map", 
                      "parentLayerId" : -1, 
                      "defaultVisibility" : true, 
                      "subLayerIds" : null, 
                      "minScale" : 0, 
                      "maxScale" : 0
                    }
                  ], 
                  "tables" : [
                    
                  ], 
                  "spatialReference" : {
                    "wkid" : 102100
                  }, 
                  "singleFusedMapCache" : true, 
                  "tileInfo" : {
                    "rows" : 256, 
                    "cols" : 256, 
                    "dpi" : 96, 
                    "format" : "JPEG", 
                    "compressionQuality" : 90, 
                    "origin" : {
                      "x" : -20037508.342787, 
                      "y" : 20037508.342787
                    }, 
                    "spatialReference" : {
                      "wkid" : 102100
                    }, 
                    "lods" : [
                      {"level" : 0, "resolution" : 156543.033928, "scale" : 591657527.591555}, 
                      {"level" : 1, "resolution" : 78271.5169639999, "scale" : 295828763.795777}, 
                      {"level" : 2, "resolution" : 39135.7584820001, "scale" : 147914381.897889}, 
                      {"level" : 3, "resolution" : 19567.8792409999, "scale" : 73957190.948944}, 
                      {"level" : 4, "resolution" : 9783.93962049996, "scale" : 36978595.474472}, 
                      {"level" : 5, "resolution" : 4891.96981024998, "scale" : 18489297.737236}, 
                      {"level" : 6, "resolution" : 2445.98490512499, "scale" : 9244648.868618}, 
                      {"level" : 7, "resolution" : 1222.99245256249, "scale" : 4622324.434309}, 
                      {"level" : 8, "resolution" : 611.49622628138, "scale" : 2311162.217155}, 
                      {"level" : 9, "resolution" : 305.748113140558, "scale" : 1155581.108577}, 
                      {"level" : 10, "resolution" : 152.874056570411, "scale" : 577790.554289}, 
                      {"level" : 11, "resolution" : 76.4370282850732, "scale" : 288895.277144}, 
                      {"level" : 12, "resolution" : 38.2185141425366, "scale" : 144447.638572}, 
                      {"level" : 13, "resolution" : 19.1092570712683, "scale" : 72223.819286}, 
                      {"level" : 14, "resolution" : 9.55462853563415, "scale" : 36111.909643}, 
                      {"level" : 15, "resolution" : 4.77731426794937, "scale" : 18055.954822}, 
                      {"level" : 16, "resolution" : 2.38865713397468, "scale" : 9027.977411}, 
                      {"level" : 17, "resolution" : 1.19432856685505, "scale" : 4513.988705}
                    ]
                  }, 
                  "initialExtent" : {
                    "xmin" : -20037507.0671618, 
                    "ymin" : -20037507.0671618, 
                    "xmax" : 20037507.0671618, 
                    "ymax" : 20037507.0671619, 
                    "spatialReference" : {
                      "wkid" : 102100
                    }
                  }, 
                  "fullExtent" : {
                    "xmin" : -20037507.0671618, 
                    "ymin" : -19971868.8804086, 
                    "xmax" : 20037507.0671618, 
                    "ymax" : 19971868.8804086, 
                    "spatialReference" : {
                      "wkid" : 102100
                    }
                  }, 
                  "units" : "esriMeters", 
                  "supportedImageFormatTypes" : "PNG24,PNG,JPG,DIB,TIFF,EMF,PS,PDF,GIF,SVG,SVGZ,AI,BMP", 
                  "documentInfo" : {
                    "Title" : "World Street Map", 
                    "Author" : "ESRI", 
                    "Comments" : "", 
                    "Subject" : "streets, highways, major roads, railways, water features, administrative boundaries, cities, parks, protected areas, landmarks ", 
                    "Category" : "transportation(Transportation Networks) ", 
                    "Keywords" : "World, Global, 2009, Japan, UNEP-WCMC", 
                    "Credits" : ""
                  }, 
                  "capabilities" : "Map"
                };

        function init(){
            //The max extent for spherical mercator
            var maxExtent = new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34);
            
            //Max extent from layerInfo above            
            var layerMaxExtent = new OpenLayers.Bounds(
                layerInfo.fullExtent.xmin, 
                layerInfo.fullExtent.ymin, 
                layerInfo.fullExtent.xmax, 
                layerInfo.fullExtent.ymax  
            );
            
            var resolutions = [];
            for (var i=0; i<layerInfo.tileInfo.lods.length; i++) {
                resolutions.push(layerInfo.tileInfo.lods[i].resolution);
            }
            
            map = new OpenLayers.Map('map', {
                maxExtent: maxExtent,
                StartBounds: layerMaxExtent,
                units: (layerInfo.units == "esriFeet") ? 'ft' : 'm',
                resolutions: resolutions,
                tileSize: new OpenLayers.Size(layerInfo.tileInfo.width, layerInfo.tileInfo.height),                
                projection: 'EPSG:' + layerInfo.spatialReference.wkid
            });
            
            
            
            cacheLayer = new OpenLayers.Layer.ArcGISCache( "AGSCache",
                    "http://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer", {
                        isBaseLayer: true,

                        //From layerInfo above                        
                        resolutions: resolutions,                        
                        tileSize: new OpenLayers.Size(layerInfo.tileInfo.cols, layerInfo.tileInfo.rows),                        
                        tileOrigin: new OpenLayers.LonLat(layerInfo.tileInfo.origin.x , layerInfo.tileInfo.origin.y),                        
                        maxExtent: layerMaxExtent,                        
                        projection: 'EPSG:' + layerInfo.spatialReference.wkid
                    });

            
            // create Google Mercator layers
            testLayer = new OpenLayers.Layer.Google(
                "Google Streets",
                {'sphericalMercator': true}
            );
            
            map.addLayers([testLayer, cacheLayer]);
            
            map.addControl(new OpenLayers.Control.LayerSwitcher());
            map.addControl( new OpenLayers.Control.MousePosition() );
            
            map.zoomToExtent(new OpenLayers.Bounds(-8341644, 4711236, -8339198, 4712459));
        }
    </script>
  </head>
  <body onload="init()">
      <h1 id="title">OpenLayers ArcGIS Cache Example (MapServer Access)</h1>

    <div id="tags">
        arcgis, arcgiscache, cache, tms
    </div>

    <p id="shortdesc">
        Demonstrates the basic initialization of the ArcGIS Cache layer using a prebuilt configuration, and standard tile access.
    </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 through 
        an AGS MapServer.  Toggle the visibility of the AGS layer to
        demonstrate how the two maps are lined up correctly.</p>
        
         <h2>Notes on this layer</h2>
        <p>A few attempts have been made at this kind of layer before. See 
        <a href="http://trac.osgeo.org/openlayers/ticket/1967">here</a> and 
        <a href="http://trac.osgeo.org/openlayers/browser/sandbox/tschaub/arcgiscache/lib/OpenLayers/Layer/ArcGISCache.js">here</a>.
        A problem the users encounter is that the tiles seem to "jump around".
        This is due to the fact that the max extent for the cached layer actually
        changes at each zoom level due to the way these caches are constructed.
        We have attempted to use the resolutions, tile size, and tile origin
        from the cache meta data to make the appropriate changes to the max extent
        of the tile to compensate for this behavior.</p>
        You will need to know:
        <ul>
            <li>Max Extent: The max extent of the layer</li>
            <li>Resolutions: An array of resolutions, one for each zoom level</li>
            <li>Tile Origin: The location of the tile origin for the cache in the upper left.</li>
            <li>Tile Size: The size of each tile in the cache. Commonly 256 x 256</li>
        </ul>
        <p>It's important that you set the correct values in your layer, and these
        values will differ from layer to layer. You can find these values for your 
        layer in a metadata page in ArcGIS Server. 
        (ie. <a href="http://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer">http://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer</a>)</p>
        <ul>
            <li>Max Extent: Full Extent</li>
            <li>Resolutions: Tile Info -> Levels of Detail -> Resolution</li>
            <li>Tile Origin: Origin -> X,Y</li>
            <li>Tile Size: Tile Info -> Height,Width</li>
        </ul>
        
        <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> It is also  possible to let this
          <a href="arcgiscache_jsonp.html">layer 'auto-configure' itself using the
          capabilities json object from the server itself when using a live ArcGIS server.</a>
        </p>
    </div>
  </body>
</html>