ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

adding ArcGIS (AGS) Tile Cache Layer, great contribution from Azavea, thanks, p=dmiddlecamp, r=me (closes #3030)

Browse Source 
git-svn-id: http://svn.openlayers.org/trunk/openlayers@11693 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf
This commit is contained in:
bartvde
2011-03-11 00:54:25 +00:00
parent c0ae33e457
commit 3ce239208f
8 changed files with 1452 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

219
examples/arcgiscache_ags.html Normal file
View File

@@ -0,0 +1,219 @@
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>OpenLayers ArcGIS Cache Example (MapServer Access)</title>
<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<61> and Multinet<65> 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<61> and Multinet<65> 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>

106
examples/arcgiscache_direct.html Normal file
View File

@@ -0,0 +1,106 @@
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>ArcGIS Server Map Cache Example (Direct Access)</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" type="text/javascript"></script>
<script src="../lib/OpenLayers/Layer/ArcGISCache.js" type="text/javascript"></script>
<script type="text/javascript">
/* First 4 variables extracted from conf.xml file */
/* Tile layers & map MUST have same projection */
var proj='EPSG:26915';
/* Layer can also accept serverResolutions array
* to deal with situation in which layer resolution array & map resolution
* array are out of sync*/
var mapResolutions = [33.0729828126323,16.9333672000677,8.46668360003387,4.23334180001693,2.11667090000847,1.05833545000423];
/* For this example this next line is not really needed, 256x256 is default.
* However, you would need to change this if your layer had different tile sizes */
var tileSize = new OpenLayers.Size(256,256);
/* Tile Origin is required unless it is the same as the implicit map origin
* which can be affected by several variables including maxExtent for map or base layer */
var agsTileOrigin = new OpenLayers.LonLat(-5120900,9998100);
/* This can really be any valid bounds that the map would reasonably be within */
/* var mapExtent = new OpenLayers.Bounds(293449.454286,4307691.661132,314827.830376,4323381.484178); */
var mapExtent = new OpenLayers.Bounds(289310.8204,4300021.937,314710.8712,4325421.988);
var aerialsUrl = 'http://serverx.esri.com/arcgiscache/dgaerials/Layers/_alllayers';
var roadsUrl = 'http://serverx.esri.com/arcgiscache/DG_County_roads_yesA_backgroundDark/Layers/_alllayers';
var map;
function init(){
map = new OpenLayers.Map('map', {
maxExtent:mapExtent,
controls: [
new OpenLayers.Control.Navigation(),
new OpenLayers.Control.LayerSwitcher(),
new OpenLayers.Control.PanZoomBar(),
new OpenLayers.Control.MousePosition()]
});
var baseLayer = new OpenLayers.Layer.ArcGISCache('Aerials', aerialsUrl, {
tileOrigin: agsTileOrigin,
resolutions: mapResolutions,
sphericalMercator: true,
maxExtent: mapExtent,
useArcGISServer: false,
isBaseLayer: true,
type: 'jpg',
projection: proj
});
var overlayLayer = new OpenLayers.Layer.ArcGISCache('Roads', roadsUrl, {
tileOrigin: agsTileOrigin,
resolutions: mapResolutions,
sphericalMercator: true,
maxExtent: mapExtent,
useArcGISServer: false,
isBaseLayer: false,
projection: proj
});
map.addLayers([baseLayer, overlayLayer]);
//map.zoomToExtent(new OpenLayers.Bounds(295892.34, 4308521.69, 312825.71, 4316988.37));
map.zoomToExtent(new OpenLayers.Bounds(-8341644, 4711236, -8339198, 4712459));
}
</script>
</head>
<body onload="init()">
<h1 id="title">ArcGIS Server Map Cache Example (Direct Access)</h1>
<div id="tags">
</div>
<p id="shortdesc">
Demonstrates the basic initialization of the ArcGIS Cache layer using a prebuilt configuration, and direct tile access from a file store.
</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 directly
via the folder structure and HTTP. 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>It's important that you set the correct values in your layer, and these
values will differ between tile sets. You can find these values for your
layer in conf.xml at the root of your cache.
(ie. <a href="http://serverx.esri.com/arcgiscache/dgaerials/Layers/conf.xml">http://serverx.esri.com/arcgiscache/dgaerials/Layers/conf.xml</a>)</p>
<p>For fused map caches this is often http:<i>ServerName</i>/arcgiscache/<i>MapServiceName</i>/Layers <br />
For individual layer caches this is often http:<i>ServerName</i>/arcgiscache/<i>LayerName</i>/Layers </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_ags.html">prebuilt tiles from 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>

108
examples/arcgiscache_jsonp.html Normal file
View File

@@ -0,0 +1,108 @@
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>OpenLayers ArcGIS Cache Example (Autoconfigure with JSONP)</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 src="../lib/OpenLayers/Layer/ArcGISCache.js" type="text/javascript"></script>
<!-- This is to simplify making the JSONP request for this example -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
var map,
layerURL = "http://services.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer";
function init() {
var jsonp_url = layerURL + '?f=json&pretty=true&callback=?';
$.getJSON(jsonp_url, function(data) {
initMap(data);
});
}
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,
StartBounds: baseLayer.initialExtent
});
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 jQuery), 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>