Hoy mismo, he visto este código para mostrar capas GPX en un mapa de OpenStreetMap. Lo he adaptado un poco para mostrar varias capas GPX (en el ejemplo he usado 8 archivos GPX llamados D1.gpx hasta D8.gpx) y me sorprende lo fácil que resulta hacer una página HTML, que se puede abrir en nuestro ordenador y que, por supuesto, de alguna manera podremos interactuar con Autoit (se aceptan ideas).
También se puede poner otros mapas como GoogleMaps (ahora ya no hace falta API KEY como antes), Catastro,...
Para utilizarlo, simplemente crear un archivo con el código que pongo y extensión .html, y (tal y como está ahora el tema de las capas GPX con un for, se necesita 8 archivos GPX con nombre Dn.gpx, donde n va de 1 a 8).
Código: Seleccionar todo
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Simple OSM GPX Track</title>
<!-- bring in the OpenLayers javascript library
(here we bring it from the remote site, but you could easily serve up this javascript yourself) -->
<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
<!-- bring in the OpenStreetMap OpenLayers layers.
Using this hosted file will make sure we are kept up to date with any necessary changes -->
<script src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script>
<script type="text/javascript">
// Start position for the map (hardcoded here for simplicity,
// but maybe you want to get this from the URL params)
var lat=39.470239
var lon=-0.376805
var zoom=13
var map; //complex object of type OpenLayers.Map
function init() {
map = new OpenLayers.Map ("map", {
controls:[
new OpenLayers.Control.Navigation(),
new OpenLayers.Control.PanZoomBar(),
new OpenLayers.Control.LayerSwitcher(),
new OpenLayers.Control.Attribution()],
maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34),
maxResolution: 156543.0399,
numZoomLevels: 19,
units: 'm',
projection: new OpenLayers.Projection("EPSG:900913"),
displayProjection: new OpenLayers.Projection("EPSG:4326")
} );
// Define the map layer
// Here we use a predefined layer that will be kept up to date with URL changes
layerMapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik");
map.addLayer(layerMapnik);
layerTilesAtHome = new OpenLayers.Layer.OSM.Osmarender("Osmarender");
map.addLayer(layerTilesAtHome);
layerCycleMap = new OpenLayers.Layer.OSM.CycleMap("CycleMap");
map.addLayer(layerCycleMap);
layerMarkers = new OpenLayers.Layer.Markers("Markers");
map.addLayer(layerMarkers);
// Add the Layer with the GPX Track
/*
var lgpx = new OpenLayers.Layer.GML("Ruta GPX", "ruta.gpx", {
format: OpenLayers.Format.GPX,
style: {strokeColor: "green", strokeWidth: 5, strokeOpacity: 0.5},
projection: new OpenLayers.Projection("EPSG:4326")
});
map.addLayer(lgpx);
*/
// Creamos una capa GPX para cada archivo
for (i=1;i<=8;i++){
var ruta_nom = "Ruta"+i+" GPX"
var ruta_arch = "D"+i+".gpx"
var ruta_color_r = parseInt(255*Math.random())
var ruta_color_v = parseInt(255*Math.random())
var ruta_color_a = parseInt(255*Math.random())
//var ruta_color = i
var ruta_color = (ruta_color_r + 256 * ruta_color_v + 65536 * ruta_color_a).toString(16);
alert(ruta_nom + " " + ruta_arch + " " + ruta_color);
var lgpx = new OpenLayers.Layer.GML(ruta_nom, ruta_arch, {
format: OpenLayers.Format.GPX,
style: {strokeColor: ruta_color, strokeWidth: 5, strokeOpacity: 0.5},
projection: new OpenLayers.Projection("EPSG:4326")
});
map.addLayer(lgpx);
}
var lonLat = new OpenLayers.LonLat(lon, lat).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
map.setCenter(lonLat, zoom);
var size = new OpenLayers.Size(21, 25);
var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
var icon = new OpenLayers.Icon('http://www.openstreetmap.org/openlayers/img/marker.png',size,offset);
layerMarkers.addMarker(new OpenLayers.Marker(lonLat,icon));
}
</script>
</head>
<!-- body.onload is called once the page is loaded (call the 'init' function) -->
<body onload="init();"> <!-- define a DIV into which the map will appear. Make it take up the whole window -->
<div style="width:90%; height:90%" id="map"></div>
</body>
</html>
