Saltar a contenido

Y si los datos son enormes

Autores

Poco que comentar en este ejemplo.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="utf-8">
    <title>WMS y Leaflet</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css">
    <style>
        html,
        body,
        .map {
            height: 100%;
            margin: 0px;
        }

    </style>
</head>
<body>
    <div id="map" class="map"></div>
    <script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js"></script>
    <script>
        const map = L.map('map').setView([42.21, -8.81], 12);
        const PNOA = L.tileLayer.wms('http://www.ign.es/wms-inspire/ign-base?', {
            layers: 'IGNBaseOrto',
            attribution: 'CC BY 4.0 www.scne.es'
        }).addTo(map);

    </script>
</body>
</html>

Simplemente fíjate que hemos sacado el attribution del elemento AccessConstraints del GetCapabilities

WMTS

Si bien Leaflet no soporta el protocolo WMTS por defecto su uso básico, no es tan distinto del XYZ y podríamos desarrollar algo de código a medida mediante L.TileLayer.

Existe un plugin para Leaflet que no está demasiado desarrollado. Uno de sus problemas es que por defecto usa una matriz basada en EPSG:3857, y si la capa que queremos emplear no soporta esa proyección como es el caso hace falta un poco de matemáticas.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="utf-8">
    <title>WMTS y Leaflet</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css">
    <style>
        html,
        body,
        .map {
            height: 100%;
            margin: 0px;
        }

    </style>
</head>
<body>
    <div id="map" class="map"></div>
    <script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js"></script>
    <script src="https://rawgithub.com/mylen/leaflet.TileLayer.WMTS/master/leaflet-tilelayer-wmts.js"></script>
    <script>
        let map = L.map('map', {
            center: [42.2, -8.8],
            zoom: 12,
            crs: L.CRS.EPSG4326,
        });
        const url = 'http://www.ign.es/wmts/mapa-raster';
        var ign = new L.TileLayer.WMTS(url, {
            layer: 'MTN',
            style: 'normal',
            tilematrixSet: 'EPSG:4326',
            format: 'image/jpeg',
            attribution: '© Instituto Geográfico Nacional de España',
        }).addTo(map);

    </script>
</body>
</html>

Queda como ejercicio para el lector hacer que este código funcione.

XYZ

Construimos un esqueleto con una capa del PNOA

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="utf-8">
    <title>XYZ y Leaflet</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css">
    <style>
        html,
        body,
        .map {
            height: 100%;
            margin: 0px;
        }

    </style>
</head>
<body>
    <div id="map" class="map"></div>
    <script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js"></script>
    <script>
        L.map('map', {
            center: [42.2, -8.8],
            zoom: 12,
            layers: [
                L.tileLayer.wms('http://www.ign.es/wms-inspire/pnoa-ma?', {
                    layers: 'OI.OrthoimageCoverage',
                    attribution: 'PNOA cedido por © <a href="http://www.ign.es/ign/main/index.do" target="_blank">Instituto Geográfico Nacional de España</a>'
                })
            ]
        });

    </script>
</body>
</html>

Y añadimos una capa XYZ

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="utf-8">
    <title>XYZ y Leaflet</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css">
    <style>
        html,
        body,
        .map {
            height: 100%;
            margin: 0px;
        }

    </style>
</head>
<body>
    <div id="map" class="map"></div>
    <script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js"></script>
    <script>
        const PNOA = L.tileLayer.wms('http://www.ign.es/wms-inspire/pnoa-ma?', {
            layers: 'OI.OrthoimageCoverage',
            attribution: 'PNOA cedido por © <a href="http://www.ign.es/ign/main/index.do" target="_blank">Instituto Geográfico Nacional de España</a>'
        })
        const seaMap = L.tileLayer('http://tiles.openseamap.org/seamark/{z}/{x}/{y}.png');
        L.map('map', {
            center: [42.2, -8.8],
            zoom: 12,
            layers: [
                seaMap,
                PNOA,
            ]
        });

    </script>
</body>
</html>

Atención

No ves la nueva capa. Recuerda que ya hemos pasado por esto. Un par de pistas: