diff --git a/examples/layer-spy.html b/examples/layer-spy.html new file mode 100644 index 0000000000..4c2a97632d --- /dev/null +++ b/examples/layer-spy.html @@ -0,0 +1,60 @@ + + + + + + + + + + + Layer Spy Example + + + +
+
+
+ OpenLayers 3 Examples +
+
+
+ +
+ +
+
+
+
+
+ +
+ +
+

Layer spy example

+

View a portion of one layer over another

+
+

+ Layer rendering can be manipulated in precompose and postcompose event listeners. + These listeners get an event with a reference to the Canvas rendering context. + In this example, the precompose listener sets a clipping mask around the most + recent mouse position, giving you a spyglass effect for viewing one layer over another. +

+

+ Move around the map to see the effect. Use the ↑ up and ↓ down arrow keys to adjust the spyglass size. +

+

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

+
+
spy, image manipulation
+
+ +
+ +
+ + + + + + + diff --git a/examples/layer-spy.js b/examples/layer-spy.js new file mode 100644 index 0000000000..7bc24dc4c6 --- /dev/null +++ b/examples/layer-spy.js @@ -0,0 +1,68 @@ +goog.require('ol.Map'); +goog.require('ol.RendererHint'); +goog.require('ol.View2D'); +goog.require('ol.layer.Tile'); +goog.require('ol.proj'); +goog.require('ol.source.BingMaps'); + +var key = 'Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3'; + +var roads = new ol.layer.Tile({ + source: new ol.source.BingMaps({key: key, imagerySet: 'Road'}) +}); + +var imagery = new ol.layer.Tile({ + source: new ol.source.BingMaps({key: key, imagerySet: 'Aerial'}) +}); + +var map = new ol.Map({ + layers: [roads, imagery], + renderer: ol.RendererHint.CANVAS, + target: 'map', + view: new ol.View2D({ + center: ol.proj.transform([-109, 46.5], 'EPSG:4326', 'EPSG:3857'), + zoom: 6 + }) +}); + +var radius = 75; +$(document).keydown(function(evt) { + if (evt.which === 38) { + radius = Math.min(radius + 5, 150); + map.requestRenderFrame(); + } else if (evt.which === 40) { + radius = Math.max(radius - 5, 25); + map.requestRenderFrame(); + } +}); + +// get the pixel position with every move +var mousePosition = null; +$(map.getViewport()).on('mousemove', function(evt) { + mousePosition = map.getEventPixel(evt.originalEvent); + map.requestRenderFrame(); +}).on('mouseout', function() { + mousePosition = null; + map.requestRenderFrame(); +}); + +// before rendering the layer, do some clipping +imagery.on('precompose', function(event) { + var ctx = event.getContext(); + ctx.save(); + ctx.beginPath(); + if (mousePosition) { + // only show a circle around the mouse + ctx.arc(mousePosition[0], mousePosition[1], radius, 0, 2 * Math.PI); + ctx.lineWidth = 5; + ctx.strokeStyle = 'rgba(0,0,0,0.5)'; + ctx.stroke(); + } + ctx.clip(); +}); + +// after rendering the layer, restore the canvas context +imagery.on('postcompose', function(event) { + var ctx = event.getContext(); + ctx.restore(); +});