4

I've produced with mapnik my own tiles with EPSG:31256 on a shapefile. I've structured the tiles in a OSM-like tree: zoom/x/y.png, with zoom from 0 to 2 and, x y starting from 1:

tiles
  ├── 0
  │   └── 1
  │       └── 1.png
  ├── 1
  │   ├── 2
  │   │   ├── 2.png
  │   │   └── 3.png
  │   └── 3
  │       ├── 2.png
  │       └── 3.png
  └── 2
      ├── 4
      │   ├── 4.png
      │   ├── 5.png
      │   ├── 6.png
      │   └── 7.png
      ├── 5
      │   ├── 4.png
      │   ├── 5.png
      │   ├── 6.png
      │   └── 7.png
      ├── 6
      │   ├── 4.png
      │   ├── 5.png
      │   ├── 6.png
      │   └── 7.png
      └── 7
          ├── 4.png
          ├── 5.png
          ├── 6.png
          └── 7.png

Tiles are 256x256 pixels and the tile at zoom 0 covers the entire shape, which is 7500x7500 meters (I used this dimension to set up scales). From zoom 1, tiles are splitted in 2 and so on. Map div element is 512x512 pixels. To display tiles, I would like to use OpenLayers XYZ layer, with my own get_url function, as described here:

function create_map () {
    Proj4js.defs["EPSG:31256"] = "+proj=tmerc +lat_0=0 +lon_0=16.33333333333333 +k=1 +x_0=0 +y_0=-5000000 +ellps=bessel +towgs84=577.326,90.129,463.919,5.137,1.474,5.297,2.4232 +units=m +no_defs "

    var proj = new OpenLayers.Projection("EPSG:31256");
    var bounds = OpenLayers.Bounds(5000,216250,12500,223750);
    var minZoom = 0;
    var maxZoom = 2;

    var map = new OpenLayers.Map({
        div: "map",
        allOverlays: true,
        projection: proj,
        maxExtent: bounds,
        allowSelection: true,
        scales: [7500, 3750, 1875],
        units: 'm',
        controls: [new OpenLayers.Control.PanZoomBar(),
                   new OpenLayers.Control.Navigation()]
    });

    var layer = new OpenLayers.Layer.XYZ(
        "my_tile_layer",
         '/tiles/',
        {
            maxZoomLevel: maxZoom,
            minZoomLevel: minZoom,
            getURL: get_my_url
        }
    );
    map.addLayer(layer);

    var center = bounds.getCenterLonLat();
    map.setCenter(center, minZoom);
};

function get_my_url (bounds) {
    var res = this.map.getResolution();
    // Note, I've added +1 because I do not have x and y coordinates equal to 0.
    var x = Math.round ((bounds.left - this.maxExtent.left) / (res * this.tileSize.w)+1);
    var y = Math.round ((this.maxExtent.top - bounds.top) / (res * this.tileSize.h)+1);
    var z = this.map.getZoom();

    var path = z + "/" + x + "/" + y + ".png";
    var url = this.url;
    if (url instanceof Array) {
        url = this.selectUrl(path, url);
    }
    return url + path;
}

My problem is that tile retrieval is wrong: at zoom 0, I correctly load 0/1/1.png, but it is positioned at the extreme right of the map: I had to pan it to make it visible. I do not understand why, because my center variable is correctly set to (8750, 220000). If I zoom in I see nothing and I get not existent tile names such as 1/1/1.png. Could you please help me?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.