Add a layer clipping example

2013-11-13 09:03:27 +01:00
parent 2073d78582
commit b698c5bf7b
2 changed files with 93 additions and 0 deletions
@@ -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();
+});