TileCache url function for OpenLayers

Allows create custom ol.TileUrlFunctionType to load tiles seeded with TileCache.

Installation

Install it with NPM (recommended):

# ES6 version for bundling with Webpack, Rollup and etc.
npm install ol ol-tilecache

// Use as ES2015 module (based on NPM package `ol`)
import Map from 'ol/Map'
...
import * as TileCacheUrlFn from 'ol-tilecache'
// or only what you need
import { createTileUrlFunction } from 'ol-tilecache'

Or add from CDN:

<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.0.0/build/ol.js"></script>
<script src="https://unpkg.com/ol-tilecache@latest/dist/bundle.min.js"></script>
<script>
  // plugin exports global variable TileCacheUrlFn
  // in addition it also exported to `ol.tileCacheUrlFn` field (for backward compatibility).
</script>

Note

Plugin is available in 2 versions: as UMD module and as ES2015 module:

• RECOMMENDED: ES2015 version (dist/bundle.es.js) should be used with ol package (you should install it manually).
• UMD version (dist/bundle[.min].js) should be used with UMD ol package. You can install ol package as dev dependency to suppress NPM warning about required peer dependencies.

Usage

Usage same as standard OpenLayers tile url functions.

Members

createTileUrlFunction

Arguments

• url : string URL template
• tileGrid : ol.tilegrid.TileGrid Custom tile grid. Default is EPSG:3857 x/y/z grid
• extent : ol.Extent Tile grid extent. Default is EPSG:3857 extent

Returns: ol.TileUrlFunctionType

Available URL placeholders:

z | 0z - zoom level (simple number or padded with zero)
x1, x2, x3 - X axis index parts (remnant from dividing the tile X index on 10^9 broken down by 3 digits)
y1, y2, y3 - Y axis index parts (remnant from dividing the tile Y index on 10^9 broken down by 3 digits)
-y1, -y2, -y3 - inverted Y axis index parts (remnant from dividing the tile Y index on 10^9 broken down by 3 digits)

Example usage:

import Map from 'ol/Map'
import View from 'ol/View'
import TileLayer from 'ol/layer/Tile'
import XyzSource from 'ol/source/XYZ'
import { createTileUrlFunction } from 'ol-tilecache'

const map = new Map({
  target: 'map',
  view: new View({
    projection: 'EPSG:3857',
    center: [ 4189972.14, 7507950.67 ],
    zoom: 5
  }),
  layers: [
    new TileLayer({
      source: new XyzSource({
        tileUrlFunction: createTileUrlFunction('http://{a-z}.tiles.org/{0z}/{x1}/{x2}/{x3}/{-y1}/{-y2}/{-y3}.png')
      })
    })
  ]
})

Build

git clone https://github.com/ghettovoice/ol-tilecache.git
npm install
# build
npm run build
# run test app
npm start
# run unit tests
npm test

License

MIT (c) 2016-2019, Vladimir Vershinin