CODEWITHSUNDEEP
openlayersleaflet
stofl
stofl

Reputation: 2982

Custom tiles in local CRS without projection

Is it possible, to use openlayers 2 or 3 or leaflet with custom map tiles in a local CRS?

I have a map/plan of a very small area and I have a local CRS. Local CRS means: I have just x and y coordinates and don't care about projections. Each Coordinate can directly be mappend on the card by a simple calculation: PixelX = x * factorX + offsetX. Now I want to tell a web map application: Show the map tiles as base layer and take the upper left pixel of the first tile (0/0) as x=5126 and Y=24 and take the lower left pixel of the last tile at zoom level z as x=7256 and y=2344 (or something similar). How can I achieve this?

As far as I understand it now, I need any type of projection, but I don't need any projection in my project (in this small area, the world is flat). And I don't understand, how to tell OpenLayers (or maybe Leaflet, if OpenLayers doesn't support that): Here is my local CRS and the tiles have to be put into this CRS that way...

Upvotes: 0

Views: 2267

Answers (2)

tremby
tremby

Reputation: 10069

I had to do something similar. This was my solution in Openlayers 3. My tile set has tiles of 256x256 pixels. There are 4x4 of these at zoom level 2, 8x8 at zoom level 3 and 16x16 at zoom level 4. The following loads these in, with coordinates matching pixel offsets from the bottom left at zoom level 2, positive being up and right.

I'm using the Zoomify projection (which is flat) but not the Zoomify layer type, since that requires JPEG tiles with a very particular naming scheme.

var mapEdge = 1024;
var tileSize = 256;

var projection = new ol.proj.Projection({
    code: 'ZOOMIFY',
    units: 'pixels',
    extent: [0, 0, mapEdge, mapEdge]
});
var projectionExtent = projection.getExtent();

var maxResolution = ol.extent.getWidth(projectionExtent) / tileSize;
var resolutions = [];
for (var z = 2; z <= 4; z++) {
    resolutions[z] = maxResolution / Math.pow(2, z);
}

var map = new ol.Map({
    target: 'map',
    layers: [new ol.layer.Tile({
        source: new ol.source.TileImage({
            tileUrlFunction: function(tileCoord, pixelRatio, projection) {
                var z = tileCoord[0];
                var x = tileCoord[1];
                var y = -tileCoord[2] - 1;
                return '/map/background/' + z + '/' + x + '/' + y + '.png';
            },
            projection: projection,
            tileGrid: new ol.tilegrid.TileGrid({
                origin: ol.extent.getTopLeft(projectionExtent),
                resolutions: resolutions,
                tileSize: tileSize
            }),
        }),
        extent: projectionExtent
    })],
    view: new ol.View({
        projection: projection,
        center: [mapEdge / 2, mapEdge / 2],
        zoom: 2,
        minZoom: 2,
        maxZoom: 4,
        extent: projectionExtent
    })
});

map.on('click', function(e) {
    console.log(e.coordinate);
});

There's some discussion in the mailing list threads https://groups.google.com/forum/#!topic/ol3-dev/EQh6anrVsP0 (my original question) and https://groups.google.com/forum/#!topic/ol3-dev/VVdNXHwiZEk (a similar question from earlier). I've posted this same solution to both.

Upvotes: 1

stofl
stofl

Reputation: 2982

This seems to work in OpenLayers 2:

var tiles = new OpenLayers.Layer.XYZ("Local tiles", "tiles/${z}/${x}/${y}.png", {
    isBaseLayer: true,
    maxExtent: [
        x1,
        y2,
        x2,
        y1
    ]
});
map.addLayer(tiles);

x1/y1 are the coordinates of the upper left corner of the tile at zoom level 0 and x2/y2 the coordinates of the lower right corner.

Upvotes: 2

Related Questions