From b698c5bf7bd7f98b76db9c13c5e8efb6bd6aac15 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=89ric=20Lemoine?= Date: Wed, 13 Nov 2013 09:03:27 +0100 Subject: [PATCH] Add a layer clipping example --- examples/layer-clipping.html | 50 ++++++++++++++++++++++++++++++++++++ examples/layer-clipping.js | 43 +++++++++++++++++++++++++++++++ 2 files changed, 93 insertions(+) create mode 100644 examples/layer-clipping.html create mode 100644 examples/layer-clipping.js diff --git a/examples/layer-clipping.html b/examples/layer-clipping.html new file mode 100644 index 0000000000..9e304847a3 --- /dev/null +++ b/examples/layer-clipping.html @@ -0,0 +1,50 @@ + + + + + + + + + + + Layer clipping example + + + +
+
+
+ OpenLayers 3 Examples +
+
+
+ +
+ +
+
+
+
+
+ +
+ +
+

Layer clipping example

+

Layer clipping example.

+
+

See the layer-clipping.js source to see how this is done.

+
+
clipping, openstreetmap
+
+ +
+ +
+ + + + + + diff --git a/examples/layer-clipping.js b/examples/layer-clipping.js new file mode 100644 index 0000000000..452a918e10 --- /dev/null +++ b/examples/layer-clipping.js @@ -0,0 +1,43 @@ +goog.require('ol.Map'); +goog.require('ol.RendererHints'); +goog.require('ol.View2D'); +goog.require('ol.layer.Tile'); +goog.require('ol.source.OSM'); + +var osm = new ol.layer.Tile({ + source: new ol.source.OSM() +}); + +var map = new ol.Map({ + layers: [osm], + renderer: ol.RendererHint.CANVAS, + target: 'map', + view: new ol.View2D({ + center: [0, 0], + zoom: 2 + }) +}); + +osm.on('precompose', function(event) { + var ctx = event.getContext(); + var size = event.getFrameState().size; + ctx.save(); + ctx.translate(size[0] / 2, size[1] / 2); + ctx.scale(3, 3); + ctx.translate(-75, -80); + ctx.beginPath(); + ctx.moveTo(75, 40); + ctx.bezierCurveTo(75, 37, 70, 25, 50, 25); + ctx.bezierCurveTo(20, 25, 20, 62.5, 20, 62.5); + ctx.bezierCurveTo(20, 80, 40, 102, 75, 120); + ctx.bezierCurveTo(110, 102, 130, 80, 130, 62.5); + ctx.bezierCurveTo(130, 62.5, 130, 25, 100, 25); + ctx.bezierCurveTo(85, 25, 75, 37, 75, 40); + ctx.clip(); + ctx.setTransform(1, 0, 0, 1, 0, 0); +}); + +osm.on('postcompose', function(event) { + var ctx = event.getContext(); + ctx.restore(); +});