...
HTML |
---|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.13.0/ol.css" type="text/css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.13.0/ol.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.js"></script> <style> .map { height: 137px; width: 260px; margin-top: 10px; float: left; } .caption { background-color: #808080; color: white; font-size:1.2em; font-weight: 600; margin-top:-120px; position:relative; width: 260px; z-index: 9; } </style> <script type="text/javascript"> var parser = new ol.format.WMSCapabilities(); function add_map(map_id, layer) { var map = L.map(map_id, { zoom: 0, zoomControl:false, attributionControl:false, dragging:false, fullscreenControl: false, crs: L.CRS.EPSG4326, center: [0, 0] }); var ecmwf = "https://apps.ecmwf.int/wms?token=public"; var wms = L.tileLayer.wms(ecmwf, { layers: layer+',foreground', format: 'image/png', version : '1.1.1', transparent: true }); wms.addTo(map); } $.ajax('/download/attachments/69179493208502286/getCapabilities_20161014.xml?api=v2').then(function(response) { var result = parser.read(response); // $('#log').html(window.JSON.stringify(result, null, 2)); var i = 0; for (var key in result["Capability"]["Layer"]["Layer"]) { if ( (result["Capability"]["Layer"]["Layer"].hasOwnProperty(key)) && ( result["Capability"]["Layer"]["Layer"][key]["Name"].substr(0,12) == "composition_") ) { var layer = result["Capability"]["Layer"]["Layer"][key]["Name"]; var map_id = "map-"+ i; console.log(map_id, layer); AJS.$('<div/>', { id: map_id, class: 'map' }).appendTo('#map'); AJS.$('<span class="caption">'+layer+'</span>').appendTo('#'+map_id); add_map(map_id, layer); i += 1; } } }); </script> <div id="map"></div> |
...