Pruebas realizadas a raiz de un bug en la georrefenciación de imagenes con OpenLayers 3
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Imagen en OL2</title> | |
| </head> | |
| <body onload="init()"> | |
| <div id="mapa" style="width:100%; height:600px;"> | |
| </div> <!-- OL2 --> | |
| <script src="http://dev.openlayers.org/releases/OpenLayers-2.13.1/lib/OpenLayers.js"></script> | |
| <script type="text/javascript"> | |
| var mapa; | |
| function init() { | |
| var graphic = new OpenLayers.Layer.Image( | |
| 'Estuario', | |
| 'https://gist.githubusercontent.com/VictorVelarde/0372da6c5ad87c892db6/raw/e0ecafcf3b3153022d848ca2556055111b3b8de4/Composite.png', | |
| new OpenLayers.Bounds(-791350.472638389, 5376837.581117962, -778150.4726383891, 5398392.773800777), | |
| new OpenLayers.Size(864, 1024) | |
| ); | |
| graphic.isBaseLayer = false; | |
| // Mapa Base | |
| mapa = new OpenLayers.Map({ | |
| div: "mapa", | |
| layers: [new OpenLayers.Layer.OSM("OpenStreetMap")], | |
| center: new OpenLayers.LonLat(-784751.048, 5389384.957), | |
| zoom: 13 | |
| }); | |
| mapa.addLayer(graphic); | |
| } | |
| </script> | |
| </body> | |
| </html> |
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Imagen en OL3</title> | |
| <!--<link type="text/css" href="http://openlayers.org/en/v3.11.2/css/ol.css" rel="stylesheet"/>--> | |
| <link type="text/css" href="http://openlayers.org/en/v3.12.1/css/ol.css" rel="stylesheet"/> | |
| </head> | |
| <body onload="init()"> | |
| <div id="mapa" style="width:100%; height:600px;"> | |
| </div> | |
| <!-- OL3 3.11.2 (Bug de posicionamiento) | |
| <script src="http://openlayers.org/en/v3.11.2/build/ol-debug.js"></script> | |
| --> | |
| <!-- OL3 3.12.1 fix OK --> | |
| <script src="http://openlayers.org/en/v3.12.1/build/ol-debug.js"></script> | |
| <script type="text/javascript"> | |
| var mapa; | |
| function init() { | |
| var graphic = new ol.layer.Image({ | |
| source: new ol.source.ImageStatic({ | |
| url: 'https://gist.githubusercontent.com/VictorVelarde/0372da6c5ad87c892db6/raw/e0ecafcf3b3153022d848ca2556055111b3b8de4/Composite.png', | |
| imageSize: [864, 1024], | |
| imageExtent: [-791350.472638389, 5376837.581117962, -778150.4726383891, 5398392.773800777] | |
| }) | |
| }); | |
| var osm = new ol.layer.Tile({source: new ol.source.OSM()}); | |
| var mapa = new ol.Map({ | |
| layers: [osm, graphic], | |
| target: 'mapa', | |
| view: new ol.View({center: [-784751.048, 5389384.957], zoom: 13 | |
| }) | |
| }); | |
| } | |
| </script> | |
| </body> | |
| </html> |
