[OpenLayers-Commits] r12279 - in sandbox/camptocamp/clientzoom:
examples lib/OpenLayers/Layer
commits-20090109 at openlayers.org
commits-20090109 at openlayers.org
Thu Aug 25 16:55:05 EDT 2011
Author: erilem
Date: 2011-08-25 13:55:04 -0700 (Thu, 25 Aug 2011)
New Revision: 12279
Modified:
sandbox/camptocamp/clientzoom/examples/wmts.html
sandbox/camptocamp/clientzoom/examples/wmts.js
sandbox/camptocamp/clientzoom/lib/OpenLayers/Layer/Grid.js
Log:
first client zoom implementation, demo provided in the wmts example
Modified: sandbox/camptocamp/clientzoom/examples/wmts.html
===================================================================
--- sandbox/camptocamp/clientzoom/examples/wmts.html 2011-08-25 08:30:11 UTC (rev 12278)
+++ sandbox/camptocamp/clientzoom/examples/wmts.html 2011-08-25 20:55:04 UTC (rev 12279)
@@ -33,6 +33,19 @@
This example uses an OpenLayers.Layer.WMTS layer to display
cached tiles over an OSM layer in spherical mercator coordinates.
</p><p>
+
+ <strong>client zoom</strong> - In this example the OSM layer,
+ which is the base layer, defines
+ 19 resolutions, from 156543.0339 to 0.5971. The WMTS layer is
+ configured as if its WMTS service only supported 18
+ resolutions, from 156543.0339 to 1.1943 (through the
+ <code>serverResolutions</code> option). So when the map
+ changes to the smallest resolution,
+ 0.5971, "client zooming" is applied to the WMTS layer, that is
+ the layer div is transformed client-side to inflate the tiles
+ and make it so the layer was zoomed.
+
+ </p><p>
See the <a href="wmts.js" target="_blank">
wmts.js source</a> to see how this is done.
</p>
Modified: sandbox/camptocamp/clientzoom/examples/wmts.js
===================================================================
--- sandbox/camptocamp/clientzoom/examples/wmts.js 2011-08-25 08:30:11 UTC (rev 12278)
+++ sandbox/camptocamp/clientzoom/examples/wmts.js 2011-08-25 20:55:04 UTC (rev 12279)
@@ -8,12 +8,14 @@
units: "m",
maxExtent: new OpenLayers.Bounds(
-20037508.34, -20037508.34, 20037508.34, 20037508.34
- ),
- maxResolution: 156543.0339
+ )
});
- var osm = new OpenLayers.Layer.OSM();
+ var osm = new OpenLayers.Layer.OSM(null, null, {
+ resolutions: [156543.03390625, 78271.516953125, 39135.7584765625, 19567.87923828125, 9783.939619140625, 4891.9698095703125, 2445.9849047851562, 1222.9924523925781, 611.4962261962891, 305.74811309814453, 152.87405654907226, 76.43702827453613, 38.218514137268066, 19.109257068634033, 9.554628534317017, 4.777314267158508, 2.388657133579254, 1.194328566789627, 0.5971642833948135]
+ });
+
// If tile matrix identifiers differ from zoom levels (0, 1, 2, ...)
// then they must be explicitly provided.
var matrixIds = new Array(26);
@@ -30,11 +32,11 @@
format: "image/png",
style: "_null",
opacity: 0.7,
- isBaseLayer: false
+ isBaseLayer: false,
+ serverResolutions: [156543.03390625, 78271.516953125, 39135.7584765625, 19567.87923828125, 9783.939619140625, 4891.9698095703125, 2445.9849047851562, 1222.9924523925781, 611.4962261962891, 305.74811309814453, 152.87405654907226, 76.43702827453613, 38.218514137268066, 19.109257068634033, 9.554628534317017, 4.777314267158508, 2.388657133579254, 1.194328566789627]
});
map.addLayers([osm, wmts]);
map.addControl(new OpenLayers.Control.LayerSwitcher());
- map.setCenter(new OpenLayers.LonLat(-13677832, 5213272), 13);
-
+ map.setCenter(new OpenLayers.LonLat(-13677832, 5213272), 17);
}
Modified: sandbox/camptocamp/clientzoom/lib/OpenLayers/Layer/Grid.js
===================================================================
--- sandbox/camptocamp/clientzoom/lib/OpenLayers/Layer/Grid.js 2011-08-25 08:30:11 UTC (rev 12278)
+++ sandbox/camptocamp/clientzoom/lib/OpenLayers/Layer/Grid.js 2011-08-25 20:55:04 UTC (rev 12279)
@@ -220,6 +220,39 @@
* dragging - {Boolean}
*/
moveTo:function(bounds, zoomChanged, dragging) {
+
+ // if we know the server doesn't support the new resolution
+ // we apply "client zoom", that is transform the layer div,
+ // and return
+
+ var resolution = this.map.getResolution();
+ if(this.serverResolutions && OpenLayers.Util.indexOf(
+ this.serverResolutions, resolution) === -1) {
+ //
+ // TODO
+ // - we should have a better way to find the base resolution,
+ // currently we only support the case where non-supported
+ // resolutions are at the end of the resolutions array.
+ // - verify whether HTTPRequest.moveTo should be called here
+ // too
+ //
+
+ if(zoomChanged) {
+ var baseResolution = this.serverResolutions[
+ this.serverResolutions.length-1];
+ this.transformDiv(resolution, baseResolution);
+ }
+
+ return;
+ }
+
+ // reset the layer width, height, left, top, to deal with
+ // the case where the layer has been transformDivd
+ this.div.style.width = '100%';
+ this.div.style.height = '100%';
+ this.div.style.left = '0%';
+ this.div.style.top = '0%';
+
OpenLayers.Layer.HTTPRequest.prototype.moveTo.apply(this, arguments);
bounds = bounds || this.map.getExtent();
@@ -258,6 +291,47 @@
},
/**
+ * Method: transformDiv
+ * Transform the layer div.
+ *
+ * Parameters:
+ * resolution - {Number} The target resolution.
+ * baseResolution - {Number} The base resolution.
+ */
+ transformDiv: function(resolution, baseResolution) {
+
+ //
+ // TODO
+ // - transformDiv generates an error if the grid isn't initialized yet
+ // - serverResolutions should be documented
+ //
+
+ var scale = baseResolution / resolution;
+
+ // scale the layer div
+
+ this.div.style.width = 100 * scale + '%';
+ this.div.style.height = 100 * scale + '%';
+
+ // translate the layer div
+
+ var tilesBounds = this.getTilesBounds();
+ var lonlat = {lon: tilesBounds.left,
+ lat: tilesBounds.top};
+ var pos = this.map.getPixelFromLonLat(lonlat);
+
+ // when scaling the layer div the tiles were scaled *and* moved, we
+ // need to take this move into account for the positioning of the
+ // layer div
+ var topLeftTile = this.grid[0][0].getTile();
+ var offsetX = parseInt(topLeftTile.style.left, 10) * scale;
+ var offsetY = parseInt(topLeftTile.style.top, 10) * scale;
+
+ this.div.style.left = (pos.x - offsetX) + '%';
+ this.div.style.top = (pos.y - offsetY) + '%';
+ },
+
+ /**
* Method: moveByPx
* Move the layer based on pixel vector.
*
@@ -266,7 +340,13 @@
* dy - {Number}
*/
moveByPx: function(dx, dy) {
- if (!this.singleTile) {
+ // do not move schedule move of gridded tiles if in single
+ // tile or client zoom mode
+ var resolution = this.map.getResolution();
+ if (!this.singleTile &&
+ (!this.serverResolutions ||
+ OpenLayers.Util.indexOf(
+ this.serverResolutions, resolution) !== -1)) {
this.scheduleMoveGriddedTiles();
}
},
More information about the Commits
mailing list