Ejemplo sencillo de sincronización de 2 mapas:
- a la izquierda un mapa con OpenLayers 3
- a la derecha, un mapa con la posición de los buques - AIS, a través de un widget de MarineTraffic
Last active
November 27, 2023 07:56
-
-
Save VictorVelarde/eddbe17997781d0ff38f to your computer and use it in GitHub Desktop.
OpenLayers 3 - Sincronización con MarineTraffic
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Marine Traffic en OL3</title> | |
| <link type="text/css" href="http://openlayers.org/en/v3.12.1/css/ol.css" rel="stylesheet" /> | |
| <style> | |
| #mapa { | |
| width: 50%; | |
| height: 600px; | |
| } | |
| #panel { | |
| width: 50%; | |
| height: 600px; | |
| position: fixed; | |
| right: 0px; | |
| top: 0px; | |
| } | |
| </style> | |
| </head> | |
| <body onload="init()"> | |
| <div id="mapa"></div> | |
| <div id="panel"> | |
| <iframe id="marineTraffic" frameborder="0" scrolling="no" width="100%" height="100%" src="http://www.marinetraffic.com/es/ais/embed/"> | |
| </iframe> | |
| </div> | |
| <script src="http://openlayers.org/en/v3.12.1/build/ol-debug.js"></script> | |
| <script type="text/javascript"> | |
| var mapa; | |
| function init() { | |
| var osm = new ol.layer.Tile({ | |
| source: new ol.source.OSM() | |
| }); | |
| var lon = -3.7930298; | |
| var lat = 43.44045603; | |
| var zoom = 12; | |
| var vista = new ol.View({ | |
| center: ol.proj.transform([lon, lat], 'EPSG:4326', 'EPSG:3857'), | |
| zoom: 12 | |
| }); | |
| mapa = new ol.Map({ | |
| layers: [osm], | |
| target: 'mapa', | |
| view: vista | |
| }); | |
| centrarMapaAIS(lon, lat, zoom); | |
| vista.on('change:center', actualizar); | |
| vista.on('change:resolution', actualizar); | |
| } | |
| function actualizar(evt) { | |
| var centro = evt.target.getCenter(); | |
| var lonlat = ol.proj.transform(centro, 'EPSG:3857', 'EPSG:4326'); | |
| var lon = lonlat[0]; | |
| var lat = lonlat[1]; | |
| var zoom = evt.target.getZoom(); | |
| centrarMapaAIS(lon, lat, zoom); | |
| } | |
| function centrarMapaAIS(lon, lat, zoom) { | |
| var url = 'http://www.marinetraffic.com/es/ais/embed/'; | |
| url += "zoom:" + zoom + "/centery:" + lat + "/centerx:" + lon; | |
| url += "/maptype:3/shownames:true/mmsi:0/shipid:0/fleet:/fleet_id:/vtypes:/showmenu:true/remember:false"; | |
| //console.log(url); | |
| var iframe = document.getElementById('marineTraffic'); | |
| iframe.src = url; | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment