...
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> --> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin=""/> <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js" integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin=""></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, maxZoom: 8, // minZoom: 16, maxBounds: [ //south west [30, -25], //north east [72, 45] ], center: [51, 10] }); var ecmwf = "https://appseccharts.ecmwf.int/wms?token=public"; var wms = L.tileLayer.wms(ecmwf, { layers: layer+',foreground', format: 'image/png', version : '1.3.0', transparent: true }); wms.addTo(map); } $.ajax('/download/attachments/208502280/getCapabilities_20220216.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,18) == "composition_europe") ) { 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> |
...