CODEWITHSUNDEEP
mapsopenlayersopenlayers-3arcgis
Ivan Corcoles
Ivan Corcoles

Reputation: 21

OpenLayers 3 ArcGIS Cache Server Local Files

Some days ago I did an ArcGISCache visor with OpenLayers 2.12 with some tiles in this folder and file format:

_alllayers\L04\R00000009\C00000a07.png

This means that my tiles are inside "_alllayers" folder and then inside other folders that means Zoom Level (L00,L01...L21). Inside them i have some other folders with their name like: "R00000009" and then inside those folders I have the images named like: "C00000a07.png".

When I did the visor for OpenLayers 2.12 or OpenLayers 2.14 I did it well and works right. But when I have tried to do the same with OpenLayers 3, it doesn't work.

OpenLayers 2.12 / OpenLayers 2.14

<!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">
    <script src="http://maps.google.com/maps/api/js?v=3&amp;sensor=false"></script>
    <meta name="apple-mobile-web-app-capable" content="yes">
    <title>OpenLayers</title>
    <style>
    html, body, #map {
            margin: 0;
            width: 100%;
            height: 100%;
        }

</style>
<script src="lib/OpenLayers.2.14.js"></script>
<script>
    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" : -20037700, 
                  "y" : 30241100
                }, 
                "spatialReference" : {
                  "wkid" : 102100
                }, 
                "lods" : [
                    {'level' : 0, 'resolution' : 156543.03403606807, 'scale' : 591657528},
                    {'level' : 1, 'resolution' : 78271.517018034036, 'scale' : 295828764},
                    {'level' : 2, 'resolution' : 39135.758509017018, 'scale' : 147914382},
                    {'level' : 3, 'resolution' : 19567.879254508509, 'scale' : 73957191},
                    {'level' : 4, 'resolution' : 9783.9394949623238, 'scale' : 36978595},
                    {'level' : 5, 'resolution' : 4891.9698797730935, 'scale' : 18489298},
                    {'level' : 6, 'resolution' : 2445.9849398865467, 'scale' : 9244649},
                    {'level' : 7, 'resolution' : 1222.992337651342, 'scale' : 4622324},
                    {'level' : 8, 'resolution' : 611.49616882567102, 'scale' : 2311162},
                    {'level' : 9, 'resolution' : 305.74808441283551, 'scale' : 1155581},
                    {'level' : 10, 'resolution' : 152.87417449834899, 'scale' : 577791},
                    {'level' : 11, 'resolution' : 76.436954957243259, 'scale' : 288895},
                    {'level' : 12, 'resolution' : 38.218609770552874, 'scale' : 144448},
                    {'level' : 13, 'resolution' : 19.109304885276437, 'scale' : 72224},
                    {'level' : 14, 'resolution' : 9.5546524426382184, 'scale' : 36112},
                    {'level' : 15, 'resolution' : 4.7773262213191092, 'scale' : 18056},
                    {'level' : 16, 'resolution' : 2.3886631106595546, 'scale' : 9028},
                    {'level' : 17, 'resolution' : 1.1943315553297773, 'scale' : 4514},
                    {'level' : 18, 'resolution' : 0.59716577766488865, 'scale' : 2257},
                    {'level' : 19, 'resolution' : 0.2984505969011938, 'scale' : 1128},
                    {'level' : 20, 'resolution' : 0.1492252984505969, 'scale' : 564},
                    {'level' : 21, 'resolution' : 0.061383456100245537, 'scale' : 282}
                ]
              }, 
              "initialExtent" : {
                "xmin" : -20037507.0671618, 
                "ymin" : -20037507.0671618, 
                "xmax" : 20037507.0671618, 
                "ymax" : 20037507.0671619, 
                "spatialReference" : {
                  "wkid" : 102100
                }
              }, 
              "fullExtent" : {
                "xmin" : -20037507.0671618, 
                "ymin" : -20037507.0671618, 
                "xmax" : 20037507.0671618, 
                "ymax" : 20037507.0671619, 
                "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() {
        var maxExtent = new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34);

        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://MY_IP:MY_PORT/MY_FOLDER/Layers/_alllayers", {
                    isBaseLayer: false,
                    useArcGISServer: false,                      
                    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
                });

        testLayer = new OpenLayers.Layer.Google(
            "Google Streets",
            {'sphericalMercator': true, numZoomLevels: 21}
        );

        map.addLayers([cacheLayer, testLayer]);

        map.addControl(new OpenLayers.Control.LayerSwitcher());
        map.addControl( new OpenLayers.Control.MousePosition() );

        map.zoomToExtent(new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34));
    }
    </script>
  </head>
  <body onload="init()">
        <div id="map"></div>
      </body>
    </html>

As I said, this works fine. But when I try to do the same at OpenLayers 3, I can't. I don't know why is asking for the images like there is a service.

OpenLayers 3

<!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">
    <script src="http://maps.google.com/maps/api/js?v=3&amp;sensor=false"></script>
    <meta name="apple-mobile-web-app-capable" content="yes">
    <title>OpenLayers</title>
    <style>
    html, body, #map {
            margin: 0;
            width: 100%;
            height: 100%;
        }

    </style>
    <script src="lib/OpenLayers.3.js"></script>
<script>
    function init(){
        var url = 'http://MY_IP:MY_PORT/MY_FOLDER/Layers/_alllayers';

        var layers = [
            new ol.layer.Tile({
                source: new ol.source.OSM()
            }),
            new ol.layer.Tile({
                extent: [-20037507.0671618,-20037507.0671618,20037507.0671618,20037507.0671619],
                source: new ol.source.TileArcGISRest({
                    url: url
                })
            })
        ];

        var map = new ol.Map({
            layers: layers,
            target: 'map',
            view: new ol.View({
                center: [-20037700, 30241100],
                zoom: 1
            })
        });
    }
    </script>
  </head>
  <body onload="init()">
    <div id="map"></div>
  </body>
</html>

When I try to load this OpenLayers 3 visor, I can see in the console some 404 error and this is the type of URL that it tries to find:

http://MY_IP:MY_PORT/MY_FOLDER/Layers/_alllayers/?F=image&FORMAT=PNG32&TRANSPARENT=true&SIZE=256%2C256&BBOX=-20037508.342789244%2C0%2C0%2C20037508.342789244&BBOXSR=3857&IMAGESR=3857&DPI=90

Pretty Print

http://MY_IP:MY_PORT/MY_FOLDER/Layers/_alllayers/?F=image
&FORMAT=PNG32
&TRANSPARENT=true
&SIZE=256%2C256
&BBOX=-20037508.342789244%2C0%2C0%2C20037508.342789244
&BBOXSR=3857
&IMAGESR=3857
&DPI=90

So, my questions are:

- Why OpenLayers 3 is asking for the images (tiles) like it was a Service behind?

- Hoy can I use my tiles in OpenLayers 3?

I have tried to change the URL with this patterns:

http://MY_IP:MY_PORT/MY_FOLDER/Layers/_alllayers/ImageServer
http://MY_IP:MY_PORT/MY_FOLDER/Layers/_alllayers/ImageServer/export
http://MY_IP:MY_PORT/MY_FOLDER/Layers/_alllayers/Tiles/{z}/{x}/{y}

Edit:

Finally I have solved! I hava made in Java a program that converts all those folders and pictures names.

I was trying to understand the pattern that the names of folders and images has, and finally I realized that the first letter of the folders meant the rows ( R -> row) and the first letter of the images meant columns ( C -> column).

Once you have removed the first letter , just needed to convert that number Hexadecimal to Decimal and save the file or folder with that new name.

If someones need some help with this, I will happy to help.

Upvotes: 2

Views: 1416

Answers (2)

Ernst-Jan van der Laan
Ernst-Jan van der Laan

Reputation: 11

@ahocevar solutions works. But I had to swap the x and y in the URL.

url: 'http://MY_IP:MY_PORT/MY_FOLDER/Layers/_alllayers/L{z}/R{y}/C{x}.png'

This makes sense, because y would map to rows and x to colums.

Upvotes: 0

ahocevar
ahocevar

Reputation: 5648

ol.source.ArcGISRest is for ArcGIS server tile services. For ArcGISCache, you will want to use an ol.source.TileImage or ol.source.XYZ with a custom tileUrlFunction or tileLoadFunction. I prefer the latter, because then I do not have to convert tile coordinates. Something like

function replacer(match, letter, value) {
  var str = Number(value).toString(letter == 'L' ? 10 : 16);
  var len = letter == 'L' ? 2 : 8;
  while (str.length < len) {
    str = '0' + str;
  }
  return letter + str;
}

var source = new ol.source.XYZ({
  url: 'http://MY_IP:MY_PORT/MY_FOLDER/Layers/_alllayers/L{z}/R{x}/C{y}.png',
  tileLoadFunction: function(image, url) {
    image.getImage().src = url
        .replace(/(L)([0-9]+)/, replacer)
        .replace(/(R)([0-9]+)/, replacer)
        .replace(/(C)([0-9]+)/, replacer);
  }
});

Upvotes: 1

Related Questions