[GIS] How to display GeoWebCache local tiles with OpenLayers 3

geoserveropenlayers

I've created local tiles using GeoWebCache and they are inside local folder names :

Layer - EPSG_4326_9- - 19_10 - - 0608_0339.png - 0608_0340.png - EPSG_4326_10 - -19_10 - -1217_0679.png -1217_0680.png - EPSG_4326_11 - -38_21 -2435_1358.png -2435_1359.png
How can I show them using OL ?
I thought using XYZ layer , something like :

var test =  new ol.layer.Tile({
title: 'test',
type: 'base',
visible: true,
source: new ol.source.XYZ({
    tileUrlFunction: function (coordinate) {
        if (coordinate == null) {
            return "";
        }
        var z = coordinate[0];
        var x = coordinate[1];
        var y = coordinate[2];
        //var y = (1 << z) - coordinate[2] - 1;

        return 'tiles/layer/EPSG_4236_' + z + '/' + x + '/' + y + '.png';
    }
})

});

but the Z X Y numbers don't match ….

Best Answer

There is an outstanding pull request which should give you a good idea on how to achieve this: https://github.com/openlayers/ol3/pull/3241/files

Related Solutions

[GIS] GeoWebCache WMTS always replacing tiles in cache

As per the documentation, switching from WMS to GeoWebCache only requires a URL change from:

/geoserver/wms <- direct WMS

/geoserver/gwc/service/wms <- geocached wms

and you're good to go, no need to switch WMTS. BTW, GeoWebCache requires all tiles be 256x256.

You can also seed the cache from the GeoCache home that can be reached from the Geoserver admin app.

OpenLayers – Using Local Tiles from Geowebcache with OpenLayers

What you have found is something in the OpenLayers sand box, which is an environment where OpenLayers contributors can add their own custom layers, controls, etc. Sometimes things created in the sand box work their way through to the core distribution.

However, it is simple to take what has been created and add it to your OpenLayers build. First, you need to get the source file for the GeoWebCache layer:

http://dev.openlayers.org/sandbox/tschaub/gwc/lib/OpenLayers/Layer/GeoWebCache.js

Save that somewhere locally. Now you need to decide whether you want to build the script into your main OpenLayers library or whether you just want to include it on your page.

Including on your page

The simplest approach is to include it on your page, so just add the script to your HTML header:

<head>
  <title>Your Page Title Here</title>
  <script src="path/to/OpenLayers.js" type="text/javascript"></script>
  <script src="path/to/GeoWebCache.js" type="text/javascript"></script>
  <!-- Other scripts, meta tags, CSS, etc -->
</head>

Now you can use the GeoWebCache layer in your script:

new OpenLayers.Layers.GeoWebCache({
    url: "http://path/to/web/accessible/cache"
});

If you place multiple copies of your cache in different locations then you can supply the url property with an array of urls, this will give you greater throughput on the client as it allows your browser to create more concurrent requests for tiles.

Building into your OpenLayers library

This is a little more involved but has the benefit of making things a little easier to port around and also will keep your code a little cleaner. within the OpenLayers source directory there is a Python build script that allows you to create custom builds of OpenLayers. This can be useful for example to create a small library of only the OpenLayers components you need, rather than the full build.

To add the GeoWebCache layer into the OpneLayers build you need to do the following.

Download the OpenLayers source
Copy the GeoWebCache.js file into the folder /lib/OpenLayers/Layer
Perform an OpenLayers build using the Python build scripts

Building OpenLayers is simply a case of opening a command prompt (assuming Windows), and doing something like:

D:
cd Development\OpenLayers-2.13.1\build
python build.py full OpenLayers-GeoWebCache.js

Note that this assumes you extracted the OpenLayers source to a folder called D:\Development\OpenLayers-2.13.1 so you'll need to change that to your folder. The build command itself can be configured to use a different compression mechanism (the default is jsmin) and the output file can also be set - in this case we called it OpenLayers-GeoWebCache.js.

Now copy that file to where your HTML page is and include it like you would the normal OpenLayers library.

You can also customise the build by creating and using a build script. Note the full argument supplied to the build.py script - this instructs the script to do a full OpenLayers build. You can change this to a customised build by specifying a name and creating a corresponding build script. For example, suppose you only wanted a minimal OpenLayers build including the GeoWebCache layer. You would create a file called minimal-geowebcache.cfg in the build folder. The content of the file should be:

[first]

[last]

[include]
OpenLayers/Map.js
OpenLayers/Kinetic.js
OpenLayers/Projection.js
OpenLayers/Layer/Vector.js
OpenLayers/Layer/OSM.js
OpenLayers/Layer/Bing.js
OpenLayers/Layer/WMS.js
OpenLayers/Layer/Google/v3.js
OpenLayers/Layer/GeoWebCache.js
OpenLayers/Popup/FramedCloud.js
OpenLayers/Control/Navigation.js
OpenLayers/Control/Zoom.js
OpenLayers/Control/Attribution.js
OpenLayers/Control/SelectFeature.js
OpenLayers/Control/Panel.js
OpenLayers/Control/LayerSwitcher.js
OpenLayers/Renderer/SVG.js
OpenLayers/Renderer/VML.js
OpenLayers/Format/GeoJSON.js
OpenLayers/Protocol/HTTP.js
OpenLayers/Strategy/Fixed.js
OpenLayers/Strategy/BBOX.js
OpenLayers/StyleMap.js
OpenLayers/Rule.js
OpenLayers/Filter/Comparison.js
OpenLayers/Filter/Logical.js

[exclude]

Then you can perform a build using this configuration with the command:

python build.py minimal-geowebcache OpenLayers.js

This will create a much smaller OpenLayers library that you can include in your page. Just make sure you build the library with all the bits of OpenLayers you are using!

Best Answer

Related Solutions

[GIS] GeoWebCache WMTS always replacing tiles in cache

OpenLayers – Using Local Tiles from Geowebcache with OpenLayers

Related Question