OpenLayers3 has a really neat layer-spy example. The source code for the example indicates it uses the precompose and postcompose event listeners for an ol.layer.Tile:
var imagery = new ol.layer.Tile({ source: new ol.source.BingMaps({key: key, imagerySet: 'Aerial'})});// before rendering the layer, do some clippingimagery.on('precompose', function(event) { var ctx = event.context; var pixelRatio = event.frameState.pixelRatio; ctx.save(); ctx.beginPath(); if (mousePosition) { // only show a circle around the mouse ctx.arc(mousePosition[0] * pixelRatio, mousePosition[1] * pixelRatio, radius * pixelRatio, 0, 2 * Math.PI); ctx.lineWidth = 5 * pixelRatio; ctx.strokeStyle = 'rgba(0,0,0,0.5)'; ctx.stroke(); } ctx.clip();});// after rendering the layer, restore the canvas contextimagery.on('postcompose', function(event) { var ctx = event.context; ctx.restore();});
However I'd like to use Leaflet to implement the same functionality. Is there a Leaflet implementation of the layer spy functionality? If not, which event listeners are useful for implementing it with a Leaflet TileLayer?
أكثر...
var imagery = new ol.layer.Tile({ source: new ol.source.BingMaps({key: key, imagerySet: 'Aerial'})});// before rendering the layer, do some clippingimagery.on('precompose', function(event) { var ctx = event.context; var pixelRatio = event.frameState.pixelRatio; ctx.save(); ctx.beginPath(); if (mousePosition) { // only show a circle around the mouse ctx.arc(mousePosition[0] * pixelRatio, mousePosition[1] * pixelRatio, radius * pixelRatio, 0, 2 * Math.PI); ctx.lineWidth = 5 * pixelRatio; ctx.strokeStyle = 'rgba(0,0,0,0.5)'; ctx.stroke(); } ctx.clip();});// after rendering the layer, restore the canvas contextimagery.on('postcompose', function(event) { var ctx = event.context; ctx.restore();});
However I'd like to use Leaflet to implement the same functionality. Is there a Leaflet implementation of the layer spy functionality? If not, which event listeners are useful for implementing it with a Leaflet TileLayer?
أكثر...