<!DOCTYPE html>
<html>
<head>
<link data-require="OpenLayers@3.4.0" data-semver="3.4.0" rel="stylesheet" href="http://openlayers.org/en/v3.4.0/css/ol.css" />
<link rel="stylesheet" href="style.css" />
<style>
#mapa{
position:absolute;
z-index:10;
width:100%;
height:100%;
top:0; left:0;
}
canvas {
position: absolute;
top: 0; left: 0;
height: 100%; width: 100%;
z-index: 11;
pointer-events:none;
}
</style>
</head>
<body>
<div id="mapa"></div>
<canvas id="paper"></canvas>
<script data-require="OpenLayers@3.4.0" data-semver="3.4.0" src="http://openlayers.org/en/v3.4.0/build/ol.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/paper.js/0.9.22/paper-full.min.js"></script>
<script src="script.js"></script>
</body>
</html>
var olview = new ol.View({
center: [-5538278.518201076, -1540884.5812734526],
zoom: 4,
minZoom: 1,
maxZoom: 20
});
var layerBing = new ol.layer.Tile({
preload: 4,
source: new ol.source.BingMaps({
key: 'Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3',
imagerySet: 'AerialWithLabels'
})
});
var map = new ol.Map({
target: document.getElementById('mapa'),
loadTilesWhileAnimating: true,
loadTilesWhileInteracting: true,
view: olview,
renderer: 'canvas',
layers: [layerBing]
});
var canvasFunction = function(extent, resolution, pixelRatio, size, projection) {
var canvasWidth = size[0],
canvasHeight = size[1],
center = map.getPixelFromCoordinate(ol.extent.getCenter(extent))
canvas = document.getElementById("paper");
paper.setup(canvas);
paper.view.viewSize = new paper.Size([canvasWidth, canvasHeight]);
paper.view.center = center;
var from = map.getPixelFromCoordinate([-5538278.518201076, -1540884.5812734526]),
to = map.getPixelFromCoordinate([-5381735.484273022, -1534769.6190106387]);
var path = new paper.Path.Line({
from: from,
to: to,
strokeWidth: 10,
strokeColor: 'red',
fillColor: 'none',
});
var layer = new paper.Layer({
children: [path]
});
/*
path.scale(20);
path.selected = true;
path.transformContent = false;*/
//path.position = paper.view.center;
paper.view.onFrame = function(ev){
path.rotate(5);
path.scaling.x += 0.1;
console.info(ev.count);
if(ev.count > 100){
paper.view.off('frame');
}
}
//paper.view.draw();
return paper.view.element;
};
var layer_canvas = new ol.layer.Image({
source: new ol.source.ImageCanvas({
canvasFunction: canvasFunction,
projection: 'EPSG:3857'
})
});
map.once("postrender", function() {
map.addLayer(layer_canvas);
});
layer_canvas.once('postcompose', function(ev){
//paper.view.emit('frame');
});