Setting the tile size in WMS layers

The OpenLayers.Layer.Grid class is a special kind of layer, which divides the layer in different zoom levels composed of a grid of tiles.

The OpenLayers.Layer.WMS class is a subclass of the preceding one and, in addition to working in single tile mode, it can work in tiled mode as well.

Of course, controlling the size of the tiles of the WMS request can affect the performance. By default, the tile size is 256 x 256 pixels, but we can set this to any desired value. Bigger tile sizes means less request to the server but more computation time to generate a bigger image. On the contrary, smaller tile sizes means more server requests and less time to compute smaller images.

How to do it...

To set the tile size, perform the following steps:

  1. Create an HTML file with OpenLayers library dependency.
  2. Add a div element that will hold the map, as follows:
    <!-- Map DOM element -->
    <div id="ch2_tilesize" style="width: 100%; height: 100%;"></div>
  3. Next, initialize the map and add two layers, as follows:
    <!-- The magic comes here -->
    <script type="text/javascript">
        // Create the map using the specified DOM element
        var map = new OpenLayers.Map("ch2_tilesize", {
            allOverlays: true,
            tileSize: new OpenLayers.Size(256, 256)
        });
        map.addControl(new OpenLayers.Control.LayerSwitcher());
        
        // Add WMs layer
        var wms1 = new OpenLayers.Layer.WMS("OpenLayers WMS Basic", "http://vmap0.tiles.osgeo.org/wms/vmap0",
        {
            layers: 'basic'
        });
        map.addLayer(wms1);
  4. For the second layer, specify the size of the tiles as follows:
        var wms2 = new OpenLayers.Layer.WMS("Coast Line", "http://vmap0.tiles.osgeo.org/wms/vmap0",
        {
            layers: 'coastline_01,coastline_02'
        },
        {
            tileSize: new OpenLayers.Size(512, 512),
            opacity: 0.65
        });
        map.addLayer(wms2); 
        
        // Center the view
        map.setCenter(new OpenLayers.LonLat(-85, 40), 3);
    </script>

How it works...

There is not much mystery in this recipe. The tileSize property is available both for OpenLayers.Map and OpenLayers.Layer.Grid subclasses.

The tileSize must be an instance of OpenLayers.Size class, indicating the width and height in pixels.

When the tile size is set in the map instance all layers use this value unless you specify another value for each individual layer.

By default, the OpenLayers.Map instance is configured to use 256 x 256 size tiles. Because of this, the first layer makes requests to the WMS server using a tile size of 256 x 256 pixels.

On the other hand, we have specified a 512 x 512 tile size value for the second layer, so the requests against the WMS are made waiting for tiles with 512 x 512 size.

There's more...

For tiled services, such as Google Maps or OpenStreetMap, the tileSize property is simply ignored because these services have precomputed the images in a fixed 256 x 256 size.

The reason for the tile size value being 256 x 256 pixels is because the size (in bytes) of each image file is optimum for bandwidth use.

See also

  • The Using WMS with single tile mode recipe
  • The Buffering the layer data to improve the map navigation recipe
..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.143.203.96