Exemple terrenys RGB ICGC

Veure codi font pantalla completa



        <html>
        <head>
            <meta charset='utf-8' />
            <title>Compara terrenys</title>
            <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
            <script src='https://api.mapbox.com/mapbox-gl-js/v2.2.0/mapbox-gl.js'></script>
            <link href='https://api.mapbox.com/mapbox-gl-js/v2.2.0/mapbox-gl.css' rel='stylesheet' />
            <style>
                body {
                    margin: 0;
                }
                #map {
                    height: 100%;
                    width: 100%;
                    background-color: #ffffff
                }
                #menu {
                    position: absolute;
                    z-index: 1000;
                    background: #fff;
                    padding: 10px;
                    font-family: 'Open Sans', sans-serif;
                    top: 5px;
                    left: 5px;
                    border-radius: 7px;
                    -webkit-box-shadow: 5px 5px 5px -5px rgba(0, 0, 0, 0.75);
                    -moz-box-shadow: 5px 5px 5px -5px rgba(0, 0, 0, 0.75);
                    box-shadow: 5px 5px 5px -5px rgba(0, 0, 0, 0.75); 
                }
            </style>
        </head>
        <body>
            <div id='menu'>
                <input id='icgc-dem' type='radio' name='rtoggle' value='icgc-dem' checked='checked'>
                <label for='icgc-dem'>Terrain ICGC 2m</label>
                <input id='mapbox-dem' type='radio' name='rtoggle' value='mapbox-dem'>
                <label for='mapbox-dem'>Terrain Mapbox</label>
            </div>
            <div id="map"></div>
            <script>
                mapboxgl.accessToken =
                    'pk.eyJ1IjoiZ2Vvc3RhcnRlcnMiLCJhIjoiMGNxekwxayJ9.sE1YC8Zxwzjh4CQeZiZN_g';
                const map = new mapboxgl.Map({
                    container: 'map',
                    style: 'https://geoserveis.icgc.cat/contextmaps/hibrid.json',
                    center: [1.71611, 42.23818],
                    zoom: 14.03,
                    attributionControl: false,
                    pitch: 85,
                    bearing:-74.4,
                    hash: true
                });
                map.on('load', function () {
                    map.addControl(new mapboxgl.AttributionControl({ compact: true }));
                    map.addControl(new mapboxgl.NavigationControl());
                    map.addSource('mapbox-dem', {
                        'type': 'raster-dem',
                        'url': 'mapbox://mapbox.mapbox-terrain-dem-v1',
                        'tileSize': 512,
                        'maxzoom': 14
                    });
                    map.addSource('icgc-dem', {
                        'type': 'raster-dem',
                        "tiles": [
                            "https://tilemaps.icgc.cat/tileserver/tileserver.php/terreny_icgc_2m_rgb/{z}/{x}/{y}.png"
                        ],
                        'tileSize': 512,
                        'maxzoom': 14
                    });
                    map.setTerrain({
                        'source': 'icgc-dem',
                        'exaggeration': 1
                    });
                    map.addLayer({
                        'id': 'sky',
                        'type': 'sky',
                        'paint': {
                            'sky-type': 'atmosphere',
                            'sky-atmosphere-sun': [0.0, 0.0],
                            'sky-atmosphere-sun-intensity': 15
                        }
                    });
                    for (var i = 0; i < map.getStyle().layers.length; i++) {
                        if (map.getStyle().layers[i].id.indexOf("place") != -1) {
                            map.setLayoutProperty(map.getStyle().layers[i].id, "visibility", "none");
                        }
                    }
                }); //fi onload
                const layerList = document.getElementById('menu');
                const inputs = layerList.getElementsByTagName('input');
                const button = document.getElementById('bt_pitch');
                function switchLayer(layer) {
                    const layerId = layer.target.value;
                     map.setTerrain({ 'source': layerId, 'exaggeration': 1 });
                }
                for (let i = 0; i < inputs.length; i++) {
                    inputs[i].onclick = switchLayer;
                }
            </script>
        </body>
        </html>